React failed to import component module not found

Question

I just started with React.js and I cannot import the component.

I have this structure followed by this tutorial (YouTube link) :

-- src ----| index.html ----| app ------| index.js ------| components --------| MyCompontent.js 

This is my index.js :

 import React from 'react'; import { render } from 'react-dom'; import { MyCompontent } from "./components/MyCompontent"; class App extends React.Component { render() { return ( <div> <h1>Foo</h1> <MyCompontent/> </div> ); } } render(<App />, window.document.getElementById('app')); 

This is MyComponent.js :

 import React from "react"; export class MyCompontent extends React.Component { render(){ return( <div>MyCompontent</div> ); } } 

I am using this web package file (GitHub link) .

However, when I run this, my module does not load.

I get this error in the browser console:

Error: Cannot find module "./components/MyCompontent"

 [WDS] Hot Module Replacement enabled. bundle.js:631:11 [WDS] Errors while compiling. bundle.js:631:11 ./src/app/index.js Module not found: Error: Cannot resolve 'file' or 'directory' ./components/MyCompontent in /home/kuno/code/react-hoteli/src/app resolve file /home/kuno/code/react-hoteli/src/app/components/MyCompontent doesn't exist /home/kuno/code/react-hoteli/src/app/components/MyCompontent.webpack.js doesn't exist /home/kuno/code/react-hoteli/src/app/components/MyCompontent.web.js doesn't exist /home/kuno/code/react-hoteli/src/app/components/MyCompontent.js doesn't exist /home/kuno/code/react-hoteli/src/app/components/MyCompontent.json doesn't exist resolve directory /home/kuno/code/react-hoteli/src/app/components/MyCompontent/package.json doesn't exist (directory description file) /home/kuno/code/react-hoteli/src/app/components/MyCompontent doesn't exist (directory default file) [/home/kuno/code/react-hoteli/src/app/components/MyCompontent] [/home/kuno/code/react-hoteli/src/app/components/MyCompontent.webpack.js] [/home/kuno/code/react-hoteli/src/app/components/MyCompontent.web.js] [/home/kuno/code/react-hoteli/src/app/components/MyCompontent.js] [/home/kuno/code/react-hoteli/src/app/components/MyCompontent.json] @ ./src/app/index.js 11:20-56 bundle.js:669:5 

I can’t understand what’s wrong here.

Answer 1

You have a typo in your import. You are requesting MyCompontent . Change to:

 import MyComponent from "./components/MyComponent"; 

And all the typos.

Answer 2

For those who come here without typos and use Webpack, be sure to check out the offer as follows:

 resolve: { extensions: [".jsx", ".js"] }, 

in webpack.config.js .

This says that your transpiler resolves statements such as:

 import Setup from './components/Setup' 

to

 import Setup from './components/Setup.jsx' 

This way you do not need an extension.

Answer 3

You can try importing MyCompontent from "./components/MyCompontent.js"

like this

 import MyCompontent from "./components/MyCompontent.js"; 

Answer 4

You wrote that the file name is MyComponent.js.

So your import should look like

 import { MyCompontent } from './components/MyComponent.js' 

Answer 5

The problem for me was that the import string was not generated correctly. I have this scenario:

 --src ----elements -----myCustomText.tsx 

This is myCustomText.tsx file:

 export interface Props { text: string; } const MyCustomText = ({ text }: Props) => ( <Text>{text}</Text> ); export default MyCustomText 

And the generated import was like this:

 import MyCustomText from '../../elements/MyCustomText'; 

and I changed this to this:

 import MyCustomText from '../../elements/myCustomText' 

I do not know why the generated import string was automatically generated incorrectly.