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:
- Ejected the project
- Updated babel/core to 7.7
- Installed and configured .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:
17 | }
18 |
> 19 | export namespace org.owozniak.selfestemmon.models {
| ^^^
20 |
21 | export interface ProjectApi {
22 | readonly id: number;
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:
- Ejected the project
- Updated babel/core to 7.7 https://github./babel/babel/issues/8244#issuement-507037823
- 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.mon.models {
| ^^^
20 |
21 | export interface ProjectApi {
22 | readonly id: number;
-
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.mon.modelsdoesn'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. – Aluan Haddad Commented Nov 10, 2019 at 14:20 - Ok, how I can resolve it because it is autogenerated code? – Oskar Woźniak Commented 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 – Aluan Haddad Commented Nov 11, 2019 at 3:03
3 Answers
Reset to default 6In my case I didn't have to eject the settings. I used the packages react-app-rewired with the cutomize-cra.
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());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
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 piler,
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 withdeclareand will subsequently be safely removed.
namespaces not marked withdeclareare experimental and disabled by default. Not enabling will result in an error: "Namespace not marked type-onlydeclare. Non-declarative namespaces are only supported experimentally in Babel."Workaround: Enable the
allowNamespacesoption.
There's a nice tool to avoid the error thrown: https://github./harrysolovay/rescripts
How to:
- Install rescripts
npm i -D @rescripts/cli
- In package.json, replace "react-scripts" with "rescripts":
"scripts": { "start": "rescripts start", "build": "rescripts build", "test": "rescripts test", "eject": "rescripts eject" },
- Install the rescripts plugin for babel:
npm i @rescripts/rescript-use-babel-config
- Add this snipper to package.json:
"rescripts": [ [ "use-babel-config", { "presets": [ "react-app", [ "@babel/preset-typescript", { "allowNamespaces": true } ] ] } ] ]