Field 'browser' doesn't contain a valid alias configuration /my-react-app/src/components/FirstExample/FirstExample doesn't exist

user_18460843 0
Viewed 625

I'm trying to import my FirstExample component to app.js but I'm receiving an error message saying the module is not found.

my App.js

import FirstExample from "./components/FirstExample";

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

export default App;

the file I want to render is in the components folder:

import React from 'react'
import './FirstExample';

const FirstExample = () => {
  return (
    <div>FirstExample</div>
  )
}

export default FirstExample

File structure looks like:

src
  components (folder)
    FirstExample
      FirstExample.css
      index.js <-- this is the file I want to render
  App.js
  index.css
  index.js

I checked my import statement and it looks correct. Why is it saying the module is not found??

reactjs
1 Answers

This is correct behaviour.

You are trying to import FirstExample inside FirstExample component. That makes absolutely no sense and I think is a typo from your side.

What you are propably wanting to do is to import FirstExample.scss

import './FirstExample.scss';
user_73841320
Related