Skip to content

Typescript namespace local component #8594

@ValeryLosik

Description

@ValeryLosik

Describe the bug

SWC incorrectly transpiles local usage of react component within namespace

Input code

import * as React from 'react';

export namespace FooNs {
  export const Shared = () => 'I\'m shared component';
  export const Main = () => <Shared/>;
}

Config

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "target": "es2015",
    "loose": false,
    "minify": {
      "compress": false,
      "mangle": false
    }
  },
  "module": {
    "type": "es6"
  },
  "minify": false,
  "isModule": true
}

Playground link (or link to the minimal reproduction)

https://play.swc.rs/?version=1.3.107&code=H4sIAAAAAAAAA8vMLcgvKlHQUkgsVghKTUwuUUgrys9VUC8CsdWtebl4uVIrwEryEnNTiwsSk1MV3PLz%2FYoVqnm5FBSgcsn5ecUlCsEZiUWpKQq2ChqaCrZ2CuqeMeq5CsUQweR8oEV5qXlgM9H0%2BSZm5sF12UBM0bcDqqsFAMZ0SDGeAAAA&config=H4sIAAAAAAAAA1WPTQ7CIBCF9z0FmbULNdGFd%2FAQBKcNhr8w00TS9O4FSlF3zPfe480sgxDwJgUPseRnHoKMhLHPmVByLD%2BZAKeApKIODKdDZSoSxxkrWXcBWMYJuYSQrufLrQXAeE%2BY8SgNYWNWOz2m30rlbYhI9G8sVukm0%2FN749BawfrXXMV2Sll33%2BAOX9NR1j8GTc8jWe9YN%2BKXZ60WAQAA

Expected behavior

SWC should output code like this.

import * as React from 'react';
export var FooNs;
(function(FooNs) {
    FooNs.Shared = ()=>'I\'m shared component';
    FooNs.Main = ()=>React.createElement(FooNs.Shared, null); // <===== Fix
})(FooNs || (FooNs = {}));

Actual behavior

Transpiled code produces an error "Shared is not defined"

import * as React from 'react';
export var FooNs;
(function(FooNs) {
    FooNs.Shared = ()=>'I\'m shared component';
    FooNs.Main = ()=>React.createElement(Shared, null);
})(FooNs || (FooNs = {}));

Version

1.3.107

Additional context

Interesting, that swc produces correct code, if we don't export 'Shared' component from namespace
Input

import * as React from 'react';

export namespace FooNs {
  const Shared = () => 'I\'m shared component';
  export const Main = () => <Shared/>;
}

Output

import * as React from 'react';
export var FooNs;
(function(FooNs) {
    const Shared = ()=>'I\'m shared component';
    FooNs.Main = ()=>React.createElement(Shared, null);
})(FooNs || (FooNs = {}));

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions