ES Modules Build Error

ES Modules Build Error

jtoler5jtoler5 Posts: 89Questions: 33Answers: 3

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;
|

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 62,211Questions: 1Answers: 10,205 Site admin

    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

  • jtoler5jtoler5 Posts: 89Questions: 33Answers: 3

    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;
    |
    | /*
    
  • jtoler5jtoler5 Posts: 89Questions: 33Answers: 3

    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;
      })
    
  • allanallan Posts: 62,211Questions: 1Answers: 10,205 Site admin

    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

  • jtoler5jtoler5 Posts: 89Questions: 33Answers: 3
    edited September 2023

    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({....});
    
  • jtoler5jtoler5 Posts: 89Questions: 33Answers: 3
    Answer ✓

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

  • allanallan Posts: 62,211Questions: 1Answers: 10,205 Site admin

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

    Allan

Sign In or Register to comment.