javascript - 控制台从现有目录中抛出该模块是 : ` Module not found: Error: Can' t resolve './components/InfoPanel.js/' in`

Question

我的 React 项目抛出这个 client:159 ./src/index.js 找不到模块:错误:添加新模块后，无法在控制台中解析 'D:\ReactProject\src' 中的 './components/InfoPanel.js/' 我的目录是这样的:

    /ReactProject
    -dist
    --src
    -node_modules
    -src
       -components
          App.js
          InfoPanel.js
       -styles
       -images
       index.html
       index.js
    package-lock.json 
    package.json 
    webpack.config.js
    .babelrc

InfoPanel.js 代码:

    import React from 'react';
    import 'react-day-picker/lib/style.css';
    import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBCardHeader, MDBBtn, MDBContainer } from "mdbreact";
    import MomentLocaleUtils, { mdbreact, formatDate, parseDate,} from 'react-day-picker/moment';
    import 'moment/locale/it';
    import '../styles/App.css';

    const PanelPage = props => {
        return (
        <MDBContainer>
          <MDBCard style={{ width: "22rem", marginTop: "1rem" }}>
            <MDBCardHeader color="deep-orange lighten-1">Featured</MDBCardHeader>
            <MDBCardBody>
              <MDBCardTitle>Special title treatment</MDBCardTitle>
              <MDBCardText>
                With supporting text below as a natural lead-in to additional
                content.
              </MDBCardText>
              <MDBBtn color="deep-orange">go somewhere</MDBBtn>
            </MDBCardBody>
          </MDBCard>
        </MDBContainer>
        );
        };

    export default PanelPage;   

Index.js的一段代码:

import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import Example from "./components/App.js";
import PanelPage from "./components/InfoPanel.js/";

ReactDOM.render(<Example />, document.getElementById("crime_date_full"));
ReactDOM.render(<PanelPage />, document.getElementById("feature-info"));

有package.json文件:

    {
      "name": "react-boilerplate",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "start": "webpack-dev-server --mode development --open --hot",
        "build": "webpack --mode production"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "@babel/core": "^7.1.2",
        "@babel/preset-env": "^7.1.0",
        "@babel/preset-react": "^7.0.0",
        "babel-loader": "^8.0.4",
        "css-loader": "^1.0.0",
        "html-webpack-plugin": "^3.2.0",
        "style-loader": "^0.23.0",
        "webpack": "^4.20.2",
        "webpack-cli": "^3.1.1",
        "webpack-dev-server": "^3.7.2"
      },
      "dependencies": {
        "bootstrap": "^4.3.1",
        "mdbreact": "^4.18.1",
        "moment": "^2.24.0",
        "react": "^16.8.6",
        "react-datepicker": "^2.8.0",
        "react-dates": "^20.2.5",
        "react-day-picker": "^7.3.0",
        "react-dom": "^16.8.6",
        "react-router": "^5.0.1",
        "react-router-dom": "^5.0.1",
        "reactstrap": "^8.0.1"
      }
    }

还有 webpack.config 信息:

    const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");

    module.exports = {
      entry: "./src/index.js",
      output: {
        path: path.join(__dirname, "/dist"),
        filename: "index-bundle.js"
      },
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: ["babel-loader"]
          },
          {
            test: /\.css$/,
            use: ["style-loader", "css-loader"]
          }
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: "./src/index.html"
        })
      ]
    };

怎么了？目录没问题.. 依赖项看起来没问题..

Answer 1

问题是 InfoPanel.js 是一个文件，但是当您导入它时，您会添加 / 添加它的末尾。所以 InfoPanel.js 将被视为一个文件夹，您正在导入 InfoPanel.js/index.js 文件。

import PanelPage from "./components/InfoPanel.js/";

这一定是

import PanelPage from "./components/InfoPanel.js";