如何修复"SyntaxError:无法在模块外使用导入语句“

Question

我试图把我的第一个反应类型记录，JSX组件npm包。

我将CRA TypeScript项目中的工作代码复制到一个空文件夹中，并添加了以下package.json和tsconfig.json。

package.json

{
  "name": "react-hashlink",
  "version": "0.0.1",
  "description": "React hash link",
  "main": "lib/HashLink.js",
  "keywords": [
    "react",
    "hash",
    "link"
  ],
  "peerDependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-router-dom": "^5.0.0"
  },
  "dependencies": {},
  "devDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-router-dom": "^5.1.7",
    "@types/styled-components": "^5.1.7",
    "npm-check-updates": "^10.2.5",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "typescript": "^4.1.3"
  },
  "scripts": {
    "code": "tsc -w",
    "build": "rm -fr lib/*; tsc",
    "ncu": "ncu -u"
  },
  "prettier": {
    "endOfLine": "lf",
    "printWidth": 80,
    "semi": false,
    "tabWidth": 2,
    "trailingComma": "es5"
  }
}

tsconfig.json

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

当我在项目中使用react-hashlink和npm link react-hashlink导入npm link时，会引发以下错误。

SyntaxError:无法在模块外使用导入语句

我可能漏掉了什么。想法？

Answer 1

使用"module": "commonjs"和"target": "esnext"完成了工作！