CODEWITHSUNDEEP
reactjsbabel-loader
Derek Ross
Derek Ross

Reputation: 31

Babel error: Module not found: Can't resolve '<local_structure>/node_modules/react-scripts/node_modules/babel-loader/lib/index.js' after new component

Tree Output from the src directory:

src/
├── App.css
├── App.js
├── App.test.js
├── components
│   └── layout
│       ├── About.js
│       ├── Header.js
│       ├── Hero.js
│       ├── References.js
│       └── Resume.js
├── img
│   ├── apple-touch-icon.png
│   ├── HMR.jpeg
│   ├── speaking.jpeg
│   ├── favicon.png
│   ├── nepal-bg.jpeg
│   └── testimonials-bg.jpeg
├── index.css
├── index.js
├── reportWebVitals.js
└── setupTests.js

References.js

const References = () => {
    return (
        <div>
            <p>These are my refs</p>    
        </div>
    )
}

export default References

App.js

import './App.css';
import Header from './components/layout/Header'
import Hero from './components/layout/Hero'
import About from './components/layout/About'
import Resume from './components/layout/Resume'
import References from './components/layout/References'

const App = () => {
  return (
    <div className='Container'>
      <Header />
      <Hero />
      <About />
      <Resume />
      <References />
    </div>
  );
}

export default App;

The site works fine until I add the References.js file into my App.js file. I have removed node_modules and reinstalled. I have installed the suggested npm packages. I can't figure out what is introducing the breaking change every time I try to add the component.

Upvotes: 0

Views: 1806

Answers (1)

Derek Ross
Derek Ross

Reputation: 31

Deleting the node_modules, stopping the server, running npm i and restarting the server with npm start fixed the issue.

Upvotes: 2

Related Questions