webpack with npm and datatables

Question

I'm getting error with every solution I can find, my scope is just declare a DataTables() object in my index.js. I ended up the first time initialization with the basic setup in their getting-started page: https://webpack.js.org/guides/getting-started/ After this i run npm run build and it worked. Done that, I followed the instruction on this git repo: https://gist.github.com/marcstober/c34bb4bdf7ef622cb24d6675723749bd#file-jquery-datatables-webpack I don't understand what can I have wrong, I just followed as showed in the linked resources. Just to completeness I paste my files. webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
};

package.json

{
  "name": "spotz-fe-dev",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.23.0",
    "webpack-cli": "^4.5.0"
  },
  "dependencies": {
    "datatables.net": "^1.10.23",
    "datatables.net-dt": "^1.10.23",
    "lodash": "^4.17.21"
  }
}

src/index.js

import _ from 'lodash';
import $ from 'jquery';
import 'datatables.net';
import 'datatables.net-dt/css/jquery.datatables.css';

function component() {
    const element = document.createElement('div');

    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    $('table[data-table]').DataTable();

    return element;
}

document.body.appendChild(component());

dist/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
  </head>
  <body>
   <script src="main.js"></script>
  </body>
</html>

As you can see is a very basic setup, my attempt is create an empty table with an npm run build. Once is working I will begin the porting of my code, I already have a working project with simple jquery jquery-ui and datatables. I thought to use this to simplify the developing process.

Regards.

score 0 · Accepted Answer · answered Feb 25 '21 at 14:51

Ok I solved, basically webpack do not recognize css code so I had to install css-loader, after this webpack had issues with the image file so I had to install style-color and file-loader. The last was with jQuery and I had to explicity install jQuery and finally npm update. I followed then this links.

1) webpack https://webpack.js.org/guides/getting-started/
2) webpack https://www.taniarascia.com/how-to-use-webpack/
3) options https://webpack.js.org/loaders/css-loader/
4) options https://stackoverflow.com/questions/35568114/cannot-load-png-files-with-webpack-unexpected-character
5) options https://www.npmjs.com/package/file-loader
6) dt https://datatables.net/forums/discussion/32542/datatables-and-webpack
7) dt https://gist.github.com/marcstober/c34bb4bdf7ef622cb24d6675723749bd

Regards.

webpack with npm and datatables

1 Answers1