时间戳

首页 > 解决方案 > React JS：无法编译模块未找到：无法解析“views/Components/Components.js”

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

问题描述

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

  1. npm 安装
  2. 根据 React.js 中无法解析模块（未找到）的建议更正了路径“views/Components/Components.js”
  3. 根据未找到模块的建议添加/删除文件扩展名：错误：无法解析 './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();

应用程序.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'

标签： javascriptreactjsreact-router

解决方案

您只需要在绝对与相对导入路径上花很多时间：

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

npm install 根据有关在 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();

推荐阅读