Webpack is looking for an index in the datatables folder

ChocolateStarfish

I've been stuck on this for a while trying to fix it. I am just trying to use datatables via NPM. I installed it along with some of the extensions but all the requires() for datatables fail with this error:

ERROR in ./index.js
Module not found: Error: Can't resolve 'datatables.net-dt' in path

I ran webpack with --display-error-details and it shows:

Field 'browser' doesn't contain a valid alias configuration
                    path/node_modules/datatables.net-colreorder-dt/index doesn't exist
                    .js
                      Field 'browser' doesn't contain a valid alias configuration
                      path/node_modules/datatables.net-colreorder-dt/index.js doesn't exist
                    .json
                      Field 'browser' doesn't contain a valid alias configuration
                      path/node_modules/datatables.net-colreorder-dt/index.json doesn't exist

I don't understand why it is looking for the index. I have followed all the documentation I can find on webpack and datatables and according to the datatables download section I should only have to add the packages (which I have done) and add the require's part and it should work.

I have looked at the repos for datatables and its extensions and there is no index in any of them. I've googled this in every which way possible and can't find any answer so I'm hoping someone here might have an idea as I have tried many different things which either didn't work or produced even more errors. I'm really not sure if this is an error with webpack or with datatables.

This is my index.js

require('./index.html'); 
var AWS = require('aws-sdk');
require( 'datatables.net-dt' )();
require( 'datatables.net-buttons-dt' )();
require( 'datatables.net-buttons/js/buttons.print.js' )();
require( 'datatables.net-colreorder-dt' )();
require( 'datatables.net-fixedheader-dt' )();
require( 'datatables.net-rowgroup-dt' )();

No code after the requires runs so I haven't included it.

This is my package.json

{
  "name": "TestCode",
  "version": "1.0.0",
  "description": "Test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": " ",
  "license": "ISC",
  "dependencies": {
    "aws-sdk": "^2.116.0",
    "datatables.net-buttons-dt": "^1.4.2",
    "datatables.net-colreorder-dt": "^1.4.1",
    "datatables.net-dt": "^1.10.16",
    "datatables.net-fixedheader-dt": "^3.1.3",
    "datatables.net-rowgroup-dt": "^1.0.2",
    "jquery": "^3.2.1",
    "raw-loader": "^0.5.1"
  },
  "devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "json-loader": "^0.5.7",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
}

and this is my webpack config

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  context: path.resolve(__dirname, 'src'),
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'src')
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loaders: ['json']
      },
      {
        test: /\.html$/,
        loader: ['raw-loader']
      }
    ]
  },
  resolveLoader: {
    moduleExtensions: ['-loader'] // Needed until AWS update their crap
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
};

allan

So what looks like is happening here is a little hiccup caused by the fact that the -dt styling packages don't require any additional Javascript. They contain CSS only.

