Estoy usando webpack programáticamente, con mecanografiado, ESM y broma. En una prueba de broma, obtengo errores por no incluir una extensión de archivo .js al importar módulos ES. Por ejemplo:
Module not found: Error: Can't resolve 'modulename' in '/path/components' Did you mean 'modulename.js'? BREAKING CHANGE: The request 'modulename' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, eg a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request. De hecho, el módulo en cuestión tiene "type": "module" establecido en su package.json . He intentado agregar .js a la importación y no ayuda.
Estoy invocando broma con:
node --experimental-vm-modules --experimental-specifier-resolution=node node_modules/jest/bin/jest.js como se recomienda en los documentos (todo lo demás funciona excepto el paquete web). Tenga en cuenta que lo he intentado con y sin --experimental-specifier-resolution=node (esto ha ayudado en otras circunstancias similares).
¿Alguna idea sobre cómo hacer que funcione el paquete web? ¡Gracias por adelantado!
Nota: ¡todo funcionaba hasta que se convirtió a ESM! Ahora solo el paquete web programático no funciona.
Configuración del paquete web:
{ entry, target: 'web', output: { path: outputDir, filename: '[name].js', }, mode: process.env.NODE_ENV as 'development' | 'production' | 'none' | undefined, resolve: { extensions: [ '.ts', '.tsx', '.js', '.jsx', '.ttf', '.eot', '.otf', '.svg', '.png', '.woff', '.woff2', '.css', '.scss', '.sass', ], }, module: { rules: [ { test: /\.(ttf|eot|otf|svg|png)$/, loader: 'file-loader', }, { test: /\.(woff|woff2)$/, loader: 'url-loader', }, { test: /\.(js|jsx|ts|tsx)$/, exclude: /node_modules/, loader: 'babel-loader', options: { sourceType: 'unambiguous', presets: [ [ '@babel/preset-env', { corejs: '3.0.0,', useBuiltIns: 'usage', }, ], '@babel/preset-react', '@babel/preset-typescript', ], plugins: [ 'css-modules-transform', [ 'babel-plugin-react-scoped-css', { include: '.scoped.(sa|sc|c)ss$', }, ], '@babel/plugin-proposal-class-properties', ], }, }, { test: /\.(sc|c|sa)ss$/, use: [ 'style-loader', 'css-loader', 'scoped-css-loader', 'sass-loader', ], }, ], }, }La respuesta de @nerdlinger funcionó para mí. Tenía este webpack.config.js
module.exports = { entry: './src/index.js', module: { rules: [ { test: /\.(js)$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ], } ... }y lo cambié a esto
module.exports = { entry: './src/index.js', module: { rules: [ { test: /\.(js)$/, exclude: /node_modules/, use: { loader: 'babel-loader' }, resolve: { fullySpecified: false, } } ], } ... }