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

Question

当在代码中Jest.js遇到时，我得到一个错误：import.meta

\n

FAIL  testFile.test.ts\n  \xe2\x97\x8f Test suite failed to run\n\n    testFile.ts:40:10 - error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'esnext', or 'system'.\n\n    40          return import.meta?.env as EnvironmentalVariablesType\n

\n

我已经安装了以下 babel 相关包：

\n

// package.json\n    "devDependencies": {\n        "@babel/core": "^7.16.5",\n        "@babel/preset-env": "^7.16.5",\n        "@babel/preset-typescript": "^7.16.5",\n        "@vitejs/plugin-react-refresh": "1.3.6",\n        "babel-jest": "^27.4.5",\n        "jest": "27.3.1",\n        "jest-environment-jsdom-global": "3.0.0",\n        "react": "17.0.1",\n        "ts-jest": "27.0.7",\n        "typescript": "4.1.3",\n        "vite": "2.6.14"\n    "dependencies": {\n        "babel-plugin-transform-vite-meta-env": "^1.0.3",\n        "babel-preset-vite": "^1.0.4",\n

\n

我设置babel.config.js如下：

\n

module.exports = {\n    plugins: [ 'babel-plugin-transform-vite-meta-env' ],\n    presets: [\n        [\n            '@babel/preset-env',\n            { targets: { node: 'current' } },\n        ],\n        [ '@babel/preset-typescript' ],\n        [ 'babel-preset-vite' ],\n    ],\n}\n\n

\n

和我的vite.config.js：

\n

import { defineConfig } from 'vite'\nimport reactRefresh from '@vitejs/plugin-react-refresh'\nimport replace from '@rollup/plugin-replace'\n\n// https://vitejs.dev/config/\nexport default defineConfig( {\n    base: '/time/',\n    server: {\n        port: 9000,\n    },\n    plugins: [\n        reactRefresh(),\n        replace( {\n            'process.env.NODE_ENV': JSON.stringify( 'development' ),\n            'process.env.SHOW_DEV_TOOLS': JSON.stringify( 'true' ),\n        } ),\n    ],\n} )\n

\n

尝试过

\n

\n
• module在 tsconfig.json 中设置为es2020, esnext, 或system
\n

\n

这些都没有清除或更改终端错误。

\n

上面是否存在一些错误配置导致 Jest 无法正常运行 babel？

\n

Answer 1

在 中tsconfig.json，尝试将其设置compilerOptions为：

{
  "compilerOptions": {
    "module": "es2022",
    "moduleResolution": "Node"
  },
  ...
}

Answer 2

1. 安装vite-plugin-environment插件 ( https://www.npmjs.com/package/vite-plugin-environment )
2. .env在项目根文件夹中的 package.json 附近创建文件
3. .env在文件中提供您的环境变量
4. 改变你的import.meta.env.YOUR_VAR一切process.env.YOUR_VAR
5. 打开vite.config.ts并列出 vite-plugin-environment：

import EnvironmentPlugin from 'vite-plugin-environment';

...

plugins: [
  react(), 
  ...
  EnvironmentPlugin('all')
]

Jest 会理解process.env.YOUR_VAR，所以如果你改变所有你的import.meta.env.YOUR_VAR测试process.env.YOUR_VAR 将通过而不会出现import.meta.env错误

这篇文章帮助我在我的 Vite 项目中设置 Jest。