Build fails with latest versions of sass and node-sass in conjuction with sass-loader

[silverbackdan]

Locally, I can build my Nuxt application with issues. However, I updated dependencies which resulted in sass upgrading from 1.44 to 1.45. This caused an issue in the build.

FATAL  Nuxt build error
--
17:49:44.987 |  
17:49:44.987 | ERROR in node_modules/@types/sass-loader/interfaces.d.ts
17:49:44.987 | ERROR in node_modules/@types/sass-loader/interfaces.d.ts(410,43):
17:49:44.987 | 410:43 Generic type 'Options<sync>' requires 1 type argument(s).
17:49:44.987 | 408 \|     type Callback<T> = (loaderContext: Webpack.loader.LoaderContext) => T;
17:49:44.988 | 409 \|
17:49:44.988 | > 410 \|     type SassOptions = NodeSass.Options \| Sass.Options;
17:49:44.988 | \|                                           ^
17:49:44.988 | 411 \| }
17:49:44.988 | 412 \|

I tried installing node-sass instead of sass and the same issue happened. I isolated the problem by reverting sass to 1.44. 1.45 was released 10 days ago.

I'm not sure which version of node-sass I would need to use to prevent this issue.

As the problem does not happen when I build locally, I wonder if the issue is with the Vercel builder? In my config I also tried updating to use Node 14.x instead of 12.x (and have kept that change now as it matches my local version in dev).

I'm sorry if the issue does not relate to the builder, but I'm unsure why I couldn't replicate this issue outside of the Vercel build.

[danielroe]

Would you provide a reproduction? 🙏 I think it's likely this is to do wtih your dependencies rather than this builder.

[silverbackdan]

Sure, I'll do my best to get this shortly. Perhaps... I've certainly isolated it so that the issue only happens when sass version is updated to >=1.45 and my local build works still.

For completeness and so I can refer back too, this is the full error log.

----------------- Nuxt build -----------------
--
10:43:30.348 | Running nuxt build --standalone --no-lock --config-file "nuxt.config.js" /vercel/path1/pwa
10:44:14.340 |  
10:44:14.340 | FATAL  Nuxt build error
10:44:14.340 |  
10:44:14.340 | ERROR in node_modules/@types/sass-loader/interfaces.d.ts
10:44:14.341 | ERROR in node_modules/@types/sass-loader/interfaces.d.ts(410,43):
10:44:14.341 | 410:43 Generic type 'Options<sync>' requires 1 type argument(s).
10:44:14.341 | 408 \|     type Callback<T> = (loaderContext: Webpack.loader.LoaderContext) => T;
10:44:14.341 | 409 \|
10:44:14.341 | > 410 \|     type SassOptions = NodeSass.Options \| Sass.Options;
10:44:14.341 | \|                                           ^
10:44:14.341 | 411 \| }
10:44:14.341 | 412 \|
10:44:14.341 |  
10:44:14.342 | ERROR in node_modules/sass/types/legacy/function.d.ts
10:44:14.342 | ERROR in node_modules/sass/types/legacy/function.d.ts(132,17):
10:44:14.342 | 132:17 A rest element must be last in a tuple type.
10:44:14.342 | 130 \|   \| ((
10:44:14.342 | 131 \|       this: LegacyPluginThis,
10:44:14.342 | > 132 \|       ...args: [...LegacyValue[], LegacyAsyncFunctionDone]
10:44:14.342 | \|                 ^
10:44:14.342 | 133 \|     ) => void);
10:44:14.342 | 134 \|
10:44:14.343 | 135 \| /**
10:44:14.343 |  
10:44:14.347 |  
10:44:14.347 | ╭─────────────────────────────╮
10:44:14.347 | │                             │
10:44:14.347 | │   ✖ Nuxt Fatal Error        │
10:44:14.348 | │                             │
10:44:14.348 | │   Error: Nuxt build error   │
10:44:14.348 | │                             │
10:44:14.350 | ╰─────────────────────────────╯
10:44:14.350 |  
10:44:14.394 | Error: Command failed with exit code 1: npx nuxt build --standalone --no-lock --config-file "nuxt.config.js" /vercel/path1/pwa
10:44:14.394 | at makeError (/vercel/af71790342b6cc21/.build-utils/.builder/node_modules/execa/lib/error.js:60:11)
10:44:14.394 | at handlePromise (/vercel/af71790342b6cc21/.build-utils/.builder/node_modules/execa/index.js:118:26)
10:44:14.394 | at processTicksAndRejections (internal/process/task_queues.js:95:5)
10:44:14.394 | at async Object.build (/vercel/af71790342b6cc21/.build-utils/.builder/node_modules/@nuxtjs/vercel-builder/lib/index.js:347:3)
10:44:14.394 | at async btt (/var/task/sandbox.js:194:8824) {
10:44:14.395 | shortMessage: 'Command failed with exit code 1: npx nuxt build --standalone --no-lock --config-file "nuxt.config.js" /vercel/path1/pwa',
10:44:14.395 | command: 'npx nuxt build --standalone --no-lock --config-file "nuxt.config.js" /vercel/path1/pwa',
10:44:14.395 | escapedCommand: 'npx nuxt build --standalone --no-lock "--config-file \\"nuxt.config.js\\"" "/vercel/path1/pwa"',
10:44:14.395 | exitCode: 1,
10:44:14.395 | signal: undefined,
10:44:14.395 | signalDescription: undefined,
10:44:14.395 | stdout: undefined,
10:44:14.395 | stderr: undefined,
10:44:14.396 | failed: true,
10:44:14.396 | timedOut: false,
10:44:14.396 | isCanceled: false,
10:44:14.396 | killed: false
10:44:14.396 | }

[silverbackdan]

By the way, this is the full application with the issue, I'll work on a minimal repro as soon as I'm able, but just in case there is something in the package.json that stands out as an issue in the pwa dir.

Thanks
https://github.com/components-web-app/components-web-app
https://github.com/components-web-app/components-web-app/blob/main/pwa/package.json