依赖项中的“SyntaxError：无法在模块外使用导入语句”

Question

我正在使用 NodeJS、Typescript、Typeorm 和 ts-node 构建服务器。

我正在导入的一个文件的第一行：

import { build } from 'compassql/build/src/schema';

而且，当我运行代码时，我得到了错误：

/Users/paulomenezes/repositories/juno/server/node_modules/compassql/build/src/schema.js:1
import dlBin_ from 'datalib/src/bins/bins';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (node:internal/modules/cjs/loader:1024:16)
    at Module._compile (node:internal/modules/cjs/loader:1072:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Object.require.extensions.<computed> [as .js] (/Users/paulomenezes/repositories/juno/server/node_modules/ts-node/src/index.ts:384:14)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/Users/paulomenezes/repositories/juno/server/src/service/dashboard.service.ts:1:1)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
[nodemon] app crashed - waiting for file changes before starting...

我要导入的库是CompassQL。

错误不在我的项目中，而是在库中，当我打开/node_module/compassql/build/src/schema.js时，javascript文件有一个导入语法：

import dlBin_ from 'datalib/src/bins/bins';

我认为这是错误，我的依赖项使用了我的项目不支持的语法，但我该如何解决这个问题？

这是我的tsconfig.json

  "compilerOptions": {
    "target": "ESNext",
    "module": "CommonJS",
    "moduleResolution": "node",
    "outDir": "./build",
    "rootDir": "./src",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "suppressImplicitAnyIndexErrors": true,
    "declaration": true,
    "noErrorTruncation": true,
    "sourceMap": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "importHelpers": true,
    "strict": false,
    "allowJs": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "./node_modules/compassql/typings/*.d.ts",
    "./node_modules/vega-lite/typings/*.d.ts",
    "./node_modules/@types/**/*.d.ts",
    "test/**/*.ts",
    "typings/*.d.ts",
    "typings/**/*.d.ts",
    "src/**/*.ts"
  ],
  "exclude": ["./node_modules/compassql/typings/json.d.ts", "./node_modules/vega-lite/typings/json.d.ts", "./node_modules/vega-lite/typings/vega.d.ts"]
}

这是我的package.json

{
  "name": "server",
  "version": "0.0.1",
  "description": "Awesome project developed with TypeORM.",
  "devDependencies": {
    "@commitlint/cli": "^11.0.0",
    "@commitlint/config-conventional": "^11.0.0",
    "@types/cors": "^2.8.7",
    "@types/d3": "^6.2.0",
    "@types/express": "^4.17.7",
    "@types/morgan": "^1.9.1",
    "@types/multer": "^1.4.4",
    "@types/node": "^8.0.29",
    "@types/papaparse": "^5.2.2",
    "husky": "^4.3.6",
    "nodemon": "^2.0.4",
    "ts-node": "3.3.0",
    "typescript": "^4.1.3",
    "yalc": "^1.0.0-pre.49"
  },
  "dependencies": {
    "@junoapp/common": "file:.yalc/@junoapp/common",
    "body-parser": "^1.19.0",
    "clickhouse": "^2.1.5",
    "compassql": "^0.21.2",
    "cors": "^2.8.5",
    "datalib": "^1.9.3",
    "date-fns": "^2.16.0",
    "express": "^4.17.1",
    "firstline": "^2.0.2",
    "got": "^11.7.0",
    "morgan": "^1.10.0",
    "multer": "^1.4.2",
    "papaparse": "^5.3.0",
    "pg": "^8.3.0",
    "reflect-metadata": "^0.1.10",
    "typeorm": "0.2.25",
    "vega-typings": "^0.19.2",
    "winston": "^3.3.3"
  },
  "scripts": {
    "start": "nodemon --max-old-space-size=8000 --watch 'src/**/*.ts' --ignore 'src/**/*.spec.ts' --exec 'ts-node' src/index.ts",
    "yalc:update": "yalc update"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
}

我的项目在没有此导入的情况下正常运行：

import { build } from 'compassql/build/src/schema';

Answer 1

由于某种原因，我解决了将 ts-node 切换为 Webpack 的问题，这个错误与 Webpack 配置无关。这是我的配置文件：

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const NodemonPlugin = require('nodemon-webpack-plugin');
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');

module.exports = {
  entry: './src/index.ts',
  target: 'node',
  externals: {
    express: 'require("express")',
    'app-root-path': 'require("app-root-path")',
    keyv: 'require("keyv")',
    'sync-rpc': 'require("sync-rpc")',
    typeorm: 'require("typeorm")',
  },
  devtool: 'inline-source-map',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.ts', '.js', 'json'],
  },
  module: {
    rules: [
      {
        loader: 'ts-loader',
        test: /\.ts?$/,
        include: path.resolve(__dirname, 'src'),
      },
    ],
  },
  mode: 'development',
  plugins: [
    new webpack.IgnorePlugin({ resourceRegExp: /^pg-native$/ }),
    new NodemonPlugin(),
    new FilterWarningsPlugin({
      exclude: [/mongodb/, /mssql/, /mysql/, /mysql2/, /oracledb/, /redis/, /sqlite3/, /sql.js/, /react-native-sqlite-storage/, /typeorm-aurora-data-api-driver/, /@sap\/hdbext/, /pg-query-stream/],
    }),
  ],
};

