Trouble using `require` with `rollup-plugin-commonjs` -- use TS `import` syntax instead

config

// rollup.config.js
import typescript from 'rollup-plugin-typescript2';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve'

export default {
  input: 'src/index.ts',
  output: {
    format: 'es',
    file: 'dist/index.js'
  },

  plugins: [
    typescript(),
    nodeResolve(),
    commonjs()
  ]
}

input

// index.ts
var f = require('untypedModule')
f()

output

// dist/index.js
var f = require('untypedModule')
f()

when typescript() removed from plugins array

// dist/index.js
function f() {...}
f()

As you can see ‘typescript-plugin’ somehow prevents ‘commonJs’ and ‘nodeResolve’ to produce proper output

If I remove ‘typescript-plugin’ from chain, the output is correct

Please help.

[ezolenko]

Yeah, I think typescript doesn’t try to resolve requires, so they are invisible to rollup (because of "module": "es2015" option likely, which this plugin requires), but I’m not entirely sure.

[ezolenko]

Looks like you need "allowJs": true in tsconfig (that forces "declaration": false, beacuse ts can’t generate declarations when there are untyped modules in the mix). Then change require to import: import { helper } from './helpers'

Then rollup will generate correct bundle – an empty file – because you don’t explicitly export anything. Once you export stuff, for example export const x = helper(), the bundle will contain your helper (but only with the stuff you actually use, the rest rollup will shake from the tree).