React unable to import component -- module not found

Question

I just started with React.js and I am unable to import component.

I have this structure as 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 webpack file (GitHub link).

However, when I run this, my module fails to 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

Can't figure out what went wrong here.

Parth Mehrotra · Accepted Answer · 2017-06-14 19:52:22Z

53

For anyone coming here without a typo, and is using Webpack, be sure to check for a clause like this:

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

in your webpack.config.js.

This tells your transpiler to resolve statements like:

import Setup from './components/Setup'

to

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

This way you don't need the extension.

answered Jun 14, 2017 at 19:52

Parth Mehrotra

3,1404 gold badges25 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mcsekar Over a year ago

this helped . I missed a dot in the extension type like extensions: ["jsx", ".js"] instead of extensions: [".jsx", ".js"]

Akaisteph7 Over a year ago

After doing this I had to fully rerun webpack for the changes to apply, --watch did not catch them.

Omri Aharon · Accepted Answer · 2016-12-25 17:14:27Z

29

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

import MyComponent from "./components/MyComponent";

And all typos as well.

edited Dec 25, 2016 at 17:14

answered Dec 25, 2016 at 16:50

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

4 Comments

Omri Aharon Over a year ago

You have a typo, might be relevant: MyCompontent instead of MyComponent

Kunok Over a year ago

Yes that was a typo. I am sorry.

Deke Over a year ago

Also make sure to npm start after the typo correction if the problem exists.

Jordan H Over a year ago

This may or may not be relevant for this situation but also be mindful of case in your directory paths. I had a situation where my local directories were lower case, but in prod they were upper. I had to completely wipe away my local structure and clone from prod to fix it, otherwise I was going to spend a lot of time refactoring directory names.

MZaragoza · Accepted Answer · 2016-12-25 17:16:20Z

4

You can try to import MyCompontent from "./components/MyCompontent.js"

like this

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

edited Dec 25, 2016 at 17:16

MZaragoza

10.1k9 gold badges76 silver badges117 bronze badges

answered Dec 25, 2016 at 16:53

RainDev

1,1288 silver badges9 bronze badges

Comments

William Ji Carpenter · Accepted Answer · 2022-04-25 11:16:33Z

2

I just had this issue, no type or webpack config issues.

What fixed it was changing the import from relative to the app root directory to relative to the file:

import MyComponent from "src/components/MyComponent";

to

import MyComponent from "../components/MyComponent";

If you're getting this from Visual Studio Code auto-importing via the shortest route, you can change it so it imports relatively. By going here:

menu File → Preferences → Settings → User Settings,

"typescript.preferences.importModuleSpecifier": "relative"

edited Apr 25, 2022 at 11:16

answered Apr 8, 2022 at 13:51

William Ji Carpenter

3481 gold badge4 silver badges12 bronze badges

Comments

Anish Hirlekar · Accepted Answer · 2016-12-25 17:15:36Z

1

You have written that the filename is MyComponent.js.

Thus, your import should look like

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

answered Dec 25, 2016 at 17:15

Anish Hirlekar

2331 gold badge3 silver badges11 bronze badges

Comments

Adrian Buciuman · Accepted Answer · 2019-07-24 04:22:58Z

1

The problem for me was that import line 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 this:

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

and I changed it to this:

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

I don't know why the generated import line was generated automatically wrong.

answered Jul 24, 2019 at 4:22

Adrian Buciuman

3355 silver badges13 bronze badges

Comments

wangdoodle · Accepted Answer · 2022-03-02 14:52:31Z

1

I found myself here without a typo and without a webpack issue.

The solution for me was to restart the typescript server via VS Code.

answered Mar 2, 2022 at 14:52

wangdoodle

312 silver badges8 bronze badges

Comments

Andy Mthembu · Accepted Answer · 2022-08-19 09:17:25Z

1

export 'Component' (imported as 'Component') was not found in 'react'

if you find your self stuck with this error simply go to mini-create-react-context, and go to cjs, and go to index.js and add "React" example: you will find this (Component) solution (React.Component) only if you extends to React.Component in you pages

Note: I have only used this on VS Code

edited Aug 19, 2022 at 9:17

answered Aug 19, 2022 at 9:12

Andy Mthembu

112 bronze badges

Collectives™ on Stack Overflow

React unable to import component -- module not found

8 Answers 8

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related