Title: Using rollup plugin for commonjs, but still get 'require is not defined' when loading module
Tags: javascript;ecmascript-6;svelte;rollup
Question: I am using rollup and Svelte for an app using the Twilio Video SDK. I have the rollup plugins for resolve and commonjs loaded.
I am loading the SDK with rollup, and running:
import Video from &quot;twilio-video&quot;;
However after running npm run build (with no errors), at runtime I get:
Uncaught ReferenceError: require is not defined
This error occurs in node_modules/twilio-video/es5/util/insightspublisher/index.js - ie, twilio-video itself is using require()
How can I fix this?
I've tried the dynamicRequireTargets option per the documentation:
commonjs({
dynamicRequireTargets: [
// include using a glob pattern (either a string or an array of strings)
'node_modules/twilio-video/*.js',
But still get the same error.
Full rollup.config.js is below.
import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import json from '@rollup/plugin-json';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';
import nodePolyfills from 'rollup-plugin-node-polyfills';
const production = !process.env.ROLLUP_WATCH;
function serve() {
let server;
function toExit() {
if (server) server.kill(0);
return {
writeBundle() {
if (server) return;
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
});
process.on('SIGTERM', toExit);
process.on('exit', toExit);
}
};
export default {
input: 'src/main.ts',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
nodePolyfills(),
json(),
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: css =&gt; {
css.write('bundle.css');
},
preprocess: sveltePreprocess(),
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
typescript({ sourceMap: !production }),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production &amp;&amp; serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production &amp;&amp; livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
production &amp;&amp; terser()
],
watch: {
clearScreen: false
Comment: Does not sound like an issue for dynamicRequiteTargets to me. `require` will be ignored if the module is identified as ESM because it also contains imports or exports. Could this be the case? Then you should do two things: Tell them that they should fix their module format and try the transformMixedEsModules option for the time being.

Comment: Also, try moving the commonjs plugin to the top in your config. Maybe another plugin is messing up the module format before it is passed to the commonjs plugin. If that works, it would be the preferred option.



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 0, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2020:00:09/16/20', 'FavoriteCount': 1.0, 'PostTypeId': 1, 'Tags': '<javascript><ecmascript-6><svelte><rollup>', 'Title': "Using rollup plugin for commonjs, but still get 'require is not defined' when loading module", 'ViewCount': 3677, 'id': 63919774, 'user_AboutMe': '<p>I make technology products. Have built software for Google, Red Hat and Microsoft, as well as growing my own own startup from 0-22K MRR with client including Monzo, Buzzfeed, Hype, and SuperDry. Top (see above)% StackOverflow, built the largest serverless app in the world, have had my work shown on stage at AWS Reinvent and in node.js release announcements.</p>\n<p><a href="https://mikemaccana.com" rel="nofollow noreferrer">https://mikemaccana.com</a></p>\n', 'user_AccountId': 42451.0, 'user_DisplayName': 'mikemaccana', 'user_Reputation': 98751.0, 'user_Views': 10538.0, 'user_id': 123671.0}}