首页 > 解决方案 > 未找到模块:您尝试导入项目 src/ 目录之外的模块。不支持 src/ 之外的相对导入

问题描述

我刚开始 React JS,但是我有一个问题,尽管我的研究我无法得到结果,我尝试了很多方法,但我一直无法解决这个问题。你能帮忙吗?

这是我在终端遇到的错误

./src/App.css (./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css)Module not found: You attempted to import ../public/images/img-8.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

我的文件结构

- node_modules
 - public
     * images
          * img-2.jpg
     * videos

 - src
    * App.js
    * App.css
    * index.js
    * setupTest.js

我试图在我的 css 文件中导入的图片

background-image: url('/public/images/img-2.jpg');

应用程序.js

import React from "react";
import "./App.css";
import Navbar from "./components/Navbar";
import { BrowserRouter as Router,Switch, Route } from "react-router-dom";

function App() {

  return (
   <Router>
     <Navbar></Navbar>
     <Switch>
       <Route path="/" exact />
     </Switch>
   </Router>
  );
}

export default App;

包.json

 {
      "name": "react-website",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@testing-library/jest-dom": "^5.11.6",
        "@testing-library/react": "^11.2.2",
        "@testing-library/user-event": "^12.2.2",
        "css-loader": "^5.0.1",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.1",
        "style-loader": "^2.0.0"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "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"
        ]
      }
    }

标签: javascriptcssreactjs

解决方案


您应该使用/images/img-2.jpg/来引用该文件夹。原因是你create-react-app用来创建这个 React 应用程序。捆绑后,应用程序将位于该public文件夹中。阅读这个另一个问题,它提到了同样的问题。


推荐阅读