8

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;
3
  • Well, the error is fairly clear, Babel doesn't support namespaces that contain values, only types. While TypeScript itself supports this just fine, your use of namespaces looks confused to say the least. A namespace as qualified as org.owozniak.selfestem.common.models doesn't make sense unless you are writing global scripts instead of using modules, and you are using modules. Therefore, if you write code that is more idiomatic when using modules, the issue won't apply to you. Nov 10, 2019 at 14:20
  • Ok, how I can resolve it because it is autogenerated code? Nov 10, 2019 at 22:07
  • No idea, there's insufficient information provided here for anyone to even consider how to resolve it unless they're intimately familiar with the tool chain that's generating it Nov 11, 2019 at 3:03

3 Answers 3

6

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

1
  • 1
    You're a life saver! No where on the internet could I find a proper solution, not even in the documentation. Oct 23, 2020 at 6:20
4

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.

3

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

  1. In package.json, replace "react-scripts" with "rescripts":
"scripts": {
     "start": "rescripts start",
     "build": "rescripts build",
     "test": "rescripts test",
     "eject": "rescripts eject"   },
  1. Install the rescripts plugin for babel:

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

  1. Add this snipper to package.json:
"rescripts": [
    [
        "use-babel-config",
            {
                "presets": [
                    "react-app",
                    [
                        "@babel/preset-typescript",
                        {
                            "allowNamespaces": true
                        }
                    ]
                ]
            }
        ]
    ]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.