Skip to content

Bug: Components inside typescript namespaces cause ReferenceError #22413

@Enteleform

Description

@Enteleform

Forwarded from vitejs/vite#3900 by @not-rusty based on the recommendation of @sodatea, which stated that this should be considered as a bug in the react-refresh package.
 


Describe the bug

Apparently components inside namespaces is not supported. I don't exactly know if the error comes from esbuild or something, but it would nice.

The bug is that is not shown as a compilation error.

Reproduction

Simply start a react-ts project with $ npm init @vitejs/app my-vue-app --template react-ts and write the following code:

namespace Lol {
  export const Lol = () ={
    return (
      <div>
        <p>Some component</p>
      </div>
    );
  };
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Lol.Lol />
        <p>Hello Vite + React!</p>
      </header>
    </div>
  );
}

export default App;

System Info

  System:
    OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
    Memory: 440.54 MB / 7.47 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    npm: 6.14.13 - /usr/local/bin/npm
  Browsers:
    Chrome: 90.0.4430.93
    Firefox: 89.0.1

Used package manager: npm

Logs

I get the following runtime error:

App.tsx:13 Uncaught ReferenceError: _c is not defined
    at App.tsx:13
    at App.tsx:14

I suppose it should be a compilation error?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions