程序化webpack开玩笑(&A):无法在没有文件扩展名的情况下解析模块 [英] Programmatic Webpack & Jest (ESM): can't resolve module without '.js' file extension
本文介绍了程序化webpack开玩笑(&A):无法在没有文件扩展名的情况下解析模块的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我以编程方式使用webpack,包括TypeScrip、esm和jest。在JEST测试中,我收到了在导入ES模块时没有包括.js
文件扩展名的错误。例如:
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, e. g. 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.
所讨论的模块确实在其package.json
中设置了"type": "module"
。我已尝试将.js
添加到导入,但没有帮助。
我正在调用JEST:
node --experimental-vm-modules --experimental-specifier-resolution=node node_modules/jest/bin/jest.js
推荐in the docs(除webpack外,其他均可用)。请注意,我尝试过使用和不使用--experimental-specifier-resolution=node
(这在其他类似情况下也有帮助)。
对如何让webpack工作有什么想法?提前感谢!
注意:在全部转换为ESM之前,一切都正常工作!现在只有程序化的webpack不工作了。
webpack配置:
{
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',
],
},
],
},
}
推荐答案
好,所以我找到了解决方案here。
基本上,必须在module.rules
下向webpack配置添加2项内容:
{
test: /.m?js/,
type: "javascript/auto",
},
{
test: /.m?js/,
resolve: {
fullySpecified: false,
},
},
这篇关于程序化webpack开玩笑(&A):无法在没有文件扩展名的情况下解析模块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文