When I use only const Example1 = require('./example1.js) statement then code inside example1.js file is getting included in the bundle. And if I use only import Example2 from './example2.js' then also code inside example2.js is getting included in the bundle. But if I use both the statements only import is working and require is not working.

I am using rollup for bundling.

My rollup configuration looks like this

import babel from 'rollup-plugin-babel'
import monjs from 'rollup-plugin-monjs'
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import resolve from 'rollup-plugin-node-resolve'
import url from 'rollup-plugin-url'
import svg from 'rollup-plugin-svg'
import json from 'rollup-plugin-json';
import { terser } from 'rollup-plugin-terser'

export default {
  input: 'src/sdk/test.js',
  output: [
    {
      file: "src/sdk/sdk.js",
      format: 'cjs'
    },
    {
      file: "src/sdk/sdk.es.js",
      format: 'es'
    },
    {
      file: "src/sdk/sdk.iife.js",
      format: 'iife'
    }
  ],
  plugins: [
    resolve({
      browser: true,
    }),
    monjs(),
    external(),
    postcss({
      modules: true
    }),
    url({
      limit: 100 * 1024,
      emitFiles: false
    }),
    svg(),
    babel({
      exclude: 'node_modules/**',
      "plugins": ["@babel/plugin-proposal-class-properties"]
    }),
    terser(),
    json()
  ]
}

When I use only const Example1 = require('./example1.js) statement then code inside example1.js file is getting included in the bundle. And if I use only import Example2 from './example2.js' then also code inside example2.js is getting included in the bundle. But if I use both the statements only import is working and require is not working.

I am using rollup for bundling.

My rollup configuration looks like this

import babel from 'rollup-plugin-babel'
import monjs from 'rollup-plugin-monjs'
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import resolve from 'rollup-plugin-node-resolve'
import url from 'rollup-plugin-url'
import svg from 'rollup-plugin-svg'
import json from 'rollup-plugin-json';
import { terser } from 'rollup-plugin-terser'

export default {
  input: 'src/sdk/test.js',
  output: [
    {
      file: "src/sdk/sdk.js",
      format: 'cjs'
    },
    {
      file: "src/sdk/sdk.es.js",
      format: 'es'
    },
    {
      file: "src/sdk/sdk.iife.js",
      format: 'iife'
    }
  ],
  plugins: [
    resolve({
      browser: true,
    }),
    monjs(),
    external(),
    postcss({
      modules: true
    }),
    url({
      limit: 100 * 1024,
      emitFiles: false
    }),
    svg(),
    babel({
      exclude: 'node_modules/**',
      "plugins": ["@babel/plugin-proposal-class-properties"]
    }),
    terser(),
    json()
  ]
}

• javascript
• bundle
• es6-modules
• monjs
• rollup

• Well, no, just don't mix the two module syntaxes. – Bergi Commented Jul 26, 2020 at 15:33
• I wish I could @Bergi – Vikram Hegde Commented Jul 27, 2020 at 12:52

1 Answer 1

By default, rollup supports 'esm' modules as entry. If you like to include monjs files in the project, you can include '@rollup/plugin-monjs' into plugins field, it usually works.

Maybe the following config will help, I tried with very simple example:

monjs({transformMixedEsModules:true})

transformMixedEsModules Instructs the plugin whether or not to enable mixed module transformations. This is useful in scenarios with mixed ES and CommonJS modules. Set to true if it's known that require calls should be transformed, or false if the code contains env detection and the require should survive a transformation.

https://github./rollup/plugins/tree/master/packages/monjs