Question

我正在使用 now.sh 部署我的 nextjs （响应）应用程序。由于此错误，构建失败：

Build error occurred ReferenceError: describe is not defined

不确定为什么会这样，这是我的.babelrc

{
  "env": {
    "development": {
      "compact": false,
      "presets": [
        "next/babel",
        "@zeit/next-typescript/babel"
      ],
      "plugins": [
        ["styled-components", {"ssr": true, "displayName": true}],
        ["@babel/plugin-proposal-decorators", {"legacy": true}]
      ]
    },
    "production": {
      "presets": [
        "next/babel",
        "@zeit/next-typescript/babel"
      ],
      "plugins": [
        ["styled-components", {"ssr": 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", { "ssr": 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
    }
  }))
}

Answer 1

我删除了涵盖/pages目录的测试。 NextJS使用页面进行路由。不知道为什么会导致此问题，请进行覆盖并且看起来不需要覆盖页面。

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

Answer 2

允许页面内文件夹进行测试的选项：

直接在next.config.js

中更改Webpack设置

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

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

Answer 3

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

pageExtensions: ['page.tsx']

Answer 4

如果您希望将非页面文件与 /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。

发生构建错误ReferenceError：未定义describe>在now.sh部署期间

4 个答案: