TS1343：仅当“--module”选项为“es2020”、“es2022”、“esnext”、“system”、“node16”或“nodenext”时，才允许“import.meta”元属性

Question

当我尝试将项目构建为 esm 和 cjs 时，我不断收到此错误。

这就是我的 package.json 的样子：

 {
      "name": "qa-data-tool",
      "version": "1.0.0",
      "description": "AWS uploads to S3 to support testing of invoicing PYCMA accounts",
      "main": "dist/cjs/index",
      "types": "dist/cjs/index.d.ts",
      "type": "module",
      "exports": {
        ".": {
          "require": "./dist/cjs/index.js",
          "import": "./dist/esm/index.js"
        }
      },
      "files": [
        "/dist"
      ],
      "scripts": {
        "tsc": "tsc",
        "test": "jest",
        "test typescript": "tsc ./src/testing.ts && node ./src/testing.js",
        "build": "rm -rf dist/ && prettier --write src/ && npm run build:esm && npm run build:cjs && npm run cp:py",
        "build:esm": "tsc",
        "build:cjs": "tsc --module CommonJS --outDir dist/cjs",
        "cp:py": "xargs -n 1 cp -v src/convert_csv_rdf/csv_to_rdf.py<<<'dist/cjs/convert_csv_rdf dist/esm/convert_csv_rdf' "
      },
      "keywords": [],
      "author": "Affan Rashid <[email protected]>",
      "license": "MIT",
      "repository": {
        "type": "git",
        "url": "https://github.com/AspirationPartners/qa-data-tool"
      },
      "devDependencies": {
        "@babel/core": "^7.18.10",
        "@babel/preset-env": "^7.18.10",
        "@babel/preset-typescript": "^7.18.6",
        "@types/jest": "^28.1.7",
        "@typescript-eslint/eslint-plugin": "^5.17.0",
        "@typescript-eslint/parser": "^5.17.0",
        "babel-jest": "^28.1.3",
        "babel-plugin-transform-vite-meta-env": "^1.0.3",
        "esbuild": "^0.14.54",
        "eslint": "^8.12.0",
        "eslint-config-airbnb": "^19.0.4",
        "eslint-config-airbnb-typescript": "^17.0.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-import-resolver-typescript": "^2.7.0",
        "eslint-plugin-import": "^2.25.4",
        "eslint-plugin-json": "^3.1.0",
        "eslint-plugin-jsx-a11y": "^6.5.1",
        "eslint-plugin-prettier": "^4.0.0",
        "eslint-plugin-react": "^7.29.4",
        "jest": "^28.1.3",
        "prettier": "^2.6.1",
        "ts-node": "^10.9.1",
        "typedoc": "^0.22.13",
        "typescript": "^4.7.4"
      },
      "dependencies": {
        "@aws-sdk/client-s3": "^3.157.0",
        "@types/json2csv": "^5.0.3",
        "aws-sdk": "^2.1200.0",
        "csv": "^6.2.0",
        "csv-parser": "^3.0.0",
        "dayjs": "^1.11.5",
        "dotenv": "^16.0.1",
        "json2csv": "^5.0.7"
      },
      "jest": {
        "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts)$",
        "moduleFileExtensions": [
          "ts",
          "js"
        ]
      }
    }

这就是我的 tsconfig.json 的样子：

{
    "compilerOptions": {
        "target": "es2020",
        "allowJs": true,
        "module": "es2020",
        "declaration": true,
        "allowSyntheticDefaultImports": true,
        "lib": [
            "es5",
            "es2015",
            "es2020",
            "es2016",
            "esnext",
            "dom"
        ],
        "outDir": "dist/esm",
        "strict": true,
        "esModuleInterop": true,
        "moduleResolution": "node",
        
    },
    "include": [
        "src/**/*",
    ],
    "exclude": [
        "node_modules"
    ]
}

这是我使用 import.meta.url 的文件

import day from 'dayjs';
import { exec } from 'child_process';
import { dirname } from 'path';
import { fileURLToPath } from 'url';

/**
 * Runs the csv_to_rdf.py script that converts the transformed CSV into a RDF format.
 * @param filePath - path of the modified csv that you would like to convert to RDF format
 * @returns the file path of the RDF file that is created.
 */
export async function convertCSVToRDF(filePath: string): Promise<string> {
  const __dirname = dirname(fileURLToPath(import.meta.url));
  const script = `${__dirname}/csv_to_rdf.py`;
  const date = `${day().subtract(1, 'days').format('YYYYMMDD')}`;
  const nameOfNewFile = `postedtransactions_${date}.txt`;

  exec(
    `python3 ${script} ${filePath} ${date} > ${nameOfNewFile}`,
    (error, stdout, stderr) => {
      if (error) {
        console.error(`${error}`);
        return;
      }
      console.log(`stdout: ${stdout}`);
      console.error(`stderr: ${stderr}`);
    },
  );

  return nameOfNewFile;
}
   

我的项目中安装了 jest，但我什至没有使用它。当我跑步时

npm run build

我不断得到：

error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.

12   const __dirname = dirname(fileURLToPath(import.meta.url));
                                             ~~~~~~~~~~~


Found 1 error in src/convert_csv_rdf/convert_csv_rdf.ts:12

Answer 1

1.使用以下内容更改您的 tsconfig

compilerOptions": {
       "module": "esnext",
       //... remaining options 
     }

2.在 jest.config 中添加以下内容

  globals: {
     "ts-jest": {
      tsconfig: false,
       useESM: true,
      babelConfig: true,
       plugins: ["babel-plugin-transform-vite-meta-env"],
     },
    },
   transform: {
      "^.+\\.(js|jsx|ts)$": "babel-jest",
    }
`

3.现在它将开始给出错误 Cannot use import.meta 要解决此问题，请在 babel 配置中添加以下内容： `

module.exports = function (api) {
 
 api.cache(true);
  const presets = [
   ["@babel/preset-env", { targets: { node: "current" } }],
  "@babel/preset-typescript",
  "@babel/preset-react",
];

return {
  presets,
  plugins: [
    "@babel/plugin-transform-runtime",
    "babel-plugin-transform-import-meta",
    "babel-plugin-transform-vite-meta-env",
   ],
  };
 };` 

@babel/plugin-transform-runtime, babel-plugin-transform-import-meta 这些插件将帮助你解决这个问题