React JS：无法编译模块未找到：无法解析“views/Components/Components.js”答案

【问题标题】：React JS: Failed to compile Module not found: Can't resolve 'views/Components/Components.js'React JS：无法编译模块未找到：无法解析“views/Components/Components.js”
【发布时间】：2021-02-01 06:49:11
【问题描述】：

我一直在谷歌上搜索这个错误，发现了很多建议和解决方案，但没有一个适合我的情况。我做过的事情是：

npm 安装
根据Can't resolve module (not found) in React.js 的建议更正了路径“views/Components/Components.js”
根据Module not found: Error: Can't resolve './components/PropTest1' - React JS 的建议添加/删除文件扩展名

我知道我是新手，我需要这里的大师们的指导。

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App.js";
// pages for this product
import Components from "views/Components/Components.js";
import { Router, Route, Switch } from "react-router-dom";

import reportWebVitals from "./reportWebVitals";

var hist = createBrowserHistory();

ReactDOM.render(
  <Router history={hist}>
    <Switch>
      <Route path="/landing-page" component={LandingPage} />
      <Route path="/profile-page" component={ProfilePage} />
      <Route path="/login-page" component={LoginPage} />
      <Route path="/" component={Components} />
    </Switch>
  </Router>,
  document.getElementById("root")
);

reportWebVitals();

App.js

import React from "react";
import "./App.css";
import Products from "./components/products"
import "bootstrap/dist/css/bootstrap.min.css";


function App() {
  return (
    <div className="App">
      <Products />
    </div>
  );
}

export default App;

我的文件夹树是：

my-react-project
-node_modules
-public
-src
--assets
--components
----Header
-------Header.js
-------HeaderLinks.js
----products.js
--views
-------Components
----------Components.js
--App.css
--App.js
--App.test.js
--index.css
--index.js
--logo.svg
--reportWebVitals.js
--setupTest.js
-package.json
-package-lock.json
-yarn.lock

我收到的错误：

./src/index.js
Module not found: Can't resolve 'views/Components/Components.js' in 'D:\coding\workspace\my-react-project\src'

【问题讨论】：

你的路径应该以./开始

标签： javascript reactjs react-router

【解决方案1】：

你需要一个 ./ import Components from “views....

必须是import Components from “./views..

【讨论】：

【解决方案2】：

在你的 index.js 文件中替换

import Components from "views/Components/Components.js";

与

import Components from "./views/Components/Components.js";

【讨论】：

【解决方案3】：

你只需要在Absolute vs. Relative import paths 做很多事情：

在您当前的情景中我一直在谷歌上搜索这个错误，发现了很多建议和解决方案，但没有一个适合我的情况。我做过的事情是：

npm 安装根据 React.js 中无法解析模块（未找到）的建议更正了路径“views/Components/Components.js” 根据未找到模块的建议添加/删除文件扩展名：错误：无法解析 './components/PropTest1' - React JS 我知道我是新手，我需要这里的高手指导。

index.js

import React from "react";
    import ReactDOM from "react-dom";
    import "./index.css";
    import App from "./App.js";
    // pages for this product
    import Components from "./views/Components/Components.js"; **<--- add here ./**
    import { Router, Route, Switch } from "react-router-dom";
    
    import reportWebVitals from "./reportWebVitals";
    
    var hist = createBrowserHistory();
    
    ReactDOM.render(
      <Router history={hist}>
        <Switch>
          <Route path="/landing-page" component={LandingPage} />
          <Route path="/profile-page" component={ProfilePage} />
          <Route path="/login-page" component={LoginPage} />
          <Route path="/" component={Components} />
        </Switch>
      </Router>,
      document.getElementById("root")
    );
    
    reportWebVitals();

【讨论】：