如果文件名为 jsx,webpack 找不到模块
webpack can't find module if file named jsx
像我这样写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
,但是如果我在 [=] 中命名模块应用程序18=], 它会找到这个模块并正常工作。
所以,我对此感到困惑。在我的webpack.config.js
里,我写了test: /\.jsx?$/
来检查文件,但是为什么找不到名为*.jsx
的文件呢?
Webpack 不知道隐式解析 .jsx
文件。您可以在应用中指定文件扩展名 (import App from './containers/App.jsx';
)。您当前的加载器测试表明,当您显式导入具有 jsx 扩展名的文件时,使用 babel 加载器。
或者,你可以在 webpack 应该解析的扩展中包含 .jsx
而无需显式声明:
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']
}
添加到上面的答案,
resolve 属性 是您必须添加您在应用程序中使用的所有文件类型的地方。
假设您要使用 .jsx 或 .es6 文件;你可以愉快地将它们包含在这里,webpack 将解决它们:
resolve: {
extensions: ["", ".js", ".jsx", ".es6"]
}
如果在 resolve 属性 中添加扩展名,则可以从导入语句中删除它们:
import Hello from './hello'; // Extensions removed
import World from './world';
其他情况,例如如果您想要检测咖啡脚本,您应该配置您的 test 属性 以及:
// 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 的生成没有错误(检查 Task Runner 日志)。
由于组件渲染函数 html 中的语法错误,我收到“如果文件名为 jsx 则找不到模块”。
为了可读性和复制粘贴编码。这是来自此线程中 mr rogers 评论的 webpack 4 答案。
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
resolve: {
extensions: [".js", ".jsx"]
},
use: {
loader: "babel-loader"
}
},
]
}
我遇到了类似的问题,并且能够使用 resolve 属性.
解决
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
文件,并使用命名导出导出。但是,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
只需要知道它应该处理的文件扩展名的种类。
像我这样写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
,但是如果我在 [=] 中命名模块应用程序18=], 它会找到这个模块并正常工作。
所以,我对此感到困惑。在我的webpack.config.js
里,我写了test: /\.jsx?$/
来检查文件,但是为什么找不到名为*.jsx
的文件呢?
Webpack 不知道隐式解析 .jsx
文件。您可以在应用中指定文件扩展名 (import App from './containers/App.jsx';
)。您当前的加载器测试表明,当您显式导入具有 jsx 扩展名的文件时,使用 babel 加载器。
或者,你可以在 webpack 应该解析的扩展中包含 .jsx
而无需显式声明:
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']
}
添加到上面的答案,
resolve 属性 是您必须添加您在应用程序中使用的所有文件类型的地方。
假设您要使用 .jsx 或 .es6 文件;你可以愉快地将它们包含在这里,webpack 将解决它们:
resolve: {
extensions: ["", ".js", ".jsx", ".es6"]
}
如果在 resolve 属性 中添加扩展名,则可以从导入语句中删除它们:
import Hello from './hello'; // Extensions removed
import World from './world';
其他情况,例如如果您想要检测咖啡脚本,您应该配置您的 test 属性 以及:
// 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 的生成没有错误(检查 Task Runner 日志)。
由于组件渲染函数 html 中的语法错误,我收到“如果文件名为 jsx 则找不到模块”。
为了可读性和复制粘贴编码。这是来自此线程中 mr rogers 评论的 webpack 4 答案。
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
resolve: {
extensions: [".js", ".jsx"]
},
use: {
loader: "babel-loader"
}
},
]
}
我遇到了类似的问题,并且能够使用 resolve 属性.
解决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
文件,并使用命名导出导出。但是,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
只需要知道它应该处理的文件扩展名的种类。