[Bug]: export namespace compiled failed in create-react-app

[yangguansen]

💻

• Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

test-ts.ts

export namespace RuntimeStatus {

	export namespace Progress {
		export interface Quantity {
		  total?: number;
		  completed?: number;
		  unit?: string;
		}
		// export const a = '1';
	}

	export enum Severity {
		UNSPECIFIED = 0,
		NOTICE = 1,
		WARNING = 2,
		ERROR = 3,
		CRITICAL = 4,
	}
}

App.tsx

import './App.css';
import { RuntimeStatus } from './test-ts';

const a: RuntimeStatus.Progress.Quantity = {
  total: RuntimeStatus.Severity.ERROR
};
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

Configuration file name

.babelrc

Configuration

No response

Current and expected behavior

Reproduce steps:

create a new project from create-react-app@5
add test-ts.ts file like above and import this file at a *.tsx file
then it report an error, but i think it shouldn't has error.

Current behavior:

Expected behavior

it shouldn't has error report

Environment

• System:
  OS: macOS 12.0.1

• Binaries:
  Node: 16.14.2 - /usr/local/bin/node
  Yarn: 1.7.0 - /usr/local/bin/yarn
  npm: 8.5.0 - /usr/local/bin/npm

• npm Packages:
  @babel/plugin-proposal-private-property-in-object: ^7.21.11 => 7.21.11
  babel-loader: 9.1 => 9.1.3
  eslint: ^8.46.0 => 8.47.0

Possible solution

No response

Additional context

reproduce lib:
https://github.com/yangguansen/typescript-bug-report

[babel-bot]

Hey @yangguansen! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

[g-siedlecki]

Hello,
Looks like this issue isn't unique to CRA - I encountered it in React Native.
After upgrading my app from RN 0.68.4 to 0.72.4 I got compile errors in one file where we had our API typings.
It was structured as such:

export namespace API {
    export namespace Foo1 {
        export namespace Bar1 {
         export type Payload = {
            // ...
         }
         export type Response = {
            // ...
         }
        }
        export namespace Bar2 {
           // ...
        }
    }
    export namespace Foo2 {
         // ...
    }
}

We would type some variable like this:

const foo:API.Foo1.Bar1.Payload = 'bar'

I am not sure about 0.68.4, but in 0.72.4 babel would compile it to something like:

var API;
exports.API = API;
(function (_API) {
   export var Foo1; //this line would error out
   export var Foo2;
}
)

I figured out I can bypass this error (hopefully it won't be needed in the future!) by not-really-nesting namespaces:

export namespace API.Foo1 {
    export namespace Bar1 {
        export type Payload = {
        // ...
        }
        export type Response = {
        // ...
        }
    }
    export namespace Bar2 {
        // ...
    }
}
export namespace API.Foo2 {
        // ...
}

It does work, but in places where I had more nestings I would have to specify them all out, which is less than ideal:

export namespace API.Foo1.Bar1.Baz1 {
  export type Payload = {
    //...
   }
}

I hope this helps with the investigation!

[nicolo-ribaudo]

@liuxingbaoyu I noticed that you assigned this issue to yourself, but "Would you like to work on a fix?" has been selected :)

[yangguansen]

Sorry that i selected the checkbox "Would you like to work on a fix?"， I hope that who can fix this, many thanks!

[yangguansen]

I try to compile type code in the typescript playground, and it can compiled correctly , but no correctly with CRA@5, this is the result

I hope this can have a little bit help to how to help this

[nicolo-ribaudo]

@yangguansen If you are interested, you are welcome to submit a PR to fix this :) (If you cannot don't worry, somebody else will do it)

The bug is probably in

babel/packages/babel-plugin-transform-typescript/src/namespace.ts

Lines 226 to 233 in 0c8dfc1

	const transformed = handleNested(
	path,
	subNode.declaration,
	t.identifier(name),
	);
	if (transformed !== null) {
	isEmpty = false;
	const moduleName = subNode.declaration.id.name;

. When we have a nested export namespace, if its contents are not transformed (i.e. if it only contains type-level declarations, such as interfaces) we simply do nothing. Instead, if transformed is null, we should remove it by removing namespaceTopLevel[i] from namespaceTopLevel.

---

If it is the first time that you contribute to Babel, follow these steps: (you need to have make and yarn available on your machine)

1. Write a comment there to let other possible contributors know that you are working on this bug.
2. Fork the repo
3. Run git clone https://github.com/<YOUR_USERNAME>/babel.git && cd babel
4. Run yarn && make bootstrap
5. Wait ⏳
6. Run make watch (or make build whenever you change a file)
7. Add a test in packages/babel-plugin-transform-typescript/test/fixtures/namespace (only input.ts; output.js will be automatically generated)
8. Update the code!
9. yarn jest typescript to run the tests
   • If some test outputs don't match but the new results are correct, you can delete the bad output.js files and run the tests again
   • If you prefer, you can run OVERWRITE=true yarn jest typescript and they will be automatically updated.
10. If it is working, run make test to run all the tests
11. Run git push and open a PR!

[yangguansen]

Wow, appreciate for giving these amazing suggestions to me , I will take a look at this to research the related code , and this is my first time to touch Babel source code, I'm not sure I can solve the issue in future days but i will take some effort on this, welcome other guys to take this as well :)

[nicolo-ribaudo]

Feel free to ask for help here if needed!

[liuxingbaoyu]

Oops I didn't notice this before. :)
Luckily I just looked into it and haven't actually written the code to fix it yet.
Glad to see you're willing to do this, let me know if there's anything I can help with, I'd love to!

[yangguansen]

I simply add a sentence at babel/packages/babel-plugin-transform-typescript/src/namespace.ts
that @nicolo-ribaudo mentioned , it can compiled correctly,

but when i run make test to run all tests, it displayed this error, it seems that logic exist in executor.js

setTimeout(() => {
  console.error("EXECUTOR TIMEOUT");
  process.exit(1);
}, 5000);

Could someone let me know what's the reason about this test timeout error?

[nicolo-ribaudo]

Feel free to ignore that failure -- for some reason that test sometimes fails but only when running all the tests, and never on CI 😅

[yangguansen]

PR：#15882