Next.js + Antd not building correctly on deploy #6194

andresg747 · 2019-02-02T17:17:40Z

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: webpack-contrib/terser-webpack-plugin#66

The text was updated successfully, but these errors were encountered:

mitchdowney · 2019-02-02T18:05:23Z

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.

andresg747 · 2019-02-02T18:15:15Z

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

nocategory · 2019-02-02T19:02:32Z

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

swyxio · 2019-02-03T07:24:56Z

terser bug terser/terser#251 which broke webpack. pls wait for it to be resolved

develomark · 2019-02-03T10:48:01Z

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

andresg747 · 2019-02-03T13:08:13Z

Update

Based on this workaround: vuejs/vue-cli#3407 (comment)

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"
  },

andrevantunes · 2019-02-03T14:22:17Z

Worked for me 👍

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

andresggarcia · 2019-02-07T12:46:58Z

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

andresg747 changed the title ~~Next.js + Antd not building on deploy~~ Next.js + Antd not building correctly on deploy Feb 2, 2019

andresg747 mentioned this issue Feb 2, 2019

Possible breaking change on recent version released terser/terser#252

Closed

timneutkens closed this as completed Feb 7, 2019

lock bot locked as resolved and limited conversation to collaborators Feb 8, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Next.js + Antd not building correctly on deploy #6194

Next.js + Antd not building correctly on deploy #6194

andresg747 commented Feb 2, 2019 •

edited by timneutkens

Loading

mitchdowney commented Feb 2, 2019

andresg747 commented Feb 2, 2019

nocategory commented Feb 2, 2019

swyxio commented Feb 3, 2019

develomark commented Feb 3, 2019

andresg747 commented Feb 3, 2019 •

edited

Loading

andrevantunes commented Feb 3, 2019

andresggarcia commented Feb 7, 2019

Next.js + Antd not building correctly on deploy #6194

Next.js + Antd not building correctly on deploy #6194

Comments

andresg747 commented Feb 2, 2019 • edited by timneutkens Loading

Bug report

To Reproduce

Expected behavior

System information

Additional info

Updates

mitchdowney commented Feb 2, 2019

andresg747 commented Feb 2, 2019

nocategory commented Feb 2, 2019

swyxio commented Feb 3, 2019

develomark commented Feb 3, 2019

andresg747 commented Feb 3, 2019 • edited Loading

Update

andrevantunes commented Feb 3, 2019

andresggarcia commented Feb 7, 2019

andresg747 commented Feb 2, 2019 •

edited by timneutkens

Loading

andresg747 commented Feb 3, 2019 •

edited

Loading