如何解决“不能在模块外使用导入语句”在开玩笑

我有一个React应用程序(不使用创建React应用程序)，使用TypeScript, Jest, Webpack和Babel构建。当试图运行纱线笑话时，我得到以下错误:

我已经尝试删除所有包并重新添加它们。它不能解决这个问题。我看过类似的问题和文档，但我仍然误解了一些东西。我甚至按照另一个指南从头开始设置这个环境，但我的代码仍然遇到了这个问题。

依赖关系包括……

"dependencies": {
  "@babel/plugin-transform-runtime": "^7.6.2",
  "@babel/polyfill": "^7.6.0",
  "babel-jest": "^24.9.0",
  "react": "^16.8.6",
  "react-dom": "^16.8.6",
  "react-test-renderer": "^16.11.0",
  "source-map-loader": "^0.2.4"
},
"devDependencies": {
  "@babel/core": "^7.6.0",
  "@babel/preset-env": "^7.6.0",
  "@babel/preset-react": "^7.0.0",
  "@types/enzyme": "^3.9.2",
  "@types/enzyme-adapter-react-16": "^1.0.5",
  "@types/jest": "^24.0.13",

组件的导入行…

import * as React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from "./components/pages";
import {
  Footer,
  Header,
  Navigation,
} from "./components/shared";

测试文件....

import * as React from "react";
import * as renderer from "react-test-renderer";
import App from "../App";

it("Renders the Footer correctly", () => {
  const tree = renderer
    .create(<App />)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

我希望能够在组件中使用命名导入，而不会导致测试失败。如果我在解决方案中只使用默认导入，似乎可以解决这个问题，但我宁愿不走那条路。

当前回答

如果你在使用TypeScript，你有一个tsconfig。Json文件，尝试删除"module": "esnext"，如果你正在使用它

2021-07-01 16:48:23

其他回答

如果你正在使用Babel 6，试试这个东西

在babel.config.js的插件部分添加@babel/plugin-transform-modules-commonjs

对于我的案例，导入问题是由于将react文件添加到transformIgnorePatterns中而导致的

“transformIgnorePatterns”:[" / node_modules / (? ! react-file-drop)”)

2020-04-09 06:40:59

我通过改变tsconfig来解决这个问题。Json到兼容的本机输出

"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */

这并非在所有情况下都是理想的，但你可能会接受。

2021-12-21 23:53:32

没有一个答案对我有帮助，帮助我的是确保我的NODE_ENV被设置为测试，因为babel配置是每个NODE_ENV使用错误的NODE_ENV，在babel配置中没有配置将意味着你不会使用babel, typescript文件不会被转换。

我花了几个小时来解决这个问题，所以我希望它能帮别人节省我花的时间。

2022-09-22 07:32:43

在主目录上创建.babelrc，添加这些代码并安装这些包 @babel/core， @babel/预设-env和@babel/预设-react

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": "commonjs"
      }
    ],
    "@babel/preset-react"
  ]
}

2021-10-13 13:01:20

我需要做几件事来让它为我工作

将我的.babelrc重命名为babel.config.js，并做一些改变:

// .babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": "3.26",
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ],
  ...
}

// babel.config.js - This still works fine with webpack
module.exports = {
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": "3.26",
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ],
  ...
}

添加以下到我的jest配置文件:

{
  ...  
  "transformIgnorePatterns": [
    "node_modules/(?!(react-leaflet-custom-control)/)"
  ],
  ...
}

react-传单-定制-控制是给我带来问题的包。

2023-01-11 21:19:18

如何解决“不能在模块外使用导入语句”在开玩笑

推荐文章

最新文章

标签