Using jQuery DataTables with Rollup.js

Question

Ok I'm using the tool rollup for the first time and I love how small it is making the code. Tree shaking is great. However, I'm having some trouble getting it to include everything correctly. I tried having a single entry point, exp.js, where I export things from various files like this:

export {
    dashboardCharts
} from './dashboard.js';

my rollup.config.js looks like

export default {
    // tell rollup our main entry point
    input: [
        'assets/js/exp.js',
    ],

    output: {
      name: 'helloworld',
      file: 'build/js/main.js',
        format: 'iife'
        // format: 'umd'
    },
    plugins: [
        resolve({
            // pass custom options to the resolve plugin
            customResolveOptions: {
              moduleDirectory: 'node_modules'
            }
        }),
        multiEntry()
        // terser(),
    ],
};

The file dashboard.js includes the datatables library, so datatables gets included in the bundle main.js. However, datatables tests whether it should take the commonjs path or not by testing

else if ( typeof exports === 'object' ) {
    // CommonJS
    module.exports = function (root, $) {

and I'm trying to execute this in the browser, so I don't want the commonjs path. Rollup's top level scope is declared like

var helloworld = (function (exports) {

so exports ends up being an empty object, the browser tries to execute the commonjs path and we get a "module is not defined" error.

I feel like I'm really close, but I'm missing a simple solution here. I also tried doing a umd format instead of iife, but it didn't help. Is there a different version of datatables I should be using?

Answer 1

I used rollup with svelte and I had some jquery legacy to import; here is how I did it:

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import autoPreprocess from 'svelte-preprocess';
import json from '@rollup/plugin-json';

const production = !process.env.ROLLUP_WATCH;

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js',
    },
    plugins: [
        json(),
        svelte({
            // Enables run-time checks when not in production.
            dev: !production,

            // Extracts any component CSS out into a separate file — better for performance.
            css: css => css.write('public/build/bundle.css'),

            // Emit CSS as "files" for other plugins to process
            emitCss: true,

            preprocess: autoPreprocess()
        }),

        resolve({
            browser: true,
            dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
        }),
        commonjs(),

        postcss({
            extract: true,
            minimize: true,
            use: [
                ['sass', {
                includePaths: [
                    './src/theme',
                    './node_modules'
                ]
                }]
            ]
        }),

        // In dev mode, call `npm run start` once the bundle has been generated
        !production && serve(),

        // Watches the `public` directory and refresh the browser on changes when not in production.
        !production && livereload('public'),

        // Minify for production.
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

function serve() {
    let started = false;

    return {
        writeBundle() {
            if (!started) {
                started = true;

                require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
                    stdio: ['ignore', 'inherit', 'inherit'],
                    shell: true
                });
            }
        }
    };
}

Maybe is too much what I posted (I wanted to show you the context from a working config), but you can extract from it the needed part. I think you need the commonjs plugin.