What is the process for enabling Namespaces in CRA?

Question

What is the process for enabling Namespaces in CRA?

When creating a TypeScript React app, I used the following command:

yarn create react-app my-app --template typescript

This setup compiles my project using Babel and bundles it with webpack. Now, I want to utilize TypeScript namespaces, which are not natively supported in Babel. However, they can be enabled by installing certain packages:

I made adjustments in the package.json file, changing react-scripts start to react-app-rewired start.

Additionally, I created a custom configuration file named config-overrides.js:

const {
    override,
    addExternalBabelPlugin
  } = require("customize-cra");

module.exports = override(
    addExternalBabelPlugin([
        "@babel/plugin-transform-typescript",
        { allowNamespaces: true }
    ])
);

Despite these steps, compiling the project still results in a syntax error, indicating that the plugin for non-declarative namespaces was not properly enabled:

SyntaxError: /home/m93a/my-app/script.ts: Namespace not marked type-only declare. Non-declarative namespaces are only supported experimentally in Babel. To enable and review caveats see: https://babeljs.io/docs/en/babel-plugin-transform-typescript

What is the correct setup process to ensure that even non-declarative namespaces compile successfully in the project?

EDIT: The root cause of the issue with my project turned out to be different than expected. Refer to my own answer below for more insights.

typescript webpack babeljs react-scripts

Answer 1

Answer №1

To achieve the desired result, it is recommended to utilize the addBabelPlugin method instead of addExternalBabelPlugin.

A Simplified Explanation

Upon reviewing the documentation, we find:

addExternalBabelPlugin(plugin)

The webpack configuration in create-react-app consists of two rules for the babel-loader: one for code within the src/ directory by default, and another for external code (e.g., from node_modules). Plugins can be added to the external loader using addExternalBabelPlugin, mirroring the usage of addBabelPlugin.

Further inspection of the

react-scripts/config/webpack.config.js

reveals these two entries for babel-loader:

Located at webpack.config.js#L396 is the babel-loader for include: paths.appSrc and for \.(js|mjs|jsx|ts|tsx)$/ which addBabelPlugin incorporates plugins for, accompanied by this comment:
```
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
```

Found at webpack.config.js#L452 is the babel-loader for /\.(js|mjs)$/ which addExternalBabelPlugin adds plugins for, remarked by:

// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.

In order for

@babel/plugin-transform-typescript

to affect the initial babel-loader pertaining to the application's src folder, addBabelPlugin must be utilized for that specific babel-loader setup.

Lastly, ensure your package.json scripts are updated to run via react-app-rewired:

"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"

You can explore a straightforward CRA Typescript project showcasing the use of a class within a namespace here: https://github.com/clytras/cra-ts-namespaces

Answer 2

To achieve the desired result, it is recommended to utilize the addBabelPlugin method instead of addExternalBabelPlugin.

A Simplified Explanation

Upon reviewing the documentation, we find:

addExternalBabelPlugin(plugin)

The webpack configuration in create-react-app consists of two rules for the babel-loader: one for code within the src/ directory by default, and another for external code (e.g., from node_modules). Plugins can be added to the external loader using addExternalBabelPlugin, mirroring the usage of addBabelPlugin.

Further inspection of the

react-scripts/config/webpack.config.js

reveals these two entries for babel-loader:

Located at webpack.config.js#L396 is the babel-loader for include: paths.appSrc and for \.(js|mjs|jsx|ts|tsx)$/ which addBabelPlugin incorporates plugins for, accompanied by this comment:
```
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
```

Found at webpack.config.js#L452 is the babel-loader for /\.(js|mjs)$/ which addExternalBabelPlugin adds plugins for, remarked by:

// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.

In order for

@babel/plugin-transform-typescript

to affect the initial babel-loader pertaining to the application's src folder, addBabelPlugin must be utilized for that specific babel-loader setup.

Lastly, ensure your package.json scripts are updated to run via react-app-rewired:

"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"

You can explore a straightforward CRA Typescript project showcasing the use of a class within a namespace here: https://github.com/clytras/cra-ts-namespaces

Answer 3

Answer №2

Utilize rescripts for customizing Babel configuration To achieve this, you can implement the following steps:

Begin by creating a new application using
```
create-react-app my-app --template=typescript
```
, or work with an existing one
Proceed to install rescripts by running npm i -D @rescripts/cli
In your package.json file, substitute react-scripts with rescripts as outlined in the rescripts documentation
Install the rescript plugin for configuring babel:
```
@rescripts/rescript-use-babel-config
```
Include the provided snippet in your package.json file

"rescripts": [
    [
        "use-babel-config",
            {
                "presets": [
                    "react-app",
                    [
                        "@babel/preset-typescript",
                        {
                            "allowNamespaces": true
                        }
                    ]
                ]
            }
        ]
    ]

