Next.js: Next.js + Antd not building correctly on deploy

Created on 2 Feb 2019 · 8Comments · Source: vercel/next.js

See https://github.com/vuejs/vue-cli/issues/3407#issuecomment-459985313

Bug report

I've successfully configured a Next.js app integration with Antd following this guide. Everything works as expected on development. However, when deploying with Now, it throws an error on build process:

TypeError: Cannot read property 'minify' of undefined

Deployment Logs

normalized package.json result:  { name: 'xxxx',
  version: '1.0.0',
  description: 'Admin Panel',
  main: 'index.js',
  scripts: 
   { dev: 'next -p 3000',
     'dev:clean': 'rm -rf node_modules/.cache && npm run dev',
     build: 'next build',
     start: 'next start',
     test: 'NODE_ENV=test jest --watch',
     'test-win': 'SET NODE_ENV=test&& jest --watch',
     analyze: 'cross-env ANALYZE=1 next build',
     deploy: 'now && now alias',
     'now-build': 'NODE_OPTIONS=--max_old_space_size=3000 next build --lambdas' },
  author: 'xxxx',
  license: 'ISC',
  dependencies: 
   { react: '^16.5.2',
     'react-dom': '^16.5.2',
     'next-server': 'v7.0.2-canary.49' },
  devDependencies: 
   { '@zeit/next-sass': '^1.0.1',
     antd: '^3.13.0',
     'apollo-boost': '^0.1.16',
     'apollo-client': '^2.4.2',
     'babel-core': '^7.0.0-bridge.0',
     'date-fns': '^2.0.0-alpha.25',
     enzyme: '^3.6.0',
     'enzyme-adapter-react-16': '^1.5.0',
     graphql: '^14.0.2',
     'graphql-tag': '^2.9.2',
     'lodash.debounce': '^4.0.8',
     'lodash.throttle': '^4.1.1',
     next: 'v7.0.2-canary.49',
     'next-compose-plugins': '^2.1.1',
     'next-with-apollo': '^3.1.3',
     'node-sass': '^4.11.0',
     nprogress: '^0.2.0',
     'prop-types': '^15.6.2',
     'react-adopt': '^0.6.0',
     'react-apollo': '^2.2.1',
     'react-datepicker': '^2.0.0',
     'react-select': '^2.3.0',
     'react-transition-group': '^2.5.0',
     '@zeit/next-css': '^1.0.1',
     'babel-jest': '^23.6.0',
     'babel-plugin-import': '^1.11.0',
     'babel-plugin-module-resolver': '^3.1.1',
     casual: '^1.5.19',
     'enzyme-to-json': '^3.3.4',
     'graphql-tools': '^4.0.0',
     jest: '^23.6.0',
     'jest-transform-graphql': '^2.1.0',
     less: '^3.9.0',
     'less-loader': '^4.1.0',
     'merge-files-webpack-plugin': '^1.1.2',
     'webpack-bundle-analyzer': '^3.0.3',
     'next-server': undefined },
  jest: 
   { setupTestFrameworkScriptFile: '<rootDir>/jest.setup.js',
     testPathIgnorePatterns: [ '<rootDir>/.next/', '<rootDir>/node_modules/' ],
     transform: 
      { '\.(gql|graphql)$': 'jest-transform-graphql',
        '.*': 'babel-jest',
        '^.+\.js?$': 'babel-jest' } } }
...
Error: static/chunks/commons.72b19a90a7b63ac9f9b3.js from Terser
TypeError: Cannot read property 'minify' of undefined
    at minify (/tmp/243ef623/node_modules/terser-webpack-plugin/dist/minify.js:162:59)
    at TaskRunner.boundWorkers (/tmp/243ef623/node_modules/terser-webpack-plugin/dist/TaskRunner.js:62:41)
    at enqueue (/tmp/243ef623/node_modules/terser-webpack-plugin/dist/TaskRunner.js:82:14)
    at tryCatcher (/tmp/243ef623/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/tmp/243ef623/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/tmp/243ef623/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/tmp/243ef623/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/tmp/243ef623/node_modules/bluebird/js/release/promise.js:690:18)
    at _drainQueueStep (/tmp/243ef623/node_modules/bluebird/js/release/async.js:138:12)
    at _drainQueue (/tmp/243ef623/node_modules/bluebird/js/release/async.js:131:9)
    at Async._drainQueues (/tmp/243ef623/node_modules/bluebird/js/release/async.js:147:5)
    at Immediate.Async.drainQueues (/tmp/243ef623/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:794:20)
    at tryOnImmediate (timers.js:752:5)
    at processImmediate [as _immediateCallback] (timers.js:729:5)
    at Function.buildError (/tmp/243ef623/node_modules/terser-webpack-plugin/dist/index.js:111:14)
    at results.forEach (/tmp/243ef623/node_modules/terser-webpack-plugin/dist/index.js:255:50)
    at Array.forEach (<anonymous>)
    at taskRunner.run (/tmp/243ef623/node_modules/terser-webpack-plugin/dist/index.js:242:17)
    at step (/tmp/243ef623/node_modules/terser-webpack-plugin/dist/TaskRunner.js:76:9)
    at done (/tmp/243ef623/node_modules/terser-webpack-plugin/dist/TaskRunner.js:84:30)
    at boundWorkers (/tmp/243ef623/node_modules/terser-webpack-plugin/dist/TaskRunner.js:89:13)
    at TaskRunner.boundWorkers (/tmp/243ef623/node_modules/terser-webpack-plugin/dist/TaskRunner.js:64:11)
    at enqueue (/tmp/243ef623/node_modules/terser-webpack-plugin/dist/TaskRunner.js:82:14)
    at tryCatcher (/tmp/243ef623/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/tmp/243ef623/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/tmp/243ef623/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/tmp/243ef623/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/tmp/243ef623/node_modules/bluebird/js/release/promise.js:690:18)
    at _drainQueueStep (/tmp/243ef623/node_modules/bluebird/js/release/async.js:138:12)
    at _drainQueue (/tmp/243ef623/node_modules/bluebird/js/release/async.js:131:9) Error: static/runtime/webpack-89179faa512dd01fbb62.js from Terser
