Next.js: Version 9.1.6 build error

[alabobriggs]

Bug report

upgraded next.js version from 9.1.4 to 9.1.6 and got a unknown: Unexpected token (7524:8) error. When I reversed to 9.1.4 the error was fixed

Describe the bug

got an error when I ran npm run build on version 9.1.6 of next.js when I reversed the version to 9.1.4 it was resolved. Also got this build error on zeit now

ailed to compile.

unknown: Unexpected token (7524:8)

> Build error occurred
Error: > Build failed because of webpack errors
    at build (/home/alabo/Documents/developers/kushnap/node_modules/next/dist/build/index.js:9:900)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `next build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/alabo/.npm/_logs/2019-12-27T23_00_58_197Z-debug.log

To Reproduce

1. Upgrade next.js version to version 9.1.6. (I was on version 9.1.4)
2. Run npm run build which will run next build script
3. See error

Expected behavior

It is meant to build succesfully but it gave this error

Screenshots

System information

• OS: elementary os 5.1
• Version of Next.js: 9.1.6

[Timer]

We're not going to be able to fix this without a full reproducible demo! Please provide one. 🙏

[jack2ky]

This might not be helpful, but I used Material-UI react and I received errors. one error said it was coming from a file named something like commons-434kj.js page. It said the error had to do something with "makeStyle". Anyways I did npm exact version 9.1.3. And the errors went away.

Also to confuse things more (unintentionally) only some of my pages showed error.

Sorry I didn't get a chance to write down all errors and make a reproducible thing. I just didn't want to see the errors anymore.

I wanted to let you know what happened. Downgrading worked

Thanks for your work.

[alabobriggs]

We're not going to be able to fix this without a full reproducible demo! Please provide one.

Should I provide a full project folder?

[alabobriggs]

This might not be helpful, but I used Material-UI react and I received errors. one error said it was coming from a file named something like commons-434kj.js page. It said the error had to do something with "makeStyle". Anyways I did npm exact version 9.1.3. And the errors went away.

Also to confuse things more (unintentionally) only some of my pages showed error.

Sorry I didn't get a chance to write down all errors and make a reproducible thing. I just didn't want to see the errors anymore.

I wanted to let you know what happened. Downgrading worked

Thanks for your work.

Mine refused to build for hours. Immediately I downgraded it worked

[timneutkens]

Should I provide a full project folder?

At least some way for us to look into it. It's almost impossible without a reproduction as you can imagine.

[alabobriggs]

Should I provide a full project folder?

At least some way for us to look into it. It's almost impossible without a reproduction as you can imagine.

Okay I will provide one

[Ravindersingh1526]

same issue thanks for reopen
an unexpected error has occurred in production build and following error shown in the console
TypeError: Cannot read property 'attach' of undefined
at nn (commons.5752e1f292d2b25a6a64.js:1)
at commons.5752e1f292d2b25a6a64.js:1
at commons.5752e1f292d2b25a6a64.js:1
at commons.5752e1f292d2b25a6a64.js:1
at commons.5752e1f292d2b25a6a64.js:1
at da (commons.5752e1f292d2b25a6a64.js:1)
at Va (commons.5752e1f292d2b25a6a64.js:1)
at Tu (commons.5752e1f292d2b25a6a64.js:1)
at Tl (commons.5752e1f292d2b25a6a64.js:1)
at jl (commons.5752e1f292d2b25a6a64.js:1)

[alabobriggs]

I just fixed the error by adding a dev package here to show build progress and I updated my next.config.js from

const withPlugins = require("next-compose-plugins");
const withCSS = require('@zeit/next-css')
const withBabelMinify = require('next-babel-minify')

const nextConfigs = {
    webpack: (config) => {
        // Fixes npm packages that depend on `fs` module
        config.node = {
            fs: "empty"
        };
        config.plugins = [
            ...config.plugins
        ]
        return config;
    },
    target: 'serverless'
}

module.exports = withPlugins(
    [
        // plugin to import css
        withCSS({
            cssModules: true
        }),

        withBabelMinify()
    ], 
    nextConfigs
);

to

const withPlugins = require("next-compose-plugins");
const withCSS = require('@zeit/next-css')
const withBabelMinify = require('next-babel-minify')
const withProgressBar = require('next-progressbar')

const nextConfigs = {
    webpack: (config) => {
        // Fixes npm packages that depend on `fs` module
        config.node = {
            fs: "empty"
        };
        config.plugins = [
            ...config.plugins,
        ]
        return config;
    },
    target: 'serverless'
}

module.exports = withPlugins(
    [
        withCSS({}),
        withBabelMinify(),
        withProgressBar({})
    ], 
    nextConfigs
);

and this made the build process way faster moving from about 2 mins to 40s

Thanks everyone for your support

[Timer]

Closing as OP said problem was resolved and has removed our access from repo before we could take a look. Also, using next-babel-minify is likely causing a double minification step.

[alabobriggs]

Just incase anyone lands here in the future.
The recommended fix provided by @Timer was to adjust the next.config.js as most of the modules there wasn't being used. The config was trimed from

const withPlugins = require("next-compose-plugins");
const withCSS = require('@zeit/next-css')
const withBabelMinify = require('next-babel-minify')
const withProgressBar = require('next-progressbar')

const nextConfigs = {
    webpack: (config) => {
        // Fixes npm packages that depend on `fs` module
        config.node = {
            fs: "empty"
        };
        config.plugins = [
            ...config.plugins,
        ]
        return config;
    },
    target: 'serverless'
}

module.exports = withPlugins(
    [
        // plugin to import css
        withCSS({}),
        withBabelMinify(),
        withProgressBar({
            progressBar: {
                fancy: true
            }
        })
    ], 
    nextConfigs
);

to

module.exports = {
    experimental: { css: true },
}

NOTE:
Experimantal above was added for some css features that are currently in development.
Global css files linked in _document.js head was imported in app.js

[anasalpure]

i think you must install webpack then retry to build your project
npm install --save-dev webpack

[tesshsu]

Hi
I follow @anasalpure and still got the same error, any updated ? tks