reactjstypescriptimportcomponents

TypeScript - Cannot find module './Message' or its corresponding type declarations

I am trying to create a component (App) that imports another component (Message) described in another file (Message.tsx).

I'm following this React tutorial on Mac, using the latest version of VS Code, React, Node.JS.

App.tsx looks like this:

import { Message } from './Message';

function App() {

  return (
    <>
        Hello world <Message/>
    </>
  )
}

export default App

And Message.tsx looks like this:

function Message() {
    return <h1> This is a message <h1/>;
}

export default Message;

When I run the server I get:

Uncaught SyntaxError: The requested module '/src/Message.tsx?t=1720979324606' does not provide an export named 'Message' (at App.tsx:1:10)

There are no errors from in Message.tsx.

My search led me to this StackOverflow post about a similar error. I am confident App.tsx and Message.tsx are in the same directory, and I believe I am exporting Message correctly (That's the way the tutorial does it).

I restarted my computer, reinstalled Node, VS Code, node_modules, etc.

I was expecting Message to be properly imported by App.tsx and be usable in the App component.

Solution

  • your message.tsx file exporting component as default. You need to import it like this

    import Message  from './Message';