TypeError: Cannot read property 'minify' of undefined
    at minify (/tmp/243ef623/node_modules/terser-webpack-plugin/dist/minify.js:162:59)
    at TaskRunner.boundWorkers (/tmp/243ef623/node_modules/terser-webpack-plugin/dist/TaskRunner.js:62:41)
    at enqueue (/tmp/243ef623/node_modules/terser-webpack-plugin/dist/TaskRunner.js:82:14)
    at tryCatcher (/tmp/243ef623/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/tmp/243ef623/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/tmp/243ef623/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/tmp/243ef623/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/tmp/243ef623/node_modules/bluebird/js/release/promise.js:690:18)
    at _drainQueueStep (/tmp/243ef623/node_modules/bluebird/js/release/async.js:138:12)
    at _drainQueue (/tmp/243ef623/node_modules/bluebird/js/release/async.js:131:9)
    at Async._drainQueues (/tmp/243ef623/node_modules/bluebird/js/release/async.js:147:5)
    at Immediate.Async.drainQueues (/tmp/243ef623/node_modules/bluebird/js/release/async.js:17:14)
    at runCall
02/02 01:39 PM (20m)
> Build error occured
Error: > Build failed because of webpack errors
    at Object.build [as default] (/tmp/243ef623/node_modules/next/dist/build/index.js:42:15)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
02/02 01:39 PM (20m)
error Command failed with exit code 1.
02/02 01:39 PM (20m)
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
02/02 01:39 PM (20m)
Error: Exited with 1
    at ChildProcess.child.on (/tmp/utils/node_modules/@now/build-utils/fs/run-user-scripts.js:14:16)
    at emitTwo (events.js:126:13)
    at ChildProcess.emit (events.js:214:7)
    at maybeClose (internal/child_process.js:925:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
02/02 01:39 PM (20m)
patching https://api-gru1.zeit.co/v2/now/deployments/dpl_dGkT2Dgzo1bhJ6qyt4USY9ZtA2Cx/builds/bld_421j0r01l with {"readyState":"ERROR","errorCode":"BUILD_FAILED_2"}

To Reproduce

Install Dependencies:

    "@zeit/next-sass": "^1.0.1",
    "@zeit/next-css": "^1.0.1",
    "antd": "^3.13.0",
    "babel-plugin-import": "^1.11.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",

next-less.config.js

const cssLoaderConfig = require('@zeit/next-css/css-loader-config')

module.exports = (nextConfig = {}) => {
  return Object.assign({}, nextConfig, {
    webpack(config, options) {
      if (!options.defaultLoaders) {
        throw new Error(
          'This plugin is not compatible with Next.js versions below 5.0.0 https://err.sh/next-plugins/upgrade'
        )
      }

      const { dev, isServer } = options
      const {
        cssModules,
        cssLoaderOptions,
        postcssLoaderOptions,
        lessLoaderOptions = {}
      } = nextConfig

      options.defaultLoaders.less = cssLoaderConfig(config, {
        extensions: ['less'],
        cssModules,
        cssLoaderOptions,
        postcssLoaderOptions,
        dev,
        isServer,
        loaders: [
          {
            loader: 'less-loader',
            options: lessLoaderOptions
          }
        ]
      })

      config.module.rules.push({
        test: /\.less$/,
        exclude: /node_modules/,
        use: options.defaultLoaders.less
      })

      // 我们禁用了antd的cssModules
      config.module.rules.push({
        test: /\.less$/,
        include: /node_modules/,
        use: cssLoaderConfig(config, {
          extensions: ['less'],
          cssModules:false,
          cssLoaderOptions:{},
          dev,
          isServer,
          loaders: [
            {
              loader: 'less-loader',
              options: lessLoaderOptions
            }
          ]
        })
      })

      if (typeof nextConfig.webpack === 'function') {
        return nextConfig.webpack(config, options)
      }

      return config
    }
  })
}

next.config.js

const withSass = require('@zeit/next-sass')
const withLessExcludeAntd = require("./next-less.config")
const modifyVars = require("./utils/modifyVars")

if (typeof require !== 'undefined') {
  require.extensions['.less'] = (file) => { }
}

module.exports = withSass(withLessExcludeAntd({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  },
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars,
  }
}));

