score:27

Accepted answer

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

import MyComponent from "./components/MyComponent";

And all typos as well.

score:0

You have written that the filename is MyComponent.js.

Thus, your import should look like

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

score:0

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.

score:0

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.

score:0

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"

score:3

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

like this

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

score:46

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.


Related Query

More Query from same tag