未找到模块：无法解析“

Posted 2023-02-16

【中文标题】未找到模块：无法解析“

【英文标题】：Module not found: Can't resolve '

【发布时间】：2021-07-17 11:53:42

【问题描述】：

我想在 Visual Studio 代码中显示来自 react js 项目的几句话，但出现错误。 在 App.js 组件中，我导入了一个 css 文档，这导致页面上显示错误：

找不到模块：无法解析“C:\Users\Alex\Desktop\React\hello-world\src”中的“./appStyles.css”

这是来自 App.js 组件的代码：

import React,  Component  from 'react'
import logo from './logo.svg'
import './App.css'
import Greet from './components/Greet'
import Welcome from './components/Welcome'
import Hello from './components/Hello'
import Message from './components/Message'
import Counter from './components/Counter'
import FunctionClick from './components/FunctionClick'
import ClassClick from './components/ClassClick'
import EventBind from './components/EventBind'
import ParentComponent from './components/ParentComponent'
import UserGreeting from './components/UserGreeting'
import NameList from './components/NameList'
import Stylesheet from './components/Stylesheet'
import Inline from './components/Inline'
import './appStyles.css'
import styles from './appStyles.module.css'

class App extends Component 
  render() 
    return (
     <div className="App">
     <h1 className='error'>Error</h1>
     <h1 className=styles.success>Success</h1>
     <Inline /> 
     /*<Stylesheet primary=true /> */
     /*<NameList /> */
     /*<UserGreeting /> */
     /* <EventBind /> */
     /*<ParentComponent /> */
      /*<FunctionClick /> */
      /*<ClassClick /> */
       /*<Counter /> */
        /*<Message /> */
       /*<Greet name="Bruce" heroName="Batman">
        <p>This is children props</p>
        </Greet>
        <Greet name="Clark" heroName="Superman">
         <button>Action</button>
        </Greet> */
        /*<Greet name="Diana" heroName="Wonder Woman" />
        <Welcome name="Bruce" heroName="Batman" /> */ 
        /*<Welcome name="Clark" heroName="Superman" />
        <Welcome name="Diana" heroName="Wonder Woman" /> */
        /*<Hello /> */
     </div>
    );
  


export default App;

文件夹结构：

【问题讨论】：

是错误信息不清楚还是您在寻求什么样的帮助？

您的项目目录中的src 文件夹中是否有一个名为appStyles.css 的文件？如果不删除导入import './appStyles.css'，应该可以解决问题。

您能否提供您的应用程序文件夹结构的屏幕截图，我们可以在其中看到 appStyles.css 和 app.js 两者？

【参考方案1】：

解决方案

将import 语句更改为

import './components/appStyles.css';
import styles from './components/appStyles.module.css';

说明：

---

你的app.js 在里面 => src/app.js 你的appStyles.css 在里面 => src/components/appStyles.css 这就是为什么 import 语句应该是 => import './components/appStyles.css'

---

【讨论】：

我理解了解释，我做了建议的更改，现在我收到如下错误：./src/App.js Module not found: Can't resolve '.components/appStyles.css'在 'C:\Users\Alex\Desktop\React\hello-world\src'

你是怎么改的？喜欢这个或.components/appStyles.css或./components/appStyles.css

我这样写：.components/appStyles.css 现在我更正了：./components/appStyles.css 但现在出现另一个错误：src\App.js Line 25:21 : 'styles' 未定义 no-undef

import styles from './components/appStyles.module.css'; 也包含这一行。

我添加了，现在可以正常使用了。非常感谢！

【参考方案2】：

该错误意味着您的 .css 文件不在您放置的路径中。 你可以把你的文件夹截图，让我们帮助你。

在您的照片之后，您需要将其导入，例如： import './components/appStyles.css'.

对于您的第二个导入样式，您也需要这样做，否则将无法正常工作，因为两者都在 components 文件夹中。

作为一条建议，您可以创建另一个文件夹来更好地构建您的项目，例如：Styles 并将您的所有 .css 文件放在那里。