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: {
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