The -bs and other styling packages do include Javascript, so they have a main tag in their package file (assuming they need any additional Javascript - the ColReorder extension actually doesn't, while Buttons does).

What to do is, just include the main package directly:

require('./index.html');
var AWS = require('aws-sdk');
require( 'datatables.net' )();
require( 'datatables.net-buttons' )();
require( 'datatables.net-buttons/js/buttons.print.js' )();
require( 'datatables.net-colreorder' )();
require( 'datatables.net-fixedheader' )();
require( 'datatables.net-rowgroup' )();

I'll get that sorted in the download builder.

Question for you - how are you including the CSS for your page? I've never fully understood how loaders include that (they each appear to have different ways of doing it, or ignore it).

Allan

ChocolateStarfish

Thanks for the response Allan,

In regards to your question, no idea, I haven't gotten to that point yet. I have been stuck on this issue for quite a while and changing to the main modules seems to of worked. I had to also remove the () from the end of each require as I got Uncaught TypeError: Cannot set property '$' of undefined instead.

EDIT: I don't think it's working at all actually. It compiles successfully with webpack now but the table just looks like a normal html table. I'll try adding a CSS loader and pointing it at the CSS files but there appears to be no javascript in play either.

ChocolateStarfish

I added style-loader, css-loader and file-loader (for the images) and it still looks like datatables is doing nothing.

allan

Have you actually initialised your DataTable anywhere?

Allan

ChocolateStarfish

Sorry I swore I replied to this that I got it working. I did have it initialised. I had to add:
var $ = require( 'jquery' );
and add this config to my webpack.config
{
test: /.css$/,
loader: 'style-loader!css-loader'
},
{
test: /.(jpg|png|svg)$/,
loader: 'url-loader',
options: {
limit: 25000,
}
}

Though the css is still not working, I'm going to spend some time on that figure out why but datatables itself is so I am happy. I think thats all I had to do to get it working.

allan

Cool. Let me know where you get to with the CSS loader. Its frustrating that there are so many excellent JS loaders, but CSS, which is just as important in a web app, is a nightmare to load.

Allan

artistan

this works for me with webpack.mix.js

webpack.mix.js

let mix = require('laravel-mix');
mix.webpackConfig({
        node: {
            fs: 'empty'
        }
    }).js('resources/assets/js/app.js', 'public/js/app.js')
    .sass('resources/assets/sass/vendor.scss', './public/css/vendor.css')
    .sass('resources/assets/sass/app.scss', 'public/css/app.css');

resources/assets/sass/app.scss

// DataTables https://datatables.net/download/npm#DataTables-core
// @import "datatables";
@import "datatables.min";

resources/assets/js/app.js

require('./bootstrap');
require('./datatables');
require('./fontawesome');

resources/assets/sass/datatables.scss

@import '~datatables.net-colreorder-bs4/css/colReorder.bootstrap4.css';
@import "~datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.css";
@import "~datatables.net-keytable-bs4/css/keyTable.bootstrap4.css";
@import "~datatables.net-rowgroup-bs4/css/rowGroup.bootstrap4.css";
@import "~datatables.net-scroller-bs4/css/scroller.bootstrap4.css";
@import "~datatables.net-select-bs4/css/select.bootstrap4.css";
@import "~datatables.net-autofill-bs4/css/autoFill.bootstrap4.css";
@import "~datatables.net-bs4/css/dataTables.bootstrap4.css";
@import "~datatables.net-buttons-bs4/css/buttons.bootstrap4.css";
@import "~datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.css";
@import "~datatables.net-responsive-bs4/css/responsive.bootstrap4.css";
@import "~datatables.net-rowreorder-bs4/css/rowReorder.bootstrap4.css";
@import "~datatables.net-scroller-bs4/css/scroller.bootstrap4.css";
@import "~datatables.net-select-bs4/css/select.bootstrap4.css";

resources/assets/sass/datatables.min.scss

@import '~datatables.net-colreorder-bs4/css/colReorder.bootstrap4.min.css';
@import "~datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.min.css";
@import "~datatables.net-keytable-bs4/css/keyTable.bootstrap4.min.css";
@import "~datatables.net-rowgroup-bs4/css/rowGroup.bootstrap4.min.css";
@import "~datatables.net-scroller-bs4/css/scroller.bootstrap4.min.css";
@import "~datatables.net-select-bs4/css/select.bootstrap4.min.css";
@import "~datatables.net-autofill-bs4/css/autoFill.bootstrap4.min.css";
@import "~datatables.net-bs4/css/dataTables.bootstrap4.min.css";
@import "~datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css";
@import "~datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.min.css";
@import "~datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css";
@import "~datatables.net-rowreorder-bs4/css/rowReorder.bootstrap4.min.css";
@import "~datatables.net-scroller-bs4/css/scroller.bootstrap4.min.css";
@import "~datatables.net-select-bs4/css/select.bootstrap4.min.css";

resources/assets/js/datatables.js

// https://datatables.net/download/index
require( 'jszip' );
require( 'pdfmake' );
require( 'datatables.net-autofill-bs4' )();
require( 'datatables.net-buttons-bs4' )();
require( 'datatables.net-buttons/js/buttons.colVis.js' )();
require( 'datatables.net-buttons/js/buttons.flash.js' )();
require( 'datatables.net-buttons/js/buttons.html5.js' )();
require( 'datatables.net-buttons/js/buttons.print.js' )();
require( 'datatables.net-colreorder-bs4' )();
require( 'datatables.net-fixedcolumns-bs4' )();
require( 'datatables.net-fixedheader-bs4' )();
// require( 'datatables.net-keytable-bs4/js/' )(); NO JS FILES
require( 'datatables.net-responsive-bs4' )();
// require( 'datatables.net-rowgroup-bs4' )(); NO JS FILES
require( 'datatables.net-rowreorder-bs4' )();
require( 'datatables.net-scroller-bs4' )();
require( 'datatables.net-select-bs4' )();

allan

Thanks! Yes - it should all be working now!

Allan

sunix

If you have js not found issue, try to load built version of pdfmake:

require('pdfmake/build/pdfmake.js');
require('pdfmake/build/vfs_fonts.js');

You can also disable AMD which will solve a lot of issues:

var config = Encore.getWebpackConfig();

config.module.rules.unshift({
  parser: {
    amd: false,
  }
});

module.exports = config;