如果文件名为 jsx，webpack 无法找到模块

像这样编写 webpack.config.js

module.exports = {
entry: './index.jsx',
output: {
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
};

在 index.jsx中，我导入一个 react模块 App

import React from 'react';
import { render } from 'react-dom';


import App from './containers/App';


let rootElement = document.getElementById('box')
render(
<App />,
rootElement
)

我发现如果我在 App.jsx中命名模块应用程序，那么 webpack 会说在 index.jsx中找不到模块 App，但是如果我在 App.js中命名模块应用程序，它会找到这个模块并且工作得很好。

所以我很困惑。在我的 webpack.config.js中，我写了 test: /\.jsx?$/来检查文件，但是为什么找不到命名为 *.jsx的文件呢？

enter image description here

76745 次浏览
小开
最佳答案

Webpack 不知道隐式地解析 .jsx文件。可以在应用程序中指定文件扩展名(import App from './containers/App.jsx';)。当前的加载程序测试要求在显式导入扩展名为 jsx 的文件时使用 babel 加载程序。

或者，您可以将 .jsx包含在 webpack 应该解析的扩展中，而无需显式声明:

module.exports = {
entry: './index.jsx',
output: {
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
},
resolve: {
extensions: ['', '.js', '.jsx'],
}
};

对于 Webpack 2，不要使用空的扩展名。

resolve: {
extensions: ['.js', '.jsx']
}
小开

除了上面的答案,

在 解决属性中，必须添加应用程序中使用的所有文件类型。

假设您想使用 < em > . jsx or. es6 文件; 您可以很高兴地将它们包含在这里，webpack 将解决它们:

resolve: {
extensions: ["", ".js", ".jsx", ".es6"]
}

如果在 解决属性中添加扩展名，则可以从 import 语句中删除它们:

import Hello from './hello'; // Extensions removed
import World from './world';

其他情况下，如果你想检测咖啡脚本，你应该配置你的 测试属性，以及像:

// webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
resolve: {
// you can now require('file') instead of require('file.coffee')
extensions: ['', '.js', '.json', '.coffee']
}
};
小开

验证生成的 bundle.js 没有错误(请检查任务运行器日志)。

由于组件呈现函数中 html 中的语法错误，我得到了“如果文件名为 jsx，则无法找到模块”。

小开

出于可读性和复制粘贴编码的考虑，下面是本帖中来自 罗杰斯先生评论的 webpack 4答案。

module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
resolve: {
extensions: [".js", ".jsx"]
},
use: {
loader: "babel-loader"
}
},
]
}
小开

我面临类似的问题，并能够解决使用 决心属性。

const path = require('path');
module.exports = {
entry: './src/app.jsx',
output: {
path: path.join(__dirname,'public'),
filename:  'bundle.js'
},
module : {
rules: [{
loader: 'babel-loader',
test: /\.jsx$/,
exclude: /node_modules/
}]
},
resolve: {
extensions: ['.js', '.jsx']
}
}

正如您所看到的，我在那里使用了. jsx 解决了以下错误

./src/app.jsx 中的错误 未找到模块: 错误: 无法解析

参考资料: https://webpack.js.org/configuration/resolve/#resolve-extensions

小开

正如在@max 对 webpack 4的回答的评论中提到的，我发现我需要把它放到模块下面列出的规则中，像这样:

{
module: {
rules: [
{
test: /\.jsx?$/,
resolve: {
extensions: [".js", ".jsx"]
},
include: ...
}
]
}
}
小开

我发现重新启动我的服务器修复了这个问题

npm start
小开

我在构建具有以下 webpack依赖项的打字稿项目时遇到了类似的导入问题:

"webpack": "^5.28.0",
"webpack-cli": "^4.5.0"

因此，我在正确的路径中提供了一个 App.tsx文件，并用指定的 export 导出了它。但是，yarn build和 Module not found: Error: Can't resolve './App' in '/app/sample_proj/src'都失败了。此错误的相关代码是: import {App} from './App';。为了解决这个问题，我必须在 webpack已知扩展名下添加 .tsx。webpack.config.js的条目样本如下:

 module.exports = {
......
resolve: {
extensions: [ '.ts', '.js', '.tsx', '.jsx'],
}
}

此外，对于此错误，如果导入是默认的或命名的，则无关紧要。webpack只需要知道它应该处理的文件扩展名类型。


提交答案