赛普拉斯解析错误：只有在“sourceType: module”的情况下才能出现“import”和“export”。

Question

赛普拉斯解析错误：只有在“sourceType: module”的情况下才能出现“import”和“export”。

javascriptbabeljsbrowserifye2e-testingcypress

19

我将Cypress从3.0.3更新到3.1.3。我使用ES6的导入/导出模块，这必须是与文档相关的工作。但终端中有一行显示为undefined，并在GUI中出现以下错误：

<root_dir>/node_modules/@babel/runtime/helpers/esm/defineProperty.js:1
export default function _defineProperty(obj, key, value) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

我的测试是用纯JS编写的，没有使用TypeScript或CoffeeScript。我现在卡住了，在3.0.3版本中它工作得很好。

- Mark

3

这是我能找到的唯一一个与解决Cypress框架中此错误相关的问题。 - emery

这个例子帮助我让Cypress和TypeScript一起工作。该示例包括如何与Cucumber集成，但是只需进行少量更改即可在没有Cucumber的情况下使用。 - Rémi Doolaeghe

5个回答

9

我解决了这个问题，在我的根目录中有一个babel.config.js文件，可能覆盖了Cypress配置。在我删除它后，一切都正常工作了。¯\_(ツ)_/¯

更新：也许神奇的地方在于重新添加具有以下内容的babel.config.js，基于此问题：https://github.com/cypress-io/cypress/issues/2945

module.exports = process.env.CYPRESS_ENV
  ? {}
  : { presets: ['@vue/babel-preset-app'] }

- Mark

请问您能否分享一下您的Cypress配置设置，这样我们就可以从您的解决方案中受益呢？ - emery

1

嗨@emery，是的，我的Cypress配置是基于官方文档，没有添加任何特殊的内容。我已经使用我的新babel.config.js更新了答案的内容。 - Mark

CYPRESS_ENV 已更名为 CYPRESS_INTERNAL_ENV。 - Nikolai Borisik

6

如果有人因为以下错误信息而来到这里...

ParseError: 'import' and 'export' may appear only with 'sourceType: module'

...在Cypress TypeScript项目中。这是答案:

只要您有一个tsconfig.json文件，Cypress就支持TypeScript。但是，除非对TypeScript文件进行预处理，否则导入不起作用。

以下是步骤:

1. 安装webpack: yarn add -D webpack 2. 安装ts-loader: yarn add -D ts-loader 3. 安装@cypress/webpack-preprocessor: yarn add -D @cypress/webpack-preprocessor 现在，请确保您的Cypress文件夹中有这3个文件，tsconfig.json，webpack.config.js和plugins / index.js。

plugins/index.js:

const wp = require("@cypress/webpack-preprocessor");

module.exports = on => {
    const options = {
        webpackOptions: require("../webpack.config.js")
    };
    on("file:preprocessor", wp(options));
};

tsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"]
  },
  "include": [
    "**/*.ts"
  ]
}

webpack.config.js:

module.exports = {
    mode: 'development',
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                exclude: [/node_modules/],
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            // skip typechecking for speed
                            transpileOnly: true
                        }
                    }
                ]
            }
        ]
    }
}

现在它应该可以正常工作了。

- Andre Pena

经过数小时的努力，“transpileOnly: true”终于奏效了！谢谢 :) - Khateeb321

我尝试了上面的方法，但对我无效。您能看一下这个问题吗？ - Ashok kumar Ganesan

2

当使用@vue/cli时，只需执行以下操作（在Cypress /plugins/index.js中进行了注释）：

const webpack = require('@cypress/webpack-preprocessor');

module.exports = (on, config) => {
    on('file:preprocessor', webpack({
        webpackOptions: require('@vue/cli-service/webpack.config'),
        watchOptions: {},
    }));
};

- Zombi

1

这里有一个官方的示例，可以在Github上找到，地址为https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/preprocessors__typescript-webpack

注意：如果你使用的是windows系统，并且想要本地运行项目，请先更新package.json中的路径。

// D:\path\cypress-example-recipes\examples\preprocessors__typescript-webpack\package.json

{
  "name": "cypress-example-typescript-webpack",
  "version": "1.0.0",
  "description": "Example showing TypeScript tests with Cypress",
  "scripts": {
    // ...
    "cypress:open": "..\\..\\node_modules\\.bin\\cypress open"
  }
}

- rdhainaut

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- emery · Accepted Answer

这个错误是由于在 Cypress 运行于浏览器时出现了像 "import" 和 "export" 这样的现代关键字所导致的。与 Selenium 或 Protractor 不同，Cypress 实际上是在浏览器内运行的。由于浏览器尚未支持现代 JS，因此您需要使用 webpack 或 browserify 来转译您的代码。

https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples

以下博客文章介绍了如何使用 webpack 让 Cypress 能够与现代 JS 和 TypeScript 一起工作：

https://glebbahmutov.com/blog/use-typescript-with-cypress/

^^ 该文章专注于 TypeScript，但对于 JavaScript 的配置选项将会相似。

以下 npm 包必须安装并在 package.json 中声明：

"@cypress/webpack-preprocessor": "^4.1.0",
"cypress": "^3.3.1",
"ts-loader": "^6.0.3",
"typescript": "^3.5.2",
"webpack": "^4.34.0"

应使用以下方式安装Webpack：

npm install --save-dev webpack typescript ts-loader
npm install --save-dev @cypress/webpack-preprocessor

对于非TypeScript用户，应在名为tsconfig.json的文件的“compilerOptions”部分中设置“allowJs”为true：

"module": "es6",
"target": "es6",
"types": ["cypress"],
"allowJs": true

您的根目录中应该有一个名为 "webpack.config.js" 的文件，其中包含以下内容：

const path = require('path')

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

这些导出应该存在于cypress/plugins/index.js下：

const webpack = require('@cypress/webpack-preprocessor')
module.exports = on => {
  const options = {
    // send in the options from your webpack.config.js, so it works the same
    // as your app's code
    webpackOptions: require('../../webpack.config'),
    watchOptions: {}
  }

  on('file:preprocessor', webpack(options))
}

请注意Cypress插件文件末尾的最后一节内容，

on('file:preprocessor', webpack(options))

那便是Cypress被告知以一种使其适用于Cypress的方式处理你的现代JS代码的地方。