Next.js: failed to build custom less files in `with-ant-design-less` sample with `target: serverless`

[bokuo-okubo]

Bug report

Describe the bug

In the case using target: 'serverless' flag in next.config.js, the with-ant-design-less sample code build failed.

$ yarn build
yarn run v1.17.3
$ next build
Creating an optimized production build ...

> Using external babel configuration
> Location: "/Users/bko/data/dev/_projects/next-with-ant-design-less-failed/.babelrc"
Compiled with warnings.

./node_modules/component-classes/index.js
Module not found: Can't resolve 'indexof' in '/Users/bko/data/dev/_projects/next-with-ant-design-less-failed/node_modules/component-classes'

> Build error occurred
TypeError: (0 , _styleChecker.default) is not a function
    at Object.g5iu (/Users/bko/data/dev/_projects/next-with-ant-design-less-failed/.next/serverless/pages/index.js:37583:55)
    at __webpack_require__ (/Users/bko/data/dev/_projects/next-with-ant-design-less-failed/.next/serverless/pages/index.js:23:31)
    at Object.3PeW (/Users/bko/data/dev/_projects/next-with-ant-design-less-failed/.next/serverless/pages/index.js:3977:36)
    at __webpack_require__ (/Users/bko/data/dev/_projects/next-with-ant-design-less-failed/.next/serverless/pages/index.js:23:31)
    at Object.lbd2 (/Users/bko/data/dev/_projects/next-with-ant-design-less-failed/.next/serverless/pages/index.js:42120:36)
    at __webpack_require__ (/Users/bko/data/dev/_projects/next-with-ant-design-less-failed/.next/serverless/pages/index.js:23:31)
    at Module.ILaR (/Users/bko/data/dev/_projects/next-with-ant-design-less-failed/.next/serverless/pages/index.js:15153:18)
    at __webpack_require__ (/Users/bko/data/dev/_projects/next-with-ant-design-less-failed/.next/serverless/pages/index.js:23:31)
    at /Users/bko/data/dev/_projects/next-with-ant-design-less-failed/.next/serverless/pages/index.js:91:18
    at Object.<anonymous> (/Users/bko/data/dev/_projects/next-with-ant-design-less-failed/.next/serverless/pages/index.js:94:10)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

To Reproduce

1. Go to 'https://github.com/bokuo-okubo/next-with-ant-design-less-failed'
2. yarn
3. next => working fine
4. next build => Error

(also in the case remove target: 'serverless' flag, build works fine.)

Expected behavior

I tried to build with the check condition also options.dev flag, it works fine.

https://github.com/bokuo-okubo/next-with-ant-design-less-failed/blob/4ceee6c40d3a3e52ef52407715b3a056c03f9605/next.config.js#L34

In the case of using target: 'serverless' mode, config.externals contain the amp-toolbox-optimizer, so the something wrong around there.

Screenshots

---

• dump the option in the build time
  

System information

• OS: macOS, Mojave, Version 10.14.5
• Browser (if applies) [e.g. chrome, safari]
• next version: "9.0.2"
• package.json
  
  
  
  • json { "name": "next-with-ant-design-less-failed", "version": "0.1.0", "private": true, "scripts": { "dev": "node server.js", "build": "next build", "start": "cross-env NODE_ENV=production node server.js" }, "dependencies": { "antd": "^3.20.7", "babel-plugin-import": "^1.12.0", "cross-env": "^5.2.0", "css-animation": "^1.6.0", "express": "^4.17.1", "less": "^3.9.0", "less-vars-to-js": "^1.3.0", "next": "9.0.2", "react": "16.8.6", "react-dom": "16.8.6" }, "resolutions": { "css-animation": "1.5.0" }, "devDependencies": { "@zeit/next-less": "^1.0.1", "null-loader": "^3.0.0", "style-loader": "^0.23.1" } }
  
  

Additional context

Add any other context about the problem here.

[d3vhound]

yep, encountering the same problem

[skenan]

same problem here

[enochN]

Tried working on this as my first issue.
So it seems the issue has to do with some dependencies of antd (css-animation, rc-animate, rc-select and rc-table) which make use of the library component-classes@^1.26. This library seems to try to import a dependency indexof which is not declared as a dependency in it's package.json.

