typescript - Hoe het probleem "error: bundling failed: SyntaxError: { path }\PinCode\index.ts: Exporting local "IPinCodeParams", which is not declared." in React-Native op te lossen?
Ik heb een nieuw project aangemaakt. Ik heb speciale mappen voor interfaces, types enzovoort. Ik zal er veel hebben, dus importeer ik ze in één bestand en exporteer ik ze van daaruit. Wanneer ik meerdere interfaces wil exporteren, krijg ik een fout:
error: bundling failed: SyntaxError: C:\Users\QWERTY\Desktop\TestProjects\2019\TestProject\node_modules\react-native\scripts\src\types\PinCode\index.ts: Exporting local "IPinCodeParams", which is not declared.
13 | }
14 |
> 15 | export { PinStatus, IPinCodeParams }
| ^
at File.buildCodeFrameError (C:\Users\QWERTY\Desktop\TestProjects\2019\TestProject\node_modules\@babel\core\lib\transformation\file\file.js:261:12)
at NodePath.buildCodeFrameError (C:\Users\QWERTY\Desktop\TestProjects\2019\TestProject\node_modules\@babel\traverse\lib\path\index.js:157:21)
at getLocalMetadata (C:\Users\QWERTY\Desktop\TestProjects\2019\TestProject\node_modules\@babel\helper-module-transforms\lib\normalize-and-load-metadata.js:281:22)
at child.get.forEach.spec (C:\Users\QWERTY\Desktop\TestProjects\2019\TestProject\node_modules\@babel\helper-module-transforms\lib\normalize-and-load-metadata.js:315:11)
at Array.forEach (<anonymous>)
at programPath.get.forEach.child (C:\Users\QWERTY\Desktop\TestProjects\2019\TestProject\node_modules\@babel\helper-module-transforms\lib\normalize-and-load-metadata.js:307:33)
at Array.forEach (<anonymous>)
at getLocalExportMetadata (C:\Users\QWERTY\Desktop\TestProjects\2019\TestProject\node_modules\@babel\helper-module-transforms\lib\normalize-and-load-metadata.js:294:27)
at getModuleMetadata (C:\Users\QWERTY\Desktop\TestProjects\2019\TestProject\node_modules\@babel\helper-module-transforms\lib\normalize-and-load-metadata.js:86:21)
Ik heb deze mappenstructuur:
android\
ios\
node_modules\
src\
--->constants\
|--->colors.ts
|--->fonts.ts
|--->index.ts
--->router\
|--->index.ts
--->screen\
|--->Splash\
|--->containers\
|--->index.ts
|--->SplashContainer.tsx
|--->views\
|--->index.ts
|--->SplashView.tsx
|--->index.tsx
|--->index.ts
--->types\
|--->PinCode\
|--->index.tsx
|--->index.tsx
--->App.tsx
.babelrc
*
*
*
package.json
rn-cli.config.js
tsconfig.json
tslint.json
In het bestand "PinCode" heb ik een enum en een interface.
Wanneer ik zo schrijf (oké):
export enum PinStatus {
New = 'new',
Confirm = 'confirm',
Unlock = 'unlock',
Edit = 'edit',
}
export interface IPinCodeParams {
status: PinStatus;
onComplete: () => void;
onClose?: () => void;
originalCode?: string;
}
Maar wanneer ik zo schrijf (krijg ik de foutmelding):
enum PinStatus {
New = 'new',
Confirm = 'confirm',
Unlock = 'unlock',
Edit = 'edit',
}
interface IPinCodeParams {
status: PinStatus;
onComplete: () => void;
onClose?: () => void;
originalCode?: string;
}
export { PinStatus, IPinCodeParams };
Ik heb een paar volledig nieuwe projecten gemaakt, geprobeerd dit project meerdere keren te herschrijven, maar er kwam niets uit. Uiteindelijk kreeg ik toch deze fout.
package.json
{
"name": "TestProject",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "node node_modules/react-native/local-cli/cli.js run-android",
"ios": "node node_modules/react-native/local-cli/cli.js run-ios",
"lint": "yarn tslint && yarn typecheck",
"tslint": "tslint --project tsconfig.json --config tslint.json src/**/*.ts{,x} --format stylish",
"typecheck": "tsc --project tsconfig.json --noEmit",
"postinstall": "typesync",
"type-sync": "typesync"
},
"husky": {
"hooks": {
"pre-commit": "yarn lint",
"pre-push": "yarn lint"
}
},
"dependencies": {
"mobx": "^4.9.2",
"mobx-persist": "^0.4.1",
"mobx-react": "^5.4.3",
"react": "16.8.0",
"react-native": "0.58.4",
"react-native-vector-icons": "^6.2.0",
"react-navigation": "^2.18.1"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/plugin-proposal-decorators": "^7.3.0",
"@types/babel-core": "6.25.5",
"@types/jest": "24.0.0",
"@types/prettier": "^1.16.0",
"@types/react": "16.8.2",
"@types/react-native": "0.57.34",
"@types/react-native-vector-icons": "^4.6.4",
"@types/react-navigation": "^3.0.1",
"@types/react-test-renderer": "16.8.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.1.0",
"babel-plugin-module-resolver": "^3.1.3",
"husky": "^1.3.1",
"jest": "24.1.0",
"jsc-android": "236355.1.1",
"metro-react-native-babel-preset": "0.51.1",
"mobx-logger": "^0.7.1",
"prettier": "^1.16.4",
"react-native-typescript-transformer": "^1.2.11",
"react-test-renderer": "16.6.3",
"tslint": "^5.12.1",
"tslint-config-prettier": "^1.18.0",
"tslint-eslint-rules": "^5.4.0",
"tslint-react": "^3.6.0",
"typescript": "^3.2.4",
"typesync": "^0.4.1"
},
"jest": {
"preset": "react-native"
}
}
.babelrc
{
"presets": [
"module:metro-react-native-babel-preset",
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/transform-react-jsx-source",
[
"module-resolver",
{
"root": [
"/src"
],
"alias": {
"@api": "./src/api",
"@actions": "./src/actions",
"@components": "./src/components",
"@constants": "./src/constants",
"@hocs": "./src/hocs",
"@managers": "./src/managers",
"@locales": "./src/locales",
"@reducers": "./src/reducers",
"@screens": "./src/screens",
"@static": "./src/static",
"@stores": "./src/stores",
"@styles": "./src/styles",
"@types": "./src/types",
"@utils": "./src/utils"
}
}
],
]
}
tsconfig.json
{
"compilerOptions": {
"target": "es2015",
"module": "commonjs",
"moduleResolution": "node",
"jsx": "react-native",
"baseUrl": "./src",
"outDir": "./dist",
"allowSyntheticDefaultImports": true,
"declaration": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noEmit": true,
"noImplicitAny": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"pretty": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"paths": {
"@api": [
"api"
],
"@actions": [
"actions"
],
"@components": [
"components"
],
"@constants": [
"constants"
],
"@hocs": [
"hocs"
],
"@managers": [
"managers"
],
"@locales": [
"locales"
],
"@reducers": [
"reducers"
],
"@screens": [
"screens"
],
"@static": [
"static"
],
"@stores": [
"stores"
],
"@styles": [
"styles"
],
"@types": [
"types"
],
"@utils": [
"utils"
]
}
},
}
tslist.json
{
"defaultSeverity": "error",
"extends": [
"tslint-config-prettier",
"tslint-eslint-rules",
"tslint-react",
"tslint:latest"
],
"jsRules": {},
"rules": {
"await-promise": false,
"interface-over-type-literal": false,
"jsx-alignment": true,
"jsx-boolean-value": false,
"jsx-no-bind": true,
"jsx-no-lambda": false,
"max-classes-per-file": false,
"member-access": false,
"member-ordering": false,
"no-constant-condition": false,
"no-duplicate-imports": false,
"no-empty": false,
"no-implicit-dependencies": false,
"no-submodule-imports": false,
"object-literal-sort-keys": false,
"ordered-imports": false,
"quotemark": [
true,
"single",
"jsx-single",
"avoid-escape"
],
"semicolon": [
true,
"always"
],
"trailing-comma": [
true,
{
"singleline": "never",
"multiline": "always"
}
],
"triple-equals": [
true,
"allow-undefined-check"
]
},
"linterOptions": {
"exclude": [
"./src/typings/**/*.d.ts"
]
},
"rulesDirectory": []
}
Verwijzing naar het bronproject (Github)
Waarom krijg ik deze fout? Hoe kan ik het oplossen?
Antwoord #1
Eigenlijk schrijf je je antwoord in je eigen vraag:
export enum PinStatus {
New = 'new',
Confirm = 'confirm',
Unlock = 'unlock',
Edit = 'edit',
}
export interface IPinCodeParams {
status: PinStatus;
onComplete: () => void;
onClose?: () => void;
originalCode?: string;
}