`require is not defined` error when working with `rollup-plugin-commonjs`

[qingtiantongxie]

I'm getting an error in chrome when i test my project in chrome, it's like this :

Uncaught ReferenceError: require is not defined

and I'm pretty sure it's not related to rollup-plugin-commonjs

some code

i meet the error when i use require statement in a .ts file like this

import './index.less'

try {
    require('./src/css/style.css') 
    require('./theme-' + getOperatSystem().toLowerCase().replace(/is/, '') + '.less') // a .less file in project
} catch (e) {
    require('./theme-mac.less')
}

but when i change the file extension with .js , it's totally ok and run well in chrome

This is my rollup.config.js

import livereload from 'rollup-plugin-livereload'
import serve from 'rollup-plugin-serve'

import babel from 'rollup-plugin-babel'
import resolve from '@rollup/plugin-node-resolve'
import typescript from 'rollup-plugin-typescript2'
import styles from 'rollup-plugin-styles';
import commonjs from '@rollup/plugin-commonjs'

import pkg from './package.json'

import { DEFAULT_EXTENSIONS } from '@babel/core';

const extensions = [...DEFAULT_EXTENSIONS, '.js', '.ts', '.tsx'];

export default {
    input: 'src/index.ts',
    output: [
        {
            file: `${pkg.browser}.js`,
            format: 'umd',
            name: 'RightMenu',
            sourcemap: true,
        }, {
            file: `${pkg.module}.js`,
            format: 'es',
            sourcemap: true,
        },
    ],
    plugins: [
        styles(),
        resolve({
            jsnext: true, main: true
        }),
        typescript(),
        commonjs({
            transformMixedEsModules: true
        }),
        babel({
            extensions,
            exclude: 'node_modules/**',
        }),
        livereload(),
        serve({
            open: true,
            openPage: '/examples/index.html',
            contentBase: './'
        }),
    ]
}

Versions

npmPackages: rollup: ^2.57.0 => 2.57.0 rollup-plugin-typescript2: ^0.30.0 => 0.30.0 typescript: ^4.4.3 => 4.4.3

do i missed sth or write sth wrong ?

:)

[ezolenko]

Don't you need a separate plugin for using css with rollup? There is rollup-plugin-postcss for example (never used it, so can't tell you much more than that)

[agilgur5]

Don't you need a separate plugin for using css with rollup? There is rollup-plugin-postcss for example (never used it, so can't tell you much more than that)

They're using rollup-plugin-styles

---

Per https://github.com/ezolenko/rollup-plugin-typescript2/issues/43#issuecomment-345007814 where this was linked to from, TS doesn't normally support CommonJS (and hence the require syntax), and rpt2 does not support the legacy module: "CommonJS".

but when i change the file extension with .js , it's totally ok and run well in chrome

TS won't read it in that case unless you have allowJs: true in your tsconfig, but you didn't attach it here and removed much of the issue template.

In this case I believe you can just move rollup-plugin-commonjs to come before rpt2 in your plugin order. Similar to #43, you can also switch to using all import statements instead, which are valid TS. This is more or less a duplicate of that issue.

This gets out-of-scope of this plugin, but you might run into more complications from there, as a dynamic require (or dynamic import) is often not statically analyzable, so Rollup may be unable to figure out what files to bundle, tree-shake, etc with it. rollup-plugin-copy is often used to manually get around that if is truly required. Again, out-of-scope for here in any case. See https://stackoverflow.com/q/59063576/3431180 for more details.