Webpack4 fix for .mjs files

#react #webpack #mjs

Using CRA and Webpack4 and find .mjs files giving an issue? (Yes im using CRA and Webpack4 in 2024 FML!)
Here are webpack config settings that will help -

const  reScript = /\.(js|jsx|mjs)$/;
resolve: {

// Allow absolute paths in imports, e.g. import Button from 'components/Button'
// Keep in sync with .flowconfig and .eslintrc
modules: ['node_modules', 'src'],
extensions: ['.js', '.jsx','.mjs']
},

module: {
// Make missing exports an error instead of warning
strictExportPresence:  true,
rules: [
{ 
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto'
},

// Rules for JS / JSX
{
test:  reScript,
include: [SRC_DIR, resolvePath('tools')],
loader:  'babel-loader',
options: {} 
}
}],

Cheers. Happy hacking!

Cover image credits - https://unsplash.com/photos/text-KZcWygxZ_J4