failed to build custom less files in `with-ant-design-less` sample with `target: serverless` #8151

bokuo-okubo · 2019-07-29T00:10:20Z

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

Go to 'https://github.com/bokuo-okubo/next-with-ant-design-less-failed'
yarn
next => working fine
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

{
  "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.

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

d3vhound · 2019-08-06T02:42:55Z

yep, encountering the same problem

skenan · 2019-08-07T00:46:08Z

same problem here

enochN · 2019-08-17T18:19:47Z

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 · 2019-08-23T02:09:18Z

@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 · 2019-08-24T13:38:49Z

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 · 2019-08-25T16:51:13Z

@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 · 2019-08-25T19:36:55Z

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 · 2019-08-25T20:00:37Z

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

thongdong7 · 2019-08-25T22:06:21Z

@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 · 2019-08-25T22:17:26Z

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

aaazureee · 2019-08-26T07:53:02Z

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 · 2019-08-26T11:18:06Z

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

ZhengYuTay · 2019-08-28T18:55:18Z

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

vercel/next.js#8151

ZhengYuTay · 2019-09-03T09:42:43Z

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 · 2020-01-21T13:57:13Z

Duplicate of #9830

Reference: vercel/next.js#8151 (comment)

* create header as a shared component * styling use CSS Grid * move header component to organisms * create hot-it-works page * remove props * add a link button to MainHeader * change link size to large * improve how-it-works page * improve header's css * update information on how-it-works * fix a build error Reference: vercel/next.js#8151 (comment)

Fixes issue when encountering: ```cli > Build error occurred TypeError: (0 , _styleChecker.isStyleSupport) is not a function ``` See: vercel/next.js#8151 (comment)

balazsorban44 · 2022-01-30T15:05:39Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

Timer added good first issue Easy to fix issues, good for newcomers help wanted labels Aug 15, 2019

ZhengYuTay mentioned this issue Aug 29, 2019

fix: Change to arrow function ant-design/ant-design#18541

Merged

10 tasks

afc163 pushed a commit to ant-design/ant-design that referenced this issue Aug 29, 2019

fix next.js serverless error (#18541)

414de6b

vercel/next.js#8151

Timer marked this as a duplicate of #9830 Jan 21, 2020

Timer closed this as completed Jan 21, 2020

aggre added a commit to dev-protocol/stakes.social that referenced this issue May 1, 2020

fix a build error

7f6094d

Reference: vercel/next.js#8151 (comment)

FckYeah mentioned this issue Nov 3, 2020

Make it work serverless SolidZORO/next-plugin-antd-less#11

Closed

sitch mentioned this issue May 5, 2021

Fix for stylechecker null-loader SolidZORO/next-plugin-antd-less#51

Closed

chkim116 mentioned this issue Jun 3, 2021

antd 설정땜시 나는 build 에러 잡기 mecanvas/early-front#55

Merged

DonDebonair mentioned this issue Jul 22, 2021

Build fails with "Internal error". 2 weeks ago everything was fine. aws-amplify/amplify-hosting#2065

Closed

4 tasks

vercel locked as resolved and limited conversation to collaborators Jan 30, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

failed to build custom less files in `with-ant-design-less` sample with `target: serverless` #8151

failed to build custom less files in `with-ant-design-less` sample with `target: serverless` #8151

bokuo-okubo commented Jul 29, 2019 •

edited

Loading

d3vhound commented Aug 6, 2019

skenan commented Aug 7, 2019

enochN commented Aug 17, 2019

skenan commented Aug 23, 2019

enochN commented Aug 24, 2019

aaazureee commented Aug 25, 2019 •

edited

Loading

aaazureee commented Aug 25, 2019

enochN commented Aug 25, 2019

thongdong7 commented Aug 25, 2019

enochN commented Aug 25, 2019 •

edited

Loading

aaazureee commented Aug 26, 2019

aaazureee commented Aug 26, 2019

ZhengYuTay commented Aug 28, 2019

ZhengYuTay commented Sep 3, 2019

Timer commented Jan 21, 2020

balazsorban44 commented Jan 30, 2022

failed to build custom less files in with-ant-design-less sample with target: serverless #8151

failed to build custom less files in with-ant-design-less sample with target: serverless #8151

Comments

bokuo-okubo commented Jul 29, 2019 • edited Loading

Bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

Additional context

d3vhound commented Aug 6, 2019

skenan commented Aug 7, 2019

enochN commented Aug 17, 2019

skenan commented Aug 23, 2019

enochN commented Aug 24, 2019

aaazureee commented Aug 25, 2019 • edited Loading

aaazureee commented Aug 25, 2019

enochN commented Aug 25, 2019

thongdong7 commented Aug 25, 2019

enochN commented Aug 25, 2019 • edited Loading

aaazureee commented Aug 26, 2019

aaazureee commented Aug 26, 2019

ZhengYuTay commented Aug 28, 2019

ZhengYuTay commented Sep 3, 2019

Timer commented Jan 21, 2020

balazsorban44 commented Jan 30, 2022

failed to build custom less files in `with-ant-design-less` sample with `target: serverless` #8151

failed to build custom less files in `with-ant-design-less` sample with `target: serverless` #8151

bokuo-okubo commented Jul 29, 2019 •

edited

Loading

aaazureee commented Aug 25, 2019 •

edited

Loading

enochN commented Aug 25, 2019 •

edited

Loading