Module not found: Can't resolve '

Question

I want to display a few words from a react js project in Visual studio code and I have an error. In App.js component I imported a css document and this thing cause an display error on the page:

Module not found: Can't resolve './appStyles.css' in 'C:\Users\Alex\Desktop\React\hello-world\src'

This is the code from App.js component:

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;

Folder Structure:

Answer 1

That errors means your .css file is not in the path that you put it. You can put a screenshot of your folders and let us help you.

After your photo you need it to be imported like: import './components/appStyles.css' .

Also for your second imported style you need to do the same, otherwise will not work because both are in components folder.

As a piece of advice, you can create another folder to structure your project better, like: Styles and put all your .css files in there.

Answer 2

Solution

Change import statement to

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

Explaination:

---

• Your app.js is inside => src/app.js
• Your appStyles.css is inside => src/components/appStyles.css
• That's why import statement should be => import './components/appStyles.css'

---