Namespace not marked type-only declare - Babel/Typescript

Question

I have created app via npx create-react-app --typescript

And I wanted to use some autogenerated code with namespaces due to that babel throw error

What I tried:

1. Ejected the project
2. Updated babel/core to 7.7 https://github.com/babel/babel/issues/8244#issuecomment-507037823
3. Installed and configured https://babeljs.io/docs/en/next/babel-plugin-transform-typescript.html

    {
      "name": "frontend2",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@babel/core": "^7.7.2",
        "@babel/plugin-transform-typescript": "^7.7.2",
        "@svgr/webpack": "4.3.2",
        "@types/jest": "24.0.22",
        "@types/node": "12.12.7",
        "@types/react": "16.9.11",
        "@types/react-dom": "16.9.4",
        "@typescript-eslint/eslint-plugin": "^2.2.0",
        "@typescript-eslint/parser": "^2.2.0",
        "babel-eslint": "10.0.3",
        "babel-jest": "^24.9.0",
        "babel-loader": "8.0.6",
        "babel-plugin-named-asset-import": "^0.3.4",
        "babel-preset-react-app": "^9.0.2",
        "camelcase": "^5.2.0",
        "case-sensitive-paths-webpack-plugin": "2.2.0",
        "css-loader": "2.1.1",
        "dotenv": "6.2.0",
        "dotenv-expand": "5.1.0",
        "eslint": "^6.1.0",
        "eslint-config-react-app": "^5.0.2",
        "eslint-loader": "3.0.2",
        "eslint-plugin-flowtype": "3.13.0",
        "eslint-plugin-import": "2.18.2",
        "eslint-plugin-jsx-a11y": "6.2.3",
        "eslint-plugin-react": "7.14.3",
        "eslint-plugin-react-hooks": "^1.6.1",
        "file-loader": "3.0.1",
        "fs-extra": "7.0.1",
        "html-webpack-plugin": "4.0.0-beta.5",
        "identity-obj-proxy": "3.0.0",
        "is-wsl": "^1.1.0",
        "jest": "24.9.0",
        "jest-environment-jsdom-fourteen": "0.1.0",
        "jest-resolve": "24.9.0",
        "jest-watch-typeahead": "0.4.0",
        "mini-css-extract-plugin": "0.8.0",
        "optimize-css-assets-webpack-plugin": "5.0.3",
        "pnp-webpack-plugin": "1.5.0",
        "postcss-flexbugs-fixes": "4.1.0",
        "postcss-loader": "3.0.0",
        "postcss-normalize": "7.0.1",
        "postcss-preset-env": "6.7.0",
        "postcss-safe-parser": "4.0.1",
        "react": "^16.11.0",
        "react-app-polyfill": "^1.0.4",
        "react-dev-utils": "^9.1.0",
        "react-dom": "^16.11.0",
        "resolve": "1.12.0",
        "resolve-url-loader": "3.1.0",
        "sass-loader": "7.2.0",
        "semver": "6.3.0",
        "style-loader": "1.0.0",
        "terser-webpack-plugin": "1.4.1",
        "ts-pnp": "1.1.4",
        "typescript": "3.7.2",
        "url-loader": "2.1.0",
        "webpack": "4.41.0",
        "webpack-dev-server": "3.2.1",
        "webpack-manifest-plugin": "2.1.1",
        "workbox-webpack-plugin": "4.3.1"
      },
      "scripts": {
        "start": "node scripts/start.js",
        "build": "node scripts/build.js",
        "test": "node scripts/test.js"
      },
      "eslintConfig": {
        "extends": "react-app"
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      },
      "devDependencies": {},
      "jest": {
        "roots": [
          "<rootDir>/src"
        ],
        "collectCoverageFrom": [
          "src/**/*.{js,jsx,ts,tsx}",
          "!src/**/*.d.ts"
        ],
        "setupFiles": [
          "react-app-polyfill/jsdom"
        ],
        "setupFilesAfterEnv": [],
        "testMatch": [
          "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
          "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
        ],
        "testEnvironment": "jest-environment-jsdom-fourteen",
        "transform": {
          "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
          "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
          "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
        },
        "transformIgnorePatterns": [
          "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
          "^.+\\.module\\.(css|sass|scss)$"
        ],
        "modulePaths": [],
        "moduleNameMapper": {
          "^react-native$": "react-native-web",
          "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
        },
        "moduleFileExtensions": [
          "web.js",
          "js",
          "web.ts",
          "ts",
          "web.tsx",
          "tsx",
          "json",
          "web.jsx",
          "jsx",
          "node"
        ],
        "watchPlugins": [
          "jest-watch-typeahead/filename",
          "jest-watch-typeahead/testname"
        ]
      },
      "babel": {
        "presets": [
          "react-app"
        ],
        "plugins": [
          [
            "@babel/plugin-transform-typescript",
            {
              "allowNamespaces": true
            }
          ]
        ]
      }
    }

But still I'm getting below error

./src/api/api.ts
SyntaxError: /home/owozniak/IdeaProjects/self-estem/src/main/java/org/owozniak/selfestem/frontend2/src/api/api.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
  17 | }
  18 | 
> 19 | export namespace org.owozniak.selfestem.common.models {
     |                  ^^^
  20 | 
  21 |     export interface ProjectApi {
  22 |         readonly id: number;

Answer 1

There's a nice tool to avoid the error thrown: https://github.com/harrysolovay/rescripts

How to:

1. Install rescripts

npm i -D @rescripts/cli

2. In package.json, replace "react-scripts" with "rescripts":

"scripts": {
     "start": "rescripts start",
     "build": "rescripts build",
     "test": "rescripts test",
     "eject": "rescripts eject"   },

3. Install the rescripts plugin for babel:

npm i @rescripts/rescript-use-babel-config

4. Add this snipper to package.json:

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

Answer 2

In my case I didn't have to eject the settings. I used the packages react-app-rewired with the cutomize-cra.

1. I created the config-overrides.js to overrides the config about cra (create-react-app)

    /* config-overrides.js */
    const { override, useBabelRc } = require('customize-cra');
   
    module.exports = override(useBabelRc());
   

2. And i create the .babelrc because the jest config has a file babelTransform.js an in this file already has a property usebabelrc: true then you only needs add to run on project build and startup.

    /* .babelrc */
    {
        "plugins": [
            ["@babel/plugin-transform-typescript", { "allowNamespaces": true }]
        ]
    }
   

I don’t know if you use the react-app-rewired but if you no use, you need to follow some steps this steps to config

Answer 3

Babel will allow export declare namespace syntax.
Mark type-only namespaces with declare.

The regular allowNamespaces right into .babelrc would not work with create-react-app.
You have to eject configs or to use rescripts to override those without ejecting.

Note: export namespace is available with standard tsc compiler,
so if you ejected configs you could use it instead of babel.

---

@seeAlso: @babel/plugin-transform-typescript — Impartial Namespace Support

Type-only namespaces should be marked with declare and will subsequently be safely removed.

namespaces not marked with declare are experimental and disabled by default. Not enabling will result in an error: "Namespace not marked type-only declare. Non-declarative namespaces are only supported experimentally in Babel."

Workaround: Enable the allowNamespaces option.