Axios“无法在模块外部使用 import 语句”

Question

我有一个 Vue.js 应用程序，其中两个文件包含：

import axios from "axios"

这些文件位于应用程序内的 src/lib 中，并在第一行包含 import 语句。

无论 package.json 说什么，在 Github 上运行测试都会导致安装 Axios 1.0.0，现在涉及这些文件的任何测试都会失败并出现上述错误。

将语句更改为const axios = require("axios")也失败；node_modules/axios/index.js 在第 1 行包含一个 import 语句，并在那里抛出异常。

对于此类问题，我经常看到的一个建议是添加"type": "module"到 package.json （与 src/ 处于同一级别）。这会导致所有测试失败，并要求将 vue.config.js 重命名为 vue.config.cjs。这样做会让我： Error: You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously，我不明白。

谁能建议在这里做什么？

Answer 1

我能够通过强制 jest 导入 commonjs axios 构建来修复此错误，方法是添加

  "jest": {
    "moduleNameMapper": {
      "^axios$": "axios/dist/node/axios.cjs"
    }
  },

给我的package.json。使用的其他解决方案transformIgnorePatterns对我不起作用。

Answer 2

axios 1.xx 版本将模块类型从 CommonJS 更改为 ECMAScript。

axios index.js 文件的 0.xx 版本

module.exports = require('./lib/axios');

axiox index.js 文件的 1.xx 版本

import axios from './lib/axios.js';
export default axios;

基本上，jest 运行在 Node.js 环境上，因此它使用遵循 CommonJS 的模块。如果您想使用 1.xx 之前的 axios，您必须将 JavaScript 模块从 ECMAScript 类型转换为 CommonJS 类型。Jest/node_modules/基本上忽略目录进行转换。

• https://jestjs.io/docs/27.x/configuration#transformignorepatterns-arraystring

所以你必须覆盖transformIgnorePatterns选项。有两种方法可以覆盖transformIgnorePatterns选项。

笑话配置.js

如果你的 vue 项目使用jest.config.jsfile，则添加此选项。

module.exports = {
  preset: "@vue/cli-plugin-unit-jest",
  transformIgnorePatterns: ["node_modules/(?!axios)"],
  ...other options
};

包.json

如果你的 vue 项目使用package.jsonfile for jest，则添加此选项。

{
  ...other options
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest",
    "transformIgnorePatterns": ["node_modules\/(?!axios)"]
  }
}

这个正则表达式可以帮助您转换axios模块并忽略node_modules目录下的其他模块。

• https://regexper.com/#node_modules%5C%2F%28%3F!axios%29

Answer 3

将版本更新jest到 v29 在我的项目中解决了这个问题。可能是您的jest版本不兼容。

Answer 4

快速解决

更新 npm run 测试脚本

 "test": "react-scripts test",

到

 "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"",

Answer 5

这对我有用：

在jest.config.js中添加moduleNameMapper

moduleNameMapper: {
    axios: 'axios/dist/node/axios.cjs',
},

Answer 6

我面临着同样的问题。首先使用的变体（在 package.json 文件内）：

"jest": {
    "moduleNameMapper": {
      "axios": "axios/dist/node/axios.cjs"
    }
  },

但为了模拟，我使用 axios-mock-adapter。我收到错误：

类型错误：mock.onGet 不是函数

我将代码更改为：

"jest": {
       "transformIgnorePatterns": [
          "/node_modules/(?!(axios)/)"
        ]
     }

这个解决方案有效。版本：

• “axios”：“^1.4.0”

• “axios-模拟适配器”：“^1.21.5”

• “@types/axios-mock-adapter”：“^1.10.0”

Answer 7

我遇到类似的问题，但错误是由 引起的jest。\n所有尝试导入的测试都axios失败并抛出相同的异常：

\n

Test suite failed to run\n    Jest encountered an unexpected token\n    This usually means that you are trying to import a file which Jest cannot parse, e.g. it\'s not plain JavaScript.\n    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".\n    Here\'s what you can do:\n     \xe2\x80\xa2 If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.\n     \xe2\x80\xa2 To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.\n     \xe2\x80\xa2 If you need a custom transformation specify a "transform" option in your config.\n     \xe2\x80\xa2 If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.\n    You\'ll find more details and examples of these config options in the docs:\n    https://jestjs.io/docs/en/configuration.html\n    Details:\n    /monorepo/node_modules/axios/index.js:1\n    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import axios from \'./lib/axios.js\';\n                                                                                             ^^^^^^\n    SyntaxError: Cannot use import statement outside a module\n      1 | import { describe, expect, it } from \'@jest/globals\'\n    > 2 | import axios from \'axios\'\n

\n

解决方案很简单，应该用jest以下方法axios进行转换babel：

\n

Test suite failed to run\n    Jest encountered an unexpected token\n    This usually means that you are trying to import a file which Jest cannot parse, e.g. it\'s not plain JavaScript.\n    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".\n    Here\'s what you can do:\n     \xe2\x80\xa2 If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.\n     \xe2\x80\xa2 To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.\n     \xe2\x80\xa2 If you need a custom transformation specify a "transform" option in your config.\n     \xe2\x80\xa2 If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.\n    You\'ll find more details and examples of these config options in the docs:\n    https://jestjs.io/docs/en/configuration.html\n    Details:\n    /monorepo/node_modules/axios/index.js:1\n    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import axios from \'./lib/axios.js\';\n                                                                                             ^^^^^^\n    SyntaxError: Cannot use import statement outside a module\n      1 | import { describe, expect, it } from \'@jest/globals\'\n    > 2 | import axios from \'axios\'\n

\n

注意：我正在使用 Quasar Vue，这是他们的实现。

\n