发生构建错误 ReferenceError: describe is not defined > 在 now.sh 部署期间

Posted 2023-02-22

【中文标题】发生构建错误 ReferenceError: describe is not defined > 在 now.sh 部署期间

【英文标题】：Build error occurred ReferenceError: describe is not defined > During now.sh deployment

【发布时间】：2020-01-10 07:53:59

【问题描述】：

我正在使用 now.sh 来部署我的 nextjs (React) 应用。由于此错误，构建失败：

Build error occurred ReferenceError: describe is not defined

不知道为什么会这样，这是我的.babelrc

  "env": 
    "development": 
      "compact": false,
      "presets": [
        "next/babel",
        "@zeit/next-typescript/babel"
      ],
      "plugins": [
        ["styled-components", "s-s-r": true, "displayName": true],
        ["@babel/plugin-proposal-decorators", "legacy": true]
      ]
    ,
    "production": 
      "presets": [
        "next/babel",
        "@zeit/next-typescript/babel"
      ],
      "plugins": [
        ["styled-components", "s-s-r": true, "displayName": true],
        ["@babel/plugin-proposal-decorators", "legacy": true]
      ]
    ,
    "test": 
      "compact": false,
      "presets": [
        "@babel/preset-typescript",
        ["next/babel", "preset-env":  "modules": "commonjs" ]
      ],
      "plugins": [
        ["styled-components",  "s-s-r": true, "displayName": true ],
        ["@babel/plugin-proposal-decorators",  "legacy": true ],
        ["babel-plugin-sass-vars"]
      ]
    
  

package.json

"engines" :  
    "node" : ">=8.10.0 <11.0.0" 
  ,
  "scripts": 
    "dev": "NODE_ENV=development next -p 7777",
    "build": "NODE_ENV=production next build",
    "start": "next -p 7777",
    "test": "NODE_ENV=test jest --no-cache",
    "test-watch": "NODE_ENV=test jest --watch --no-cache",
    "coverage": "NODE_ENV=test jest --coverage",
    "update-snap": "NODE_ENV=test jest --updateSnapshot"
  ,

完整日志：

running "npm run now-build"
> moon.holdings@2.0.0 now-build /tmp/7418164
> next build
Creating an optimized production build ...
> Using external babel configuration
> Location: "/tmp/7418164/.babelrc"
> Build error occurred
ReferenceError: describe is not defined
    at Module.kAI8 (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:63996:1)
    at __webpack_require__ (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:23:31)
    at module.exports.+3sd.exports.__esModule (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:91:18)
    at Object.<anonymous> (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:94:10)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
npm
ERR! code ELIFECYCLE

使用描述的第一个测试：

import React from 'react'
import  shallow  from 'enzyme'
import toJson from 'enzyme-to-json'

import About from '../about.tsx'

describe('<About /> component', () => 
  describe('rendering', () => 
    const wrapper = shallow(<About />);
    it('should render a component matching the snapshot', () => 
      const tree = toJson(wrapper);
      expect(tree).toMatchSnapshot();
      expect(wrapper).toHaveLength(1);
      expect(wrapper.contains(<About/>));
    );
  );
);

next.config

module.exports = (phase,  defaultConfig ) => 
  webpack: (config,  buildId, dev, isServer, defaultLoaders, webpack ) => 
    module: 
      loaders: [
        
          test: /\.json$/,
          loader: 'json-loader'
        
      ]
    
    // Note: Nextjs provides webpack above so you should not `require` it
    // Perform customizations to webpack config
    // Important: return the modified config
    config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
    return config
  

  // ✅ Put the require call here.
  const withTypescript = require('@zeit/next-typescript')
  const withCSS = require('@zeit/next-sass')

  // withCSS(target: 'serverless')
  return withTypescript(withCSS(
    webpack(config, options) 
      return config
    
  ))

【问题讨论】：

在你的最后一段代码中，你在哪里声明describe？

好吧describe 是开玩笑的一部分。我以前从未在任何应用程序中声明describe :(

哇，奇怪，我刚刚注释掉了 about.test.js 代码，它部署得很好？？ :( 而且我还有其他测试也使用describe 太奇怪了...

@LeonGaban 你的next.config.js 怎么样（你可以发布相关代码）

@Rikin 刚刚添加了我的 next.config！

【参考方案1】：

如果您希望将非页面文件与/pages 目录中的页面放在一起，您可以使用Custom Page Extensions 来强制您的页面具有.page.js 的文件扩展名。设置完成后，Next.js 将忽略文件扩展名中没有 .page 的所有文件。

next.config.js

module.exports = 
  // Force .page prefix on page files (ex. index.page.tsx) so generated files can be included in /pages directory without Next.js throwing build errors
  pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],

我为此用例编写了一些文档，尚未合并https://github.com/vercel/next.js/pull/22740。

发现此问题的原始 Github 问题是 https://github.com/vercel/next.js/issues/3728#issuecomment-895568757。

【参考方案2】：

允许在 pages 文件夹内进行测试的选项：

直接在 next.config.js 中更改 webpack 设置

module.exports = 
  webpack: (config,  webpack ) => 
    config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
    return config
  

它忽略了在构建过程中找到的任何__tests__ 文件夹。

【讨论】：

这不再适用于 Next.js 11 Error: Build optimization failed: found pages without a React Component as default export。

【参考方案3】：

轻松修复：https://github.com/zeit/next.js/issues/3728#issuecomment-523789071

pageExtensions: ['page.tsx']

【讨论】：

为我工作，因为我在 /pages 文件夹中有一些 .test.ts 文件。

【参考方案4】：

我删除了覆盖/pages 目录的测试。 NextJS 使用页面进行路由。不知道为什么会导致问题，跑了覆盖，看起来页面没有必要覆盖。

希望 NextJS / Now.sh 团队的某个人提供更好的答案，我会选择它。

【讨论】：

默认情况下，Next.js 尝试将/pages 目录中的所有文件视为路由页面。您可以使用nextjs.org/docs/api-reference/next.config.js/… 自定义页面的文件扩展名，这样它将忽略没有该文件扩展名的文件。请参阅下面的***.com/a/68718957/665224我的回答。