Fixing .mjs imports with ESM libraries in Webpack 4

No long story for this one.

If you are working with Webpack 4 with/without Typescript there's a good chance that your webpack is complaining about .mjs files and not being able to import stuff from them.

2 solutions.

Migrate to Webpack 5
Configure Webpack 4 to remove the strict module loading so it can just bundle the .mjs files as normal .js files

for those who'd go with the 2nd one, here's how.

Considering the below is your webpack config, add another rule to the array of rules.

const config = {
  module: {
    rules: [
      // ... all your loaders/rules
      // add the below rule
      {
        type: 'javascript/auto',
        test: /\.mjs$/,
        use: [],
      },
    ],
  },
}

If you are using create-react-app, the default babel-loader tried to load the .mjs files but other .mjs rules actually conflict with it so instead of trying to handle every conflict just let webpack know that it has to consider .mjs files as just plain javascript files that it needs to compile as normal and it'll take care of it.

Hope that helps someone.