tsconfig.json

  "compilerOptions": {
    "outDir": "./build/",
    "noImplicitAny": false,
    "target": "es5",
    "sourceMap": false,
    "allowJs": true,
    "lib": ["es2015", "dom"],
    "strict": false,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true
  }
}

还有我的package.json

  "name": "server",
  "version": "0.0.1",
  "description": "Awesome project developed with TypeORM.",
  "devDependencies": {
    "@commitlint/cli": "^11.0.0",
    "@commitlint/config-conventional": "^11.0.0",
    "@types/cors": "^2.8.7",
    "@types/d3": "^6.2.0",
    "@types/express": "^4.17.7",
    "@types/morgan": "^1.9.1",
    "@types/multer": "^1.4.4",
    "@types/node": "^8.0.29",
    "@types/papaparse": "^5.2.2",
    "fork-ts-checker-webpack-plugin": "^6.0.8",
    "husky": "^4.3.6",
    "nodemon": "^2.0.4",
    "nodemon-webpack-plugin": "^4.3.2",
    "npm-run-all": "^4.1.5",
    "ts-loader": "^8.0.13",
    "typescript": "^4.1.3",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1",
    "webpack-filter-warnings-plugin": "^1.2.1",
    "yalc": "^1.0.0-pre.49"
  },
  "dependencies": {
    "@junoapp/common": "file:.yalc/@junoapp/common",
    "body-parser": "^1.19.0",
    "clickhouse": "^2.1.5",
    "compassql": "^0.21.2",
    "cors": "^2.8.5",
    "datalib": "^1.9.3",
    "date-fns": "^2.16.0",
    "express": "^4.17.1",
    "firstline": "^2.0.2",
    "got": "^11.7.0",
    "morgan": "^1.10.0",
    "multer": "^1.4.2",
    "papaparse": "^5.3.0",
    "pg": "^8.3.0",
    "reflect-metadata": "^0.1.10",
    "typeorm": "0.2.25",
    "vega-typings": "^0.19.2",
    "webpack-node-externals": "^2.5.2",
    "winston": "^3.3.3"
  },
  "scripts": {
    "start": "webpack --watch",
    "yalc:update": "yalc update"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
}

Answer 2

如果您想在项目代码中使用import，请记住在您的package.json 中注明type: "module"，以便Node 知道您正在编写现代ES 模块代码，而不是遗留的CommonJS 代码。看起来您目前缺少该字段 - 除了修复它之外，可能还值得给 https://nodejs.org/api/esm.html#esm_enabling 通读一遍，以便快速了解编写现代 esm 代码的细节节点 14/15。

另外，请注意，模块包可能需要 cjs 模块，但反之亦然，因此如果您有一个依赖于 require 而不是 import 的遗留项目，如果它们是专门为esm 使用而发布的（尽管npm 允许包指定两种不同的导出，一种用于require，另一种用于import，因此这很少是实际问题，但很好注意）。