How to get more verbose build output? Only production build fails with TypeError: f.charCodeAt is not a function

[4cm4k1]

Hey everyone!

Recently my prod build started failing with the error message below. I want to try to investigate it more myself, but the line:character number simply refers to the code that throws the error, which doesn't help me much.

So I was wondering, how can I make more verbose build output to debug? Or how else to go about this?

The error only occurs for production builds, including on Vercel. vc dev or next dev work fine, for example.

Thanks!

$ next build
warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.


Creating an optimized production build

Failed to compile.

TypeError: f.charCodeAt is not a function


> Build error occurred
Error: > Build failed because of webpack errors
    at build (/Users/4cm4k1/Code/personal-website/node_modules/next/dist/build/index.js:15:918)

PS: Here is my repo, which is a reproducible case: https://github.com/4cm4k1/personal-website

Update

I managed to get some more output pointing at cssnano-preset-simple as the culprit. I set my resolutions to { "cssnano-preset-simple": "1.1.1" } and the build works. Between v1.1.1 and the latest v1.1.3, the dependencies were switched to nightly versions by @Timer. Might be upstream in cssnano or postcss? Or maybe my code has obsolesced?

$ next build
warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.


(node:18663) UnhandledPromiseRejectionWarning: TypeError: f.charCodeAt is not a function
    at /Users/4cm4k1/Code/personal-website/static/css/432b36672b3b1c7f82ae.css:583:7
    at B.exports (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-preset-simple/dist/index.js:1:929448)
    at new ValueParser (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-preset-simple/dist/index.js:1:663327)
    at ValueParser (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-preset-simple/dist/index.js:1:663351)
    at normalize (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-preset-simple/dist/index.js:1:181915)
    at /Users/4cm4k1/Code/personal-website/node_modules/cssnano-preset-simple/dist/index.js:1:182403
    at /Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:135:18
    at Rule.each (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:101:16)
    at Rule.walk (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:131:17)
    at /Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:148:24
    at AtRule.each (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:101:16)
    at AtRule.walk (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:131:17)
    at /Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:148:24
    at AtRule.each (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:101:16)
    at AtRule.walk (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:131:17)
    at /Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:148:24
    at Root.each (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:101:16)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:18663) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:18663) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Creating an optimized production build

Failed to compile.

TypeError: f.charCodeAt is not a function


> Build error occurred
Error: > Build failed because of webpack errors
    at build (/Users/4cm4k1/Code/personal-website/node_modules/next/dist/build/index.js:15:918)

[jamesmosier]

The issue appears to be coming from this CSS import in your _app.tsx. If you comment this out, it will build:

import '@material/layout-grid/dist/mdc.layout-grid.css';

In particular this sytnax @supports (display: grid) { ... } does not appear to be supported.

[4cm4k1]

Hi James, thanks for the response! Now that you have said that, I see that to use Grid Layout with new versions of Next.js going forward, I'll need to customize my PostCSS/Autoprefixer options: https://nextjs.org/docs/advanced-features/customizing-postcss-config#default-behavior 😄