javascript - 未找到 React 模块 - 如何在反应中导入模块

Question

我最近开始学习 React，但现在我在导入其中一个组件时遇到问题App.js

我目前的结构是：

src
--components
----Nav
------Nav.jsx
--App.js

在我的里面我App.js有：

import Nav from './src/components/Nav/Nav';

但是，我收到以下错误：

./src/App.js
Module not found: Can't resolve './src/components/Nav/Nav' in 'PATH_TO_PROJECT/project/src'

我webpack.config.js的是：

const path = require("path");

module.exports = {
    entry: "./src/app.js",
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module:{
        rules:[{
            loader: 'babel-loader',
            test: /\.js$|jsx/,
            exclude: /node_modules/
        }],
        exports: {
            resolve: {
                extensions:['.js','.jsx']
            }
        }
    },
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'public')
    }
}

这也是我的package.json：

{
  "name": "dashboard",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.7.1",
    "bootstrap": "^4.6.0",
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-bootstrap": "^1.5.0",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.2",
    "web-vitals": "^1.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "webpack",
    "test": "webpack serve",
    "eject": "webpack --watch"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.17",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.1.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.0"
  }
}

我想知道我做错了什么？

标签： javascriptreactjs

Answer 1

由于错误的项目路径规范而发生错误。src 是 react 应用程序的源目录。导入时使用以下

import Nav from './components/Nav/Nav';