Module not found: Error: Can't resolve 'Home'
Module not found: Error: Can't resolve 'Home'
我刚开始学习 React,在尝试使用 webpack 构建时偶然发现了这个错误。
Module not found: Error: Can't resolve 'Home' in 'D:\wamp64\www\Wallet\src\components'
resolve 'Home' in 'D:\wamp64\www\Wallet\src\components'
我的webpack.config.js:
const path = require('path');
module.exports = {
entry: {
index: '.src/index.js',
js: './src/js/index2.js',
react: './src/components/App.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['env', 'stage-0', 'react']
}
}
]
}
};
我的Home.js:
const Home = () => {
return <h1>Home</h1>
}
export default Home
这就是我在 App.js 中导入主页的方式:
import { BrowserRouter, Route, Switch , Link} from 'react-router-dom';
import Home from 'Home';
import About from 'About';
我在这里遇到了几个问题,建议在 src 文件夹中添加一个空的 index.js,但这也没有用。
您的导入不正确
import Home from 'Home';
import About from 'About';
您需要指定文件的路径和路径,例如:
import Home from './src/components/Home.js';
home.js 是您导出组件的文件
我刚开始学习 React,在尝试使用 webpack 构建时偶然发现了这个错误。
Module not found: Error: Can't resolve 'Home' in 'D:\wamp64\www\Wallet\src\components'
resolve 'Home' in 'D:\wamp64\www\Wallet\src\components'
我的webpack.config.js:
const path = require('path');
module.exports = {
entry: {
index: '.src/index.js',
js: './src/js/index2.js',
react: './src/components/App.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['env', 'stage-0', 'react']
}
}
]
}
};
我的Home.js:
const Home = () => {
return <h1>Home</h1>
}
export default Home
这就是我在 App.js 中导入主页的方式:
import { BrowserRouter, Route, Switch , Link} from 'react-router-dom';
import Home from 'Home';
import About from 'About';
我在这里遇到了几个问题,建议在 src 文件夹中添加一个空的 index.js,但这也没有用。
您的导入不正确
import Home from 'Home';
import About from 'About';
您需要指定文件的路径和路径,例如:
import Home from './src/components/Home.js';
home.js 是您导出组件的文件