模块解析失败:关键字 'interface' 已保留 (5:0) 文件已使用这些加载程序处理



这是我第一次向NPM发布包。我已经向NPM发布了简单的React+TypeScript组件,但当我安装并测试它时,我收到了下面的错误。我看到了其他问答;A但与我的案子无关。我看了Youtube视频,读了关于它的文章,但每个教程都不一样。有什么简单而通用的方法吗?

错误

Module parse failed: The keyword 'interface' is reserved (5:0)
File was processed with these loaders:
* ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| import './styles/_index.scss'
| 
> interface Props {
|     children?: JSX.Element|JSX.Element[]
|     className?: string

package.json

"name": "react-burger-navimenu",
"version": "0.1.0",
"private": false,
"main": "./src/components/Menu/Menu.tsx",
"peerDependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.4.1",
"@types/node": "^16.11.26",
"@types/react": "^17.0.44",
"@types/react-dom": "^17.0.15",
"bootstrap": "^4.6.0",
"react": "^18.0.0",
"react-bootstrap": "^1.6.4",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"sass": "^1.50.0",
"typescript": "^4.6.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "npm run clean && tsc && cp package.json README.md ./dist",
"test": "react-scripts test",
"eject": "react-scripts eject",
"clean": "rm -rf dist"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {
"react-burger-navimenu": "^0.1.0"
}
}

tsconfig.json

{
"compilerOptions": {
"target": "es5",
"outDir": "./dist",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"declaration": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "commonjs",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}

我在创建、构建&已上载组件。

转到您的源项目根目录,进行

bit import bit.envs/compilers/react-typescript

之后,对源组件进行完整的编译等,将其发布到bit.dev,然后进行

bit import

在要使用组件的目标工作区中。这应该会更新你在目标项目中的工作区编译器,然后只更新组件("bit checkout…"(。之后你就可以了。

最新更新