"TypeError: require is not defined" runtime error in Webpack bundles coming from mithril.mjs

[dead-claudia]

Mithril Version: v2.0.0-rc.1-3

Expected Behavior

import m from "mithril" should work identically regardless of whether mithril is resolved to the mithril.js or mithril.mjs bundles.

Current Behavior

Errors like this when loading the bundle:

mithril.mjs:1582 Uncaught ReferenceError: require is not defined
at Module.../node_modules/mithril/mithril.mjs (mithril.mjs:1582)
at webpack_require (bootstrap:724)
at fn (bootstrap:101)
at Object../model/app.js (app.js:174)
at webpack_require (bootstrap:724)
at fn (bootstrap:101)
at Module../init/index.js (index.js:1)
at webpack_require (bootstrap:724)
at fn (bootstrap:101)
at Module../pack/application.js (application.js:1)

Note that mithril.mjs itself has zero instances of require, which is what makes this so odd. I suspect it's a Webpack bug, but I need a repro to then reduce and send their way first, so I can isolate the problem.

Possible Solution

Not sure, but anything that instructs Webpack to ignore Mithril's "module": "mithril.mjs" field is sufficient to fix it for users.

But of course, if that's the standard advice, then why are we offering .mjs bundles in the first place?

Steps to Reproduce

Edit: @ArthurClemens' repro

1. Clone https://github.com/ArthurClemens/polythene-mithril-setup/tree/next
2. Run npm install
3. Run npm run dev

Context

It's breaking migration for several users.

Additional Information

Your Environment

• Browser Name and version:
• Operating System and version (desktop or mobile):
• Link to your project:

[ArthurClemens]

Test repo: https://github.com/ArthurClemens/polythene-mithril-setup/tree/next (so branch "next").

git clone https://github.com/ArthurClemens/polythene-mithril-setup.git
cd polythene-mithril-setup/
git checkout next
npm install
npm run dev

[nordfjord]

Not sure if related but this flems gives the required error.

[nordfjord]

Ignore me, this flems is mithril@1

[SkylerLipthay]

For me, the fix was a two-parter:

1. Add '.mjs' to the list of resolve.extensions in Webpack's configuration. This looks to already be done in ArthurClemens/polythene-mithril-setup/next.
2. Add a module.rules entry for .mjs files: { test: /\.mjs$/, include: /node_modules/, type: 'javascript/auto' }.

I have no idea if this was a good way to go about a fix (because frankly Webpack is one of the greatest modern mysteries), but for my environment it worked out fine.

[boazblake]

This repo fails when I update to the latest version 2.0.0-rc.3.
with the error Uncaught ReferenceError: require is not defined at Module.../node_modules/mithril/mithril.mjs

https://github.com/boazblake/failing

[ArthurClemens]

I can confirm that adding these lines to webpack config solves the issue:

rules: [
  {
    test: /\.mjs$/,
    type: "javascript/auto",
  },
  ...
]

[cmrbck]

^^^^

Works for me as well. Maybe Webpack just needs to add a built-in rule for .mjs files?

[dead-claudia]

BTW, I filed webpack/webpack#8491 to give Webpack something to track.

[dead-claudia]

This is blocked on webpack/webpack#8491.

[dead-claudia]

Just as a heads up, this is apparently a bug in Webpack v4 that's fixed in v5. I'm still working on getting it fixed in v4 if possible.

[ArthurClemens]

I found an alternative approach. In webpack.config.js:

const baseDir = process.cwd();

module.exports = {

  // ...

  resolve: {
    // Make sure that Mithril is included only once
    alias: {
      "mithril/stream": path.resolve(baseDir, "node_modules/mithril/stream/stream.js"),
      "mithril": path.resolve(baseDir, "node_modules/mithril/mithril.js"),
    },
  }

  // ...

}

By adding this, the extra rule with "javascript/auto" (see above) is not needed.

[dead-claudia]

Whenever the next Webpack update comes out, please see if this reproduces, since I've gotten a patch merged that should help avoid this bug.

[cmrbck]

I've confirmed the fix using Webpack v 4.28.0.