ES Modules Build Error

jtoler5

Upgrade my editor package from datatables.net-editor-bs5 2.0.3 to datatables.net-editor-bs5 2.2.0 and get an error when trying to build. I made no changes to my Webpack that was working just fine with 2.0.3 and using the .mjs files (so I thought).

Module parse failed: Identifier 'Editor' has already been declared (9:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import Editor from 'datatables.net-editor';
|
> var Editor = DataTable.Editor;
|

allan

Hi,

Sorry you are running into a problem with this. Does it say what file specifically has that error? I've just had a look at the 2.2.0 files form a fresh download and it doesn't have var Editor = DataTable.Editor; in it.

That said, I do recall an issue along those lines, although I can't recall exactly when it was or when it was resolved.

Could you try 2.2.2 please? I see your license will over that, so I think it makes sense to jump to the latest release.

Regards,
Allan

jtoler5

I believe you should take a look at the editor-bs5 package to see that code listed in error. Also the editor-bs5 package only goes to 2.2.0 there is no 2.2.2 it says. I did try manually adding editor 2.2.2 in my package.json - no luck.

"datatables.net-editor": "^2.2.2",
 "datatables.net-editor-bs5": "^2.2.0",

Here is the full error

> bin/console assets:install -q --symlink --relative assets
> bin/console fos:js-routing:dump -q --format=json --target=assets/js/routes.json
Editor NPM install script
  Installing node_modules/datatables.net-editor-bs5/css/editor.bootstrap5.css
  Installing node_modules/datatables.net-editor-bs5/css/editor.bootstrap5.min.css
  Installing node_modules/datatables.net-editor/js/dataTables.editor.js
  Installing node_modules/datatables.net-editor/js/dataTables.editor.min.js
  Installing node_modules/datatables.net-editor/js/dataTables.editor.min.mjs
  Installing node_modules/datatables.net-editor/js/dataTables.editor.mjs
  Installing node_modules/datatables.net-editor-bs5/js/editor.bootstrap5.js
  Installing node_modules/datatables.net-editor-bs5/js/editor.bootstrap5.min.js
  Installing node_modules/datatables.net-editor-bs5/js/editor.bootstrap5.min.mjs
  Installing node_modules/datatables.net-editor-bs5/js/editor.bootstrap5.mjs
Done
Running webpack ...

 ERROR  Failed to compile with 1 errors                                                                                                                                            10:22:15 AM

 error  in ./node_modules/datatables.net-editor-bs5/js/editor.bootstrap5.mjs                                                                                                       10:22:15 AM

Module parse failed: Identifier 'Editor' has already been declared (9:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import Editor from 'datatables.net-editor';
|
> var Editor = DataTable.Editor;
|
| /*

jtoler5

I'm using Encore in the webpack since it is a Symfony project. Here is the part that handles the babel-loader.

Encore.setOutputPath("public/assets/")
  .setPublicPath("/assets")
  .setManifestKeyPrefix("assets")

  .autoProvidejQuery()
  .cleanupOutputBeforeBuild()
  .enableIntegrityHashes(Encore.isProduction(), ["sha256", "sha384", "sha512"])
  .enableSingleRuntimeChunk()
  .enableSourceMaps(!Encore.isProduction())
  .enableStimulusBridge("./assets/controllers.json")
  .enableVersioning(Encore.isProduction())
  .splitEntryChunks()

  .configureBabel((config) => {
    config.plugins.push("@babel/plugin-proposal-class-properties");
    config.plugins.push("@babel/plugin-proposal-optional-chaining");
    config.plugins.push("@babel/plugin-proposal-object-rest-spread");
    config.plugins.push("@babel/plugin-proposal-nullish-coalescing-operator");
    config.plugins.push("@babel/plugin-transform-runtime");
    config.plugins.push("@babel/transform-regenerator");
  })
  .configureBabelPresetEnv((config) => {
    // enables @babel/preset-env polyfills
    config.useBuiltIns = "usage";
    config.corejs = 3;
  })

allan

datatables.net-editor-bs5 is just a holding package - the actual code in it just prints a console message saying that the download package needs to be installed. You must run the Editor install.js script as noted here - do you do that? If you give it the 2.2.2 zip file downloaded from here I think it should work okay.

Let me know how you get on with it.

Allan

jtoler5

Yes, I do handle that at the very beginning of the build.

> bin/console assets:install -q --symlink --relative assets
> bin/console fos:js-routing:dump -q --format=json --target=assets/js/routes.json
Editor NPM install script
  Installing node_modules/datatables.net-editor-bs5/css/editor.bootstrap5.css
  Installing node_modules/datatables.net-editor-bs5/css/editor.bootstrap5.min.css
  Installing node_modules/datatables.net-editor/js/dataTables.editor.js
  Installing node_modules/datatables.net-editor/js/dataTables.editor.min.js
  Installing node_modules/datatables.net-editor/js/dataTables.editor.min.mjs
  Installing node_modules/datatables.net-editor/js/dataTables.editor.mjs
  Installing node_modules/datatables.net-editor-bs5/js/editor.bootstrap5.js
  Installing node_modules/datatables.net-editor-bs5/js/editor.bootstrap5.min.js
  Installing node_modules/datatables.net-editor-bs5/js/editor.bootstrap5.min.mjs
  Installing node_modules/datatables.net-editor-bs5/js/editor.bootstrap5.mjs
Done
Running webpack ...

 ERROR  Failed to compile with 1 errors                                                                                                                                             5:07:02 AM

 error  in ./node_modules/datatables.net-editor-bs5/js/editor.bootstrap5.mjs                                                                                                        5:07:02 AM

Module parse failed: Identifier 'Editor' has already been declared (9:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import Editor from 'datatables.net-editor';
|
> var Editor = DataTable.Editor;
|
| /*

Webpack Bundle Analyzer saved report to /Users/justin/Projects/work/malibu-redux/public/assets/webpack.html
54 assets
225 modules

This is how I am using it...

import DataTable from "datatables.net-bs5";
import Editor from "datatables.net-editor-bs5";
const editor = new DataTable.Editor({....});

jtoler5

Lord! I am an idiot! I did forget to update my Editor.zip! Made sure to update and everything was fine. Sorry

allan

That will do it . Good to hear that you've got it working now!

Allan