Datatables Typescript4 error : jquery.dataTables.js contains a reference to the file "define"

  datatables, symfony, typescript, webpack

I am working on a Symfony project using Webpack & Datatables. After a large update of my dependencies to latest versions, i get the following error when compiling with Webpack:

"./node_modules/datatables.net/js/jquery.dataTables.js" contains a
reference to the file "define". This file can not be found, please
check it for typos or update it if the file got moved.

As per the doc, I require DataTables as such:
require( 'datatables.net' )(window, $);

No information on Datatables.net, all my dependencies seem updated to their latest working versions. I fear it is a DataTables syntax-related issue but my typescript knowledge is too limited to judge. These are my dependencies in package.json:

    {
  "devDependencies": {
    "@symfony/webpack-encore": "^1.6.1",
    "bootstrap": "^5",
    "copy-webpack-plugin": "^5.1.1",
    "core-js": "^3.6.5",
    "expose-loader": "^3.0.0",
    "jquery": "^3.5.1",
    "node-sass": "^4.14.1",
    "regenerator-runtime": "^0.13.5",
    "sass-loader": "^12.1.0",
    "webpack-notifier": "^1.6.0"
  },
  "license": "UNLICENSED",
  "private": true,
  "scripts": {
    "dev-server": "encore dev-server",
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
  },
  "dependencies": {
    "@popperjs/core": "^2.9.3",
    "autosize": "^4.0.2",
    "css-loader": "^6.3.0",
    "datatables.net-autofill": "^2.3.9",
    "datatables.net-autofill-bs4": "^2.3.9",
    "datatables.net-autofill-bs5": "^2.3.9",
    "datatables.net-colreorder": "^1.5.4",
    "datatables.net-colreorder-bs4": "^1.5.4",
    "datatables.net-colreorder-bs5": "^1.5.4",
    "datatables.net-fixedcolumns": "^4.0.0",
    "datatables.net-fixedcolumns-bs4": "^4.0.0",
    "datatables.net-fixedcolumns-bs5": "^4.0.0",
    "datatables.net-fixedheader": "^3.2.0",
    "datatables.net-fixedheader-bs4": "^3.2.0",
    "datatables.net-fixedheader-bs5": "^3.2.0",
    "datatables.net-responsive": "^2.2.9",
    "datatables.net-responsive-bs4": "^2.2.9",
    "datatables.net-responsive-bs5": "^2.2.9",
    "datatables.net-scroller": "^2.0.5",
    "datatables.net-scroller-bs4": "^2.0.5",
    "datatables.net-scroller-bs5": "^2.0.5",
    "datatables.net-select": "^1.3.3",
    "datatables.net-select-bs4": "^1.3.3",
    "datatables.net-select-bs5": "^1.3.3",
    "file-loader": "^6.2.0",
    "imports-loader": "^0.8.0",
    "popper.js": "^1.16.1",
    "quill": "1.3.6",
    "sine-waves": "^0.3.0",
    "ts-loader": "^9.2.6",
    "typescript": "^4.4.3"
  }
}

Further note: I tried meddling with my expose-loader configuration, which exposes JQuery, without any change yet. But it might be a lead.

Source: Symfony Questions

LEAVE A COMMENT