require is not defined after build

[Newbie012]

Describe the bug
Getting Uncaught ReferenceError: require is not defined.

After inspecting the emitted js, I saw it tries to require angular like so:

var r={exports:{}};require("./angular"),r.exports=angular;const a=r.exports;console.log({angular:a});

To Reproduce

1. clone https://github.com/Newbie012/bug-wmr-require-is-not-defined
2. npm install
3. npm run build
4. npm run serve
5. Open in browser - see error

Expected behavior
the angular dep should be inlined to the bundle rather than trying to import it

Bug occurs with:

• wmr or wmr start (development)
• wmr build (production)
• wmr serve

Desktop (please complete the following information):

• OS: [e.g. MacOS 11.2.3, Windows 10] Windows 10
• Browser: [e.g. chrome, safari] chrome
• Node Version: [e.g. 15.8] 16
• WMR Version: [e.g. 1.3.1] 3.7.2

Additional context

angular's package.json -> main points to index.js which is

require('./angular');
module.exports = angular;

Which I think is the source of the issue.

[developit]

That makes sense - the Angular package is quite old (2018). It was designed to work with Webpack.

[Newbie012]

@developit Yea I understand. I'm migrating an old enterprise project from everything global to esm. I haven't really tested vite on this project, but it seems like vite is able to process angular in production build as well. I think it's being accomplished by @rollup/plugin-commonjs.

[developit]

Vite would probably handle that package, yes. They prebundle dependencies to ESM using ESBuild.

[Newbie012]

will this package in the future might support cjs packages as well?

[developit]

WMR has support for a few different types of CJS packages, but the conditional re-export techniques used by Angular and React are the most difficult. Vite handles them, and is likely a better option if you're not using Preact and are coming from Webpack.

[Newbie012]

@developit this is in fact what I ended up doing. Thanks for the help!