I work on an ES6 project that I transpile using rollup and babel. It works well except when I try to import npm modules that use monjs (and particularly require('something')) getting an error "require is not defined" in my browser (which means it hasn't properly piled node modules from monjs to ES5). However, I use rollup-plugin-node-resolve and rollup-plugin-monjs, that should do that job if I've understood properly...

Here are my rollup config file:

import babel from 'rollup-plugin-babel';
import eslint from 'rollup-plugin-eslint';
import resolve from 'rollup-plugin-node-resolve'; // to import node_modules packages easily
import monjs from 'rollup-plugin-monjs'; // convert monjs to es6 (in case you use require)

export default {
  input: 'src/main.js',
  output: {
      file:'build/index.js',
      format: 'iife'
  },
  sourcemap: 'inline',
  plugins: [
    resolve({
      jsnext: true,
      main: true,
      browser: true
    }),
    monjs({
        include: 'src/**'
    }),
    eslint({
      exclude: [
        'src/styles/**',
      ]
    }),
    babel({
      exclude: 'node_modules/**',
    })
  ],
};

and my babel config file:

{
    "presets": [
        [
           "es2015",
           {
                "modules": false
            }
        ]
    ],
    "plugins": ["external-helpers"]
}

Examples of modules that I can't load are math.js, nsolvejs, chroma.js, data.gui, etc.

I work on an ES6 project that I transpile using rollup and babel. It works well except when I try to import npm modules that use monjs (and particularly require('something')) getting an error "require is not defined" in my browser (which means it hasn't properly piled node modules from monjs to ES5). However, I use rollup-plugin-node-resolve and rollup-plugin-monjs, that should do that job if I've understood properly...

Here are my rollup config file:

import babel from 'rollup-plugin-babel';
import eslint from 'rollup-plugin-eslint';
import resolve from 'rollup-plugin-node-resolve'; // to import node_modules packages easily
import monjs from 'rollup-plugin-monjs'; // convert monjs to es6 (in case you use require)

export default {
  input: 'src/main.js',
  output: {
      file:'build/index.js',
      format: 'iife'
  },
  sourcemap: 'inline',
  plugins: [
    resolve({
      jsnext: true,
      main: true,
      browser: true
    }),
    monjs({
        include: 'src/**'
    }),
    eslint({
      exclude: [
        'src/styles/**',
      ]
    }),
    babel({
      exclude: 'node_modules/**',
    })
  ],
};

and my babel config file:

{
    "presets": [
        [
           "es2015",
           {
                "modules": false
            }
        ]
    ],
    "plugins": ["external-helpers"]
}

Examples of modules that I can't load are math.js, nsolvejs, chroma.js, data.gui, etc.

• javascript
• node.js
• ecmascript-6
• monjs
• rollup

1 Answer 1

The issue is probably with monjs plugin, it is used to transform cjs into es modules at build time, therefore you should include the cjs modules from node_modules instead of src.

 monjs({
    include: 'node_modules/**'
 })