console throws that module from existing dir is: ` Module not found: Error: Can't resolve './components/InfoPanel.js/' in`

Question

My react project throws this client:159 ./src/index.js Module not found: Error: Can't resolve './components/InfoPanel.js/' in 'D:\ReactProject\src' in console, after adding of new module my dir loks like this:

    /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

code of 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;   

A code of 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"));

There is package.json file:

    {
      "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"
      }
    }

And there is webpack.config info:

    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"
        })
      ]
    };

what is wrong? Dir is ok.. dependencies looks ok..

Answer 1

The problem is InfoPanel.js is a file but when you import it you add / add the end of it. So InfoPanel.js will be treated as a folder and you are importing InfoPanel.js/index.js file.

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

This must be

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