CommonJS syntax with rollup

Question

I'm working on a lightweight rollup config. For some reason CommonJS aren't converted in the output while ES Modules do.

I'm using both resolve and commonjs rollup plugins.

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { terser } from 'rollup-plugin-terser';


module.exports = {
  input: 'static/js/script.js',
  output: {
    file: '_site/static/js/script.js',
    format: 'iife'
  },
  plugins: [
    resolve(),
    commonjs(),
    terser(),
  ]
};

import { cube } from './components/component-1.js';
import { foo } from './components/component-2.js';
const camelCase = require('camelcase');

console.log(cube(3));
console.log(foo);
console.log(camelCase('foo-bar'));

This works:

import camelCase from 'camelcase';

But CommonJS doesn't work:

const camelCase = require('camelcase');

Do I need to pass any other configuration to make CommonJS syntax work?

Rich Harris Rich Harris · Accepted Answer · 2019-07-22T15:21:12

You can't mix and match require and import with rollup-plugin-commonjs. If a module contains import it's treated as ESM, and require is left untouched.

CommonJS syntax with rollup

1 Answers