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.


You have written that the filename is MyComponent.js.

Thus, your import should look like

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


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


this is myCustomText.tsx file:

export interface Props {
  text: string;

const MyCustomText = ({ text }: Props) => (

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.


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.


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";


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"


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

like this

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


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'


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

This way you don't need the extension.

Related Query

More Query from same tag