找不到模块:错误:无法解析模块“组件/应用程序”。 webpack + reactjs 问题
Posted
技术标签:
【中文标题】找不到模块:错误:无法解析模块“组件/应用程序”。 webpack + reactjs 问题【英文标题】:Module not found: Error: Cannot resolve module 'components/app'. webpack + reactjs issue 【发布时间】:2017-03-04 18:03:35 【问题描述】:我是 webpack 的新手并做出反应。希望你能帮助我。
我遇到了一个问题,在互联网上找不到任何可行的解决方案。 当我尝试运行 webpack-dev-server 时,我一直收到“找不到模块:错误:无法解析模块'组件/应用程序'”错误。
这是我的文件结构。
root/webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports =
devtool: 'inline-source-map',
entry: [
'webpack-dev-server/client?http://127.0.0.1:8080/',
'webpack/hot/only-dev-server',
'./src'
],
output:
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
,
resolve:
moduleDirectories: ['node_modules', 'src'],
extensions: ['', '.js']
,
module:
loaders: [
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query:
presets: ['es2015', 'react']
]
,
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
;
root/.babelrc
presets: ["react", "es2015"],
plugins: ["react-hot-loader/babel"]
root/src/index.js
import React from 'react';
import render from 'react-dom';
import App from 'components/app';
render(<App />, document.getElementById('app'));
root/src/components/app.js
import React from 'react';
export default class App extends React.component
render()
return (
<div>
<h1>Hello There</h1>
</div>
);
【问题讨论】:
【参考方案1】:我同意 Robert Moskal 的回答,使用相对路径导入,同时如果你真的想要绝对路径工作,你可能需要在 webpack.config.js
里面再添加一行您的解决部分在下面添加此行
root: path.resolve('./src'),
这将有助于解析根目录,您可以使用 src 文件夹内的文件夹中的绝对路径轻松导入。我会在下面向您展示我的示例webpack.config.js
'use strict';
const path = require('path');
const loaders = require('./webpack/loaders');
const plugins = require('./webpack/plugins');
const applicationEntries = process.env.NODE_ENV === 'development'
? ['webpack-hot-middleware/client?reload=true']
: [];
const mainEntry = process.env.NODE_ENV === 'development'
? './src/sample/index.tsx'
: './src/lib/index.tsx';
module.exports =
entry: [mainEntry].concat(applicationEntries),
output:
path: path.join(__dirname, 'dist'),
filename: '[name].js',
publicPath: '/',
sourceMapFilename: '[name].js.map',
chunkFilename: '[id].chunk.js',
,
devtool: process.env.NODE_ENV === 'production' ?
'source-map' :
'inline-source-map',
resolve:
root: path.resolve('./src'),
extensions: [
'',
'.webpack.js',
'.web.js',
'.tsx',
'.ts',
'.js',
'.json',
],
,
plugins: plugins,
devServer:
historyApiFallback: index: '/' ,
,
module:
preLoaders: [
loaders.tslint,
],
loaders: [
loaders.tsx,
loaders.html,
loaders.css,
loaders.scss,
loaders.eot,
loaders.svg,
loaders.ttf,
loaders.woff,
loaders.json,
test: /\.png$/,
loader: 'url-loader',
query: mimetype: 'image/png' ,
,
],
,
externals:
'react/lib/ReactContext': 'window',
'react/lib/ExecutionEnvironment': true,
'react/addons': true,
,
;
【讨论】:
非常感谢 @KeshShan 提供的 webpack.config.js 示例和 root:path.resolve 建议 @AntonArtemev 没问题,很高兴我的回答对您有所帮助!! :) 很好的答案,但如果某个项目中的某个人提交了带有 webpack hack 的拉取请求,我会指示他们只需遵循 es6 模块导入约定。【参考方案2】:您需要在 index.js 文件中指定 app 的相对路径。所以
import App from './components/app'
如果没有相对路径符号,模块导入系统会在 node_modules 目录中查找。
【讨论】:
【参考方案3】:您正在寻找module aliasing。配置的 resolve
部分应类似于:
const path = require('path');
resolve:
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
extensions: ['', '.js'],
alias:
components: path.resolve(__dirname, 'src/components/')
这相当于 TypeScript 配置文件中的 paths
选项。
【讨论】:
以上是关于找不到模块:错误:无法解析模块“组件/应用程序”。 webpack + reactjs 问题的主要内容,如果未能解决你的问题,请参考以下文章
在 src/app 外部定义的模块显示错误“找不到模块:错误:无法解析 './' in”
VueJS - 找不到模块:错误:无法解析'@babel/runtime/regenerator'