Error with jquery from datatables.mjs when running npm run build

AlfVII

Hi!

I'm new using datatables, but I hve to say it's amazing and I am already in love with it.

I am using it with vue3+vite, and it works fine witn the "npm run dev" command, but when I try to build it with "npm run build" I get the following error, where datatables.mjs imports jquery.

x Build failed in 7.28s
error during build:
node_modules/datatables.net/js/dataTables.mjs (5:7): "default" is not exported by "node_modules/jquery/dist/jquery.js", imported by "node_modules/datatables.net/js/dataTables.mjs".
file: /home/alf/OpenMagnetics/WebFrontend/node_modules/datatables.net/js/dataTables.mjs:5:7

3:  */
4:
5: import jQuery from 'jquery';
          ^
6:
7: // DataTables code uses $ internally, but we want to be able to

    at getRollupError (file:///home/alf/OpenMagnetics/WebFrontend/node_modules/rollup/dist/es/shared/parseAst.js:396:41)
    at error (file:///home/alf/OpenMagnetics/WebFrontend/node_modules/rollup/dist/es/shared/parseAst.js:392:42)
    at Module.error (file:///home/alf/OpenMagnetics/WebFrontend/node_modules/rollup/dist/es/shared/node-entry.js:15715:16)
    at Module.traceVariable (file:///home/alf/OpenMagnetics/WebFrontend/node_modules/rollup/dist/es/shared/node-entry.js:16164:29)
    at ModuleScope.findVariable (file:///home/alf/OpenMagnetics/WebFrontend/node_modules/rollup/dist/es/shared/node-entry.js:13886:39)
    at Identifier.bind (file:///home/alf/OpenMagnetics/WebFrontend/node_modules/rollup/dist/es/shared/node-entry.js:5088:40)
    at VariableDeclarator.bind (file:///home/alf/OpenMagnetics/WebFrontend/node_modules/rollup/dist/es/shared/node-entry.js:2675:23)
    at VariableDeclaration.bind (file:///home/alf/OpenMagnetics/WebFrontend/node_modules/rollup/dist/es/shared/node-entry.js:2671:28)
    at Program.bind (file:///home/alf/OpenMagnetics/WebFrontend/node_modules/rollup/dist/es/shared/node-entry.js:2671:28)
    at Module.bindReferences (file:///home/alf/OpenMagnetics/WebFrontend/node_modules/rollup/dist/es/shared/node-entry.js:15694:18)

Do you guys know how I can fix it and use datatables in production?

Thanks a lot!

allan

What bundler are you using and how it is configured? What version of jQuery is it the build is using?

Allan

AlfVII

About JQuery, I have 3.7.1, though I am not using it myself in my code, I guess that's the version installed by datatables. Not sure about the bundler (I'm a bit new at this), but I guess I can leave here my vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteCompression from 'vite-plugin-compression';

export default defineConfig({
    build: {
        rollupOptions: {
            output: {
                chunkFileNames: 'assets/js/[name]-[hash].js',
                entryFileNames: 'assets/js/[name]-[hash].js',
                
                assetFileNames: ({name}) => {
                    if (/\.(gif|jpe?g|png|svg)$/.test(name ?? '')){
                        return 'assets/images/[name]-[hash][extname]';
                    }
                    
                    if (/\.css$/.test(name ?? '')) {
                        return 'assets/css/[name]-[hash][extname]';
                    }
 
                    return 'assets/[name]-[hash][extname]';
                },
            },
        },
        commonjsOptions: { include: [] },
    },
    optimizeDeps: {
        disabled: false,
    },
    publicDir: 'src/public',
    plugins: [
        vue(),
        viteCompression({filter: '/\.(js|mjs|json|css|html|wasm)$/i'}),
    ],
    server: {
        proxy: {
            '/api': {
                target: 'https://localhost:8888',
                changeOrigin: true,
                secure: false,      
                ws: true,
            }
        
        }
    }
})

And thanks!

allan

I'm not sure what is going wrong there I'm afraid! I've created this little test case showing DataTables being imported and built with Vite, and it appears to run okay.

I haven't tried integrating your Vite configuration yet though.

Are you able to share a Stackbltiz or a minimal Git repo showing the issue so I can take a look into the problem?

Allan

AlfVII

Hi!

I made a little repository reproducing the error, and while cleaning it up I found the problem:

Line 25 in the vite.config.js:
commonjsOptions: { include: [] },

that breaks the "npm run build", for some reason I don't understand.

I have already fixed it on my side, but if you want to take a look this is the reproducing repository:
https://github.com/AlfVII/datatables_test

If you run "npm run dev", it works fine, but if you compile it with "npm run build" it gives you the error I reported. I hope it can be od help.

Thanks fot the support!

allan

Many thanks - I think the include: [] is a configuration error in the context to what you want.

That tells Rollup not to convert CommonJS libraries to ESM compatible, since there is nothing in the include array. jQuery 3 and earlier don't support ESM natively - they will be adding that with v4. i.e. it is a CommonJS library which you are trying to use in an ESM environment, so it would need to be converted.

Doing:

commonjsOptions: { include: [/node_modules/] },

Allows it to work as expected.

Allan