now.json

{
  "version": 2,
  "name": "xxxx",
  "alias": "xxxx",
  "builds": [
    { "src": "next.config.js", "use": "@now/next" }
  ]
}

utils/modifyVars.js

module.exports = {
  "@primary-color": "#ff4c3b",
}

pages/index.js

import { Layout, Menu, Breadcrumb, Icon } from 'antd';

const { Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;

export default class SiderDemo extends React.Component {
  state = { collapsed: false };

  onCollapse = (collapsed) => {
    console.log(collapsed);
    this.setState({ collapsed });
  }

  render() {
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider
          collapsible
          collapsed={this.state.collapsed}
          onCollapse={this.onCollapse}
        >
          <div className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            <Menu.Item key="1">
              <Icon type="pie-chart" />
              <span>Ofertando!</span>
            </Menu.Item>
            <Menu.Item key="2">
              <Icon type="desktop" />
              <span>Option 2</span>
            </Menu.Item>
            <SubMenu
              key="sub1"
              title={<span><Icon type="user" /><span>User</span></span>}
            >
              <Menu.Item key="3">Tom</Menu.Item>
              <Menu.Item key="4">Bill</Menu.Item>
              <Menu.Item key="5">Alex</Menu.Item>
            </SubMenu>
            <SubMenu
              key="sub2"
              title={<span><Icon type="team" /><span>Team</span></span>}
            >
              <Menu.Item key="6">Team 1</Menu.Item>
              <Menu.Item key="8">Team 2</Menu.Item>
            </SubMenu>
            <Menu.Item key="9">
              <Icon type="file" />
              <span>File</span>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>
            <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
              Bill is a catsss.
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>
            Ofertando! © 2019
          </Footer>
        </Layout>
      </Layout>
    );
  }
}

Expected behavior

It should build correctly on production (now.sh).

System information

OS: MacOS Mojave
Version of Next.js: [email protected]

Additional info

I'm also getting FOUC using this method, but that's a topic for another issue.
Thanks in advance!

Updates

See: https://github.com/webpack-contrib/terser-webpack-plugin/issues/66

Source

andresg747

👍7

Most helpful comment

Update

Based on this workaround: https://github.com/vuejs/vue-cli/issues/3407#issuecomment-459985313

Adding the following on your package.json will build correctly on deploy, until new release of terser patching this issue is out.

  "resolutions": {
    "terser": "3.14.1"
  },

andresg747 on 3 Feb 2019

🎉11 ❤6

All 8 comments

I just ran into this during a build as well. A new version of terser was released 2 hours ago. I wonder if that introduced a breaking change, because my build command worked fine yesterday and nothing has changed in my setup.

mitchdowney on 2 Feb 2019

🚀1

That's interesting @mitchdowney. I've asked if it's related. Let's wait for any response.
Thanks!

andresg747 on 2 Feb 2019

👍1

It seems to be related, check this conversation on Spectrum https://spectrum.chat/zeit/now/next-js-on-now-build-error~c73091bd-0141-4c3a-b8c1-3b8f7fa78298

nocategory on 2 Feb 2019

terser bug https://github.com/terser-js/terser/issues/251 which broke webpack. pls wait for it to be resolved

sw-yx on 3 Feb 2019

Confirmed also have the same issue - this is not related to Antd. Hopefully the terser terser-js/terser#251 can be fixed speedily.

develomark on 3 Feb 2019

Update

Based on this workaround: https://github.com/vuejs/vue-cli/issues/3407#issuecomment-459985313

Adding the following on your package.json will build correctly on deploy, until new release of terser patching this issue is out.

  "resolutions": {
    "terser": "3.14.1"
  },

andresg747 on 3 Feb 2019

🎉11 ❤6

Worked for me 👍

Based on the same issue comment
For npm users: run npm i [email protected]

AndreAntunesVieira on 3 Feb 2019

👍7

The issue seems to be resolved as an official release from terser patched the errors. The issue can be closed now.

andresggarcia on 7 Feb 2019

👍1

Was this page helpful?

0 / 5 - 0 ratings

Related issues

`next build` fails with "Module did not self-register."

Vista1nik · 55Comments

How to catch and handle errors to report logs on server side

acanimal · 74Comments

Add login / authentication example

rauchg · 208Comments

Production websites using Next.js

timneutkens · 72Comments

Add support to transpile modules inside node_modules

arunoda · 103Comments