Adding "indexof": "0.0.1" to the dependencies of the "with-ant-design" and "with-ant-design-less" example projects helps resolve the issue.

Would that suffice as a solution to this problem?

[skenan]

@enochN did you test on https://github.com/bokuo-okubo/next-with-ant-design-less-failed? I still get the problem：TypeError: (0 , _styleChecker.default) is not a function

[enochN]

So when I go through the step to reproduce, I got two unrelated errors.
First was a failure to resolve react-ssr-prepass. After adding that, there was one error about a failure to resolve styled-components and then the main error in question, failure to resolve indexof.

Since the errors involving react-ssr-prepass and styled-components do not occur in the with-ant-design-less repo, I think it's fair to just add those packages to resolve them and isolate the problem at hand.

Now when I apply my proposed solution of adding the indexof package to the bokuo-okubo's repo, the solution works. You can find my efforts here.

[aaazureee]

@skenan I got the same problem when using ant design with nextjs. I run npm run build locally and it works fine, but when it comes to deployment, the error:

{ TypeError: (0 , _styleChecker.default) is not a function
Aug 26 2019 02:23:11:672 | ...package.json | at Object.g5iu (/tmp/7cfada92/.next/serverless/pages/sculptures.js:34883:55)
Aug 26 2019 02:23:11:672 | ...package.json | at __webpack_require__ (/tmp/7cfada92/.next/serverless/pages/sculptures.js:23:31)
Aug 26 2019 02:23:11:672 | ...package.json | at Object.3PeW (/tmp/7cfada92/.next/serverless/pages/sculptures.js:3357:36)
Aug 26 2019 02:23:11:672 | ...package.json | at __webpack_require__ (/tmp/7cfada92/.next/serverless/pages/sculptures.js:23:31)
Aug 26 2019 02:23:11:672 | ...package.json | at Object.lbd2 (/tmp/7cfada92/.next/serverless/pages/sculptures.js:38572:36)
Aug 26 2019 02:23:11:672 | ...package.json | at __webpack_require__ (/tmp/7cfada92/.next/serverless/pages/sculptures.js:23:31)
Aug 26 2019 02:23:11:672 | ...package.json | at Module.A69P (/tmp/7cfada92/.next/serverless/pages/sculptures.js:7252:18)
Aug 26 2019 02:23:11:672 | ...package.json | at __webpack_require__ (/tmp/7cfada92/.next/serverless/pages/sculptures.js:23:31)
Aug 26 2019 02:23:11:672 | ...package.json | at /tmp/7cfada92/.next/serverless/pages/sculptures.js:91:18
Aug 26 2019 02:23:11:672 | ...package.json | at Object. (/tmp/7cfada92/.next/serverless/pages/sculptures.js:94:10) type: 'TypeError', '$error': '$error' }

occurs to me. Have you found a way to fix this?

[aaazureee]

Update, found out that when I use Typography component, such as Typography.Text (from ant design), this error occurs. I'm not quite sure how to resolve this, which means not being able to use this component entirely.

[enochN]

@aaazureee Could you try adding "indexof": "0.0.1" to your dependencies? Doing that worked for the sample projects I tested with.

[thongdong7]

@enochN I cloned your project and run the build command, the issue TypeError: (0 , _styleChecker.default) is not a function still happen.

The value _styleChecker is {default: {}}.

[enochN]

Oh okay. I must be doing something wrong in my environment then. Will investigate further. Thanks

[aaazureee]

The weird thing is that my npm run build locally is working fine, but when deployed to zeit, the build log shows the error above.

[aaazureee]

Update: I fixed this by using next@canary instead, no more error during deployment build log.

[ZhengYuTay]

Have the same issue with the repo provided. Not entirely sure why Typography from ant design is breaking the build. Removing it will resolve the issue but it's not ideal

[ZhengYuTay]

Just found the solution, at the next.confg.js
Change the regex to
const antStyles = /(antd\/.*?\/style).*(?<![.]js)$/;
then everything will work.
The stylechecker file was being null-loaded and cause problems. The regex make sure to include files that dont end with js extension

[Timer]

Duplicate of #9830