The rescripts tool leverages a plugin to expand the babel configuration. By extending the default react-app babel setup, we ensure compatibility while modifying the installed preset to include the allowNamespaces parameter.

Answer 4

Utilize rescripts for customizing Babel configuration To achieve this, you can implement the following steps:

Begin by creating a new application using
```
create-react-app my-app --template=typescript
```
, or work with an existing one
Proceed to install rescripts by running npm i -D @rescripts/cli
In your package.json file, substitute react-scripts with rescripts as outlined in the rescripts documentation
Install the rescript plugin for configuring babel:
```
@rescripts/rescript-use-babel-config
```
Include the provided snippet in your package.json file

"rescripts": [
    [
        "use-babel-config",
            {
                "presets": [
                    "react-app",
                    [
                        "@babel/preset-typescript",
                        {
                            "allowNamespaces": true
                        }
                    ]
                ]
            }
        ]
    ]

The rescripts tool leverages a plugin to expand the babel configuration. By extending the default react-app babel setup, we ensure compatibility while modifying the installed preset to include the allowNamespaces parameter.

Answer 5

Answer №3

During my troubleshooting process, I encountered a unique issue that persisted even after implementing suggestions from others. The root cause of the problem was identified as a bug in Babel that hinders the merging of enum and namespace. Here is an example snippet that would not function correctly:

export enum Bar
{
    x, y, z
}

export namespace Bar
{
  export function baz()
  {
    return "baz"
  }
}

Interestingly, Babel displays a misleading error message when confronted with this code:

SyntaxError: script.ts: Namespace not marked type-only declare. Non-declarative namespaces are only supported experimentally in Babel. To enable and review caveats see: https://babeljs.io/docs/en/babel-plugin-transform-typescript

I have logged an official complaint regarding this issue, in hopes of prompt resolution or improved error messaging. Meanwhile, a temporary solution can be implemented:

export enum Bar_
{
    x, y, z
}

export type Bar = Bar_

export namespace Bar
{
  export const x = Bar_.x
  export const y = Bar_.y
  export const z = Bar_.z
  export function baz()
  {
    return "baz"
  }
}

Answer 6

During my troubleshooting process, I encountered a unique issue that persisted even after implementing suggestions from others. The root cause of the problem was identified as a bug in Babel that hinders the merging of enum and namespace. Here is an example snippet that would not function correctly:

export enum Bar
{
    x, y, z
}

export namespace Bar
{
  export function baz()
  {
    return "baz"
  }
}

Interestingly, Babel displays a misleading error message when confronted with this code:

SyntaxError: script.ts: Namespace not marked type-only declare. Non-declarative namespaces are only supported experimentally in Babel. To enable and review caveats see: https://babeljs.io/docs/en/babel-plugin-transform-typescript

I have logged an official complaint regarding this issue, in hopes of prompt resolution or improved error messaging. Meanwhile, a temporary solution can be implemented:

export enum Bar_
{
    x, y, z
}

export type Bar = Bar_

export namespace Bar
{
  export const x = Bar_.x
  export const y = Bar_.y
  export const z = Bar_.z
  export function baz()
  {
    return "baz"
  }
}

What is the process for enabling Namespaces in CRA?

Answer №1

A Simplified Explanation

`addExternalBabelPlugin(plugin)`

Answer №2

Answer №3

Similar questions

Unable to locate 'reflect-metadata' module within Docker container on Production Server

Leveraging vuex in conjunction with typescript allows for efficient management of state in namespace modules,

Implementing Routes in Express Using Typescript Classes

Error TS7053 occurs when an element is given an 'any' type because a 'string' expression is being used to index an 'Object' type

Issue: Unable to import certain modules when using the Typescript starter in ScreepsTroubleshooting: encountering

The selectors in NgRx store are failing to retrieve data from the main global store

React Router Issue: Component Not Rendering When <nav> Element Is Incomplete

Discover the unseen: The ultimate guide to detecting visible objects in a (deferLoad) event

ReactJS: error occurs when trying to fetch data and encountering issues with reading properties

Stop receiving updates from an Observable generated by the of method

"Using RxJS to create an observable that filters and splits a string using

NextJS applications can encounter issues with Jest's inability to parse SVG images

Issues with TypeScript "Compile on save" functionality in Visual Studio 2015

A TypeScript default function that is nested within an interface

Is there a way to verify if a user taps outside a component in react-native?

Troubleshooting a TypeScript error when trying to access an imported service in Angular 2

React array fails to update upon modification

Tips for showing data from an hour ago in Angular

Simultaneously accessing multiple APIs

What is the reason behind installing both Typescript and Javascript in Next.js?