Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack loaders not found when building with next@13.2.1 #46374

Closed
1 task done
LuckeeDev opened this issue Feb 24, 2023 · 17 comments
Closed
1 task done

Webpack loaders not found when building with next@13.2.1 #46374

LuckeeDev opened this issue Feb 24, 2023 · 17 comments
Labels
bug Issue was opened via the bug report template.

Comments

@LuckeeDev
Copy link

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Home
Binaries:
Node: 16.19.0
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 13.2.1
eslint-config-next: 13.1.1
react: 18.2.0
react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://github.com/LuckeeDev/csl

To Reproduce

Install next@13.2.1 and run yarn build web. The error will prevent the build from completing, whereas with next@13.1.6 everything works fine.

Describe the Bug

I get multiple statements like the following when building the project:

Module parse failed: The keyword 'interface' is reserved (4:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders
| import axios from 'axios';
|
> interface TokensResponse {
|       access_token: string;
|       expires_in: number;

Expected Behavior

The build should work without errors.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

@LuckeeDev LuckeeDev added the bug Issue was opened via the bug report template. label Feb 24, 2023
@wescopeland
Copy link

wescopeland commented Feb 24, 2023

Related: #45455

This is a breaking change that shipped with Next.js 13.2.0.

@sabbircste
Copy link

Facing Issue for this version : Module parse failed: Unexpected token (6:5) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

@anonmily
Copy link

Having this issue as well. Tried downgrading to 13.1.16 and was able to build with no errors without changing anything else, so it definitely does seem to be a problem with 13.2...

@luke-h1
Copy link
Contributor

luke-h1 commented Feb 27, 2023

Also having this problem with next@13.2.1 using vanilla extract & the createVanillaExtractPlugin in next.config.js:

./node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.2.0/node_modules/@vanilla-extract/webpack-plugin/extracted.js.webpack[javascript/auto]!=!./node_modules/.pnpm/next@13.2.1_3duxcpitbtplz62feflag7fwby/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/.pnpm/next@13.2.1_3duxcpitbtplz62feflag7fwby/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.2.0/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{"fileName":"src/components/Footer/ThemeSelect/ThemeSelect.css.ts.vanilla.css","source":"Ll8xOW10cGQwIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgZGlzcGxheTogaW5saW5lLWZsZXg7CiAgaGVpZ2h0OiAycmVtOwogIHdpZHRoOiBtaW4tY29udGVudDsKfQouXzE5bXRwZDEgewogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICBkaXNwbGF5OiBncmlkOwogIHBsYWNlLWl0ZW1zOiBjZW50ZXI7CiAgbGVmdDogdmFyKC0temhsN3hnZCk7CiAgdG9wOiAwOwogIHdpZHRoOiB2YXIoLS16aGw3eGdlKTsKICBoZWlnaHQ6IDEwMCU7CiAgcG9pbnRlci1ldmVudHM6IG5vbmU7Cn0KLl8xOW10cGQyIHsKICBib3JkZXI6IDFweCBzb2xpZDsKICBib3JkZXItY29sb3I6IHZhcigtLWNvbG9yLWJvcmRlcik7CiAgcGFkZGluZy10b3A6IHZhcigtLXpobDd4Z2MpOwogIHBhZGRpbmctYm90dG9tOiB2YXIoLS16aGw3eGdjKTsKICBwYWRkaW5nLXJpZ2h0OiBjYWxjKCh2YXIoLS16aGw3eGdkKSAqIDIpICsgdmFyKC0temhsN3hnZSkpOwogIHBhZGRpbmctbGVmdDogY2FsYygodmFyKC0temhsN3hnZCkgKiAyKSArIHZhcigtLXpobDd4Z2UpKTsKICBoZWlnaHQ6IDJyZW07CiAgZm9udC1zaXplOiB2YXIoLS16aGw3eGczKTsKICBib3JkZXItcmFkaXVzOiB2YXIoLS16aGw3eGdtKTsKICB0ZXh0LWFsaWduOiBsZWZ0Owp9Ci5fMTltdHBkMjpmb2N1cyB7CiAgb3V0bGluZTogdHJhbnNwYXJlbnQ7Cn0KLl8xOW10cGQyOmZvY3VzLXZpc2libGUgewogIG91dGxpbmUtd2lkdGg6IDJweDsKICBvdXRsaW5lLXN0eWxlOiBzb2xpZDsKICBvdXRsaW5lLW9mZnNldDogMnB4OwogIG91dGxpbmUtY29sb3I6IHZhcigtLWNvbG9yLW91dGxpbmUpOwp9Ci5fMTltdHBkMyB7CiAgcG9zaXRpb246IGFic29sdXRlOwogIGRpc3BsYXk6IGdyaWQ7CiAgcGxhY2UtaXRlbXM6IGNlbnRlcjsKICByaWdodDogdmFyKC0temhsN3hnZCk7CiAgdG9wOiAwOwogIHdpZHRoOiB2YXIoLS16aGw3eGdlKTsKICBoZWlnaHQ6IDEwMCU7CiAgcG9pbnRlci1ldmVudHM6IG5vbmU7Cn0="}!./node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.2.0/node_modules/@vanilla-extract/webpack-plugin/extracted.js
TypeError: options.postcss is not a function
    at /Users/lukehive/srv/dev/lhowsam.com/node_modules/.pnpm/next@13.2.1_3duxcpitbtplz62feflag7fwby/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js:37:55
    at Span.traceAsyncFn (/Users/lukehive/srv/dev/lhowsam.com/node_modules/.pnpm/next@13.2.1_3duxcpitbtplz62feflag7fwby/node_modules/next/dist/trace/trace.js:79:26)
    at Object.loader (/Users/lukehive/srv/dev/lhowsam.com/node_modules/.pnpm/next@13.2.1_3duxcpitbtplz62feflag7fwby/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js:12:16)

Import trace for requested module:
./node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.2.0/node_modules/@vanilla-extract/webpack-plugin/extracted.js.webpack[javascript/auto]!=!./node_modules/.pnpm/next@13.2.1_3duxcpitbtplz62feflag7fwby/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/.pnpm/next@13.2.1_3duxcpitbtplz62feflag7fwby/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.2.0/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{"fileName":"src/components/Footer/ThemeSelect/ThemeSelect.css.ts.vanilla.css","source":"Ll8xOW10cGQwIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgZGlzcGxheTogaW5saW5lLWZsZXg7CiAgaGVpZ2h0OiAycmVtOwogIHdpZHRoOiBtaW4tY29udGVudDsKfQouXzE5bXRwZDEgewogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICBkaXNwbGF5OiBncmlkOwogIHBsYWNlLWl0ZW1zOiBjZW50ZXI7CiAgbGVmdDogdmFyKC0temhsN3hnZCk7CiAgdG9wOiAwOwogIHdpZHRoOiB2YXIoLS16aGw3eGdlKTsKICBoZWlnaHQ6IDEwMCU7CiAgcG9pbnRlci1ldmVudHM6IG5vbmU7Cn0KLl8xOW10cGQyIHsKICBib3JkZXI6IDFweCBzb2xpZDsKICBib3JkZXItY29sb3I6IHZhcigtLWNvbG9yLWJvcmRlcik7CiAgcGFkZGluZy10b3A6IHZhcigtLXpobDd4Z2MpOwogIHBhZGRpbmctYm90dG9tOiB2YXIoLS16aGw3eGdjKTsKICBwYWRkaW5nLXJpZ2h0OiBjYWxjKCh2YXIoLS16aGw3eGdkKSAqIDIpICsgdmFyKC0temhsN3hnZSkpOwogIHBhZGRpbmctbGVmdDogY2FsYygodmFyKC0temhsN3hnZCkgKiAyKSArIHZhcigtLXpobDd4Z2UpKTsKICBoZWlnaHQ6IDJyZW07CiAgZm9udC1zaXplOiB2YXIoLS16aGw3eGczKTsKICBib3JkZXItcmFkaXVzOiB2YXIoLS16aGw3eGdtKTsKICB0ZXh0LWFsaWduOiBsZWZ0Owp9Ci5fMTltdHBkMjpmb2N1cyB7CiAgb3V0bGluZTogdHJhbnNwYXJlbnQ7Cn0KLl8xOW10cGQyOmZvY3VzLXZpc2libGUgewogIG91dGxpbmUtd2lkdGg6IDJweDsKICBvdXRsaW5lLXN0eWxlOiBzb2xpZDsKICBvdXRsaW5lLW9mZnNldDogMnB4OwogIG91dGxpbmUtY29sb3I6IHZhcigtLWNvbG9yLW91dGxpbmUpOwp9Ci5fMTltdHBkMyB7CiAgcG9zaXRpb246IGFic29sdXRlOwogIGRpc3BsYXk6IGdyaWQ7CiAgcGxhY2UtaXRlbXM6IGNlbnRlcjsKICByaWdodDogdmFyKC0temhsN3hnZCk7CiAgdG9wOiAwOwogIHdpZHRoOiB2YXIoLS16aGw3eGdlKTsKICBoZWlnaHQ6IDEwMCU7CiAgcG9pbnRlci1ldmVudHM6IG5vbmU7Cn0="}!./node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.2.0/node_modules/@vanilla-extract/webpack-plugin/extracted.js
src/components/Footer/ThemeSelect/ThemeSelect.css.ts.vanilla.css!=!./node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.2.0/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{"fileName":"src/components/Footer/ThemeSelect/ThemeSelect.css.ts.vanilla.css","source":"Ll8xOW10cGQwIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgZGlzcGxheTogaW5saW5lLWZsZXg7CiAgaGVpZ2h0OiAycmVtOwogIHdpZHRoOiBtaW4tY29udGVudDsKfQouXzE5bXRwZDEgewogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICBkaXNwbGF5OiBncmlkOwogIHBsYWNlLWl0ZW1zOiBjZW50ZXI7CiAgbGVmdDogdmFyKC0temhsN3hnZCk7CiAgdG9wOiAwOwogIHdpZHRoOiB2YXIoLS16aGw3eGdlKTsKICBoZWlnaHQ6IDEwMCU7CiAgcG9pbnRlci1ldmVudHM6IG5vbmU7Cn0KLl8xOW10cGQyIHsKICBib3JkZXI6IDFweCBzb2xpZDsKICBib3JkZXItY29sb3I6IHZhcigtLWNvbG9yLWJvcmRlcik7CiAgcGFkZGluZy10b3A6IHZhcigtLXpobDd4Z2MpOwogIHBhZGRpbmctYm90dG9tOiB2YXIoLS16aGw3eGdjKTsKICBwYWRkaW5nLXJpZ2h0OiBjYWxjKCh2YXIoLS16aGw3eGdkKSAqIDIpICsgdmFyKC0temhsN3hnZSkpOwogIHBhZGRpbmctbGVmdDogY2FsYygodmFyKC0temhsN3hnZCkgKiAyKSArIHZhcigtLXpobDd4Z2UpKTsKICBoZWlnaHQ6IDJyZW07CiAgZm9udC1zaXplOiB2YXIoLS16aGw3eGczKTsKICBib3JkZXItcmFkaXVzOiB2YXIoLS16aGw3eGdtKTsKICB0ZXh0LWFsaWduOiBsZWZ0Owp9Ci5fMTltdHBkMjpmb2N1cyB7CiAgb3V0bGluZTogdHJhbnNwYXJlbnQ7Cn0KLl8xOW10cGQyOmZvY3VzLXZpc2libGUgewogIG91dGxpbmUtd2lkdGg6IDJweDsKICBvdXRsaW5lLXN0eWxlOiBzb2xpZDsKICBvdXRsaW5lLW9mZnNldDogMnB4OwogIG91dGxpbmUtY29sb3I6IHZhcigtLWNvbG9yLW91dGxpbmUpOwp9Ci5fMTltdHBkMyB7CiAgcG9zaXRpb246IGFic29sdXRlOwogIGRpc3BsYXk6IGdyaWQ7CiAgcGxhY2UtaXRlbXM6IGNlbnRlcjsKICByaWdodDogdmFyKC0temhsN3hnZCk7CiAgdG9wOiAwOwogIHdpZHRoOiB2YXIoLS16aGw3eGdlKTsKICBoZWlnaHQ6IDEwMCU7CiAgcG9pbnRlci1ldmVudHM6IG5vbmU7Cn0="}!./node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.2.0/node_modules/@vanilla-extract/webpack-plugin/extracted.js
./src/components/Footer/ThemeSelect/ThemeSelect.css.ts
./src/components/Footer/ThemeSelect/ThemeSelect.tsx
./src/components/Footer/Footer.tsx

After looking in their next-plugin package it seems that they're using Next.js internals too which explains why it's broken. Seems like this is something for library authors to fix & not a problem with the Next.js package itself

import { lazyPostCSS } from 'next/dist/build/webpack/config/blocks/css';
import { getGlobalCssLoader } from 'next/dist/build/webpack/config/blocks/css/loaders';

@timneutkens
Copy link
Member

Seems NX uses Next.js internals that are not documented and do not fall under any guarantee that they'll exist in the future given that they're not documented and not part of the public api. e.g. importing next/dist/x is a clear marker that internals are being used.
These internals have now changed in 13.2 to allow running the webpack build in a separate worker to further parallelize the build steps across multiple cores, which will be enabled soon for all builds.

@feedthejim
Copy link
Contributor

Note: the vanilla-extract issue seems like a different issue and unrelated to the change in the linked PR, we are investigating it.

@thevisioner
Copy link

Somewhat similar to vanilla-extract-css discussion here: Webpack build error on Next.js 13.2 #1013

@shuding
Copy link
Member

shuding commented Feb 27, 2023

#46490 should fix the vanilla-extract problem. There's also something to add in vanilla-extract side and I'll comment in vanilla-extract-css/vanilla-extract#1013

@karlhorky
Copy link
Contributor

karlhorky commented Feb 27, 2023

Is this also the reason that this StackBlitz reproduction causes a server crash when importing bcrypt in a Route Handler?

Error message:

error - ./node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <!doctype html>
| <html>
| <head>

Import trace for requested module:
./node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html
./node_modules/@mapbox/node-pre-gyp/lib/ sync ^\.\/.*$
./node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js
./node_modules/bcrypt/bcrypt.js
./app/api/route.ts

Seems like bcrypt is trying to import an html file in node-pre-gyp via some import expression... 🤔

Maybe time for configuring the IgnorePlugin to ignore these html files? Edit: that makes this first error go away, but then there are further errors with mock-aws-s3, aws-sdk, nock, npm, etc... kind of like this issue from end of 2021


Edit: I've reported separately, over here:

kodiakhq bot pushed a commit that referenced this issue Feb 27, 2023
Should fix the vanilla-extract issue in #46374.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
@sabbircste
Copy link

Is this solved?

@skaneprime
Copy link

Is this solved?

Not yet. Having trouble to build next 13.2.x in NX 15.7.2

@erikmellum
Copy link

We had to downgrade nextjs for product deployments to 13.1.6 as others have suggested. font-loader-manifest.json was creating an error for us. Sharing for others who search for this issue since it wasn't easy for us to locate and cost us some dev time.

image

@rexwangcc
Copy link

rexwangcc commented Mar 9, 2023

Are there any updates on this? We faced the same issue in the process of upgrading to 13.2.3 and the error trace is still the same as above

Error: Cannot find module '/FOO/.next/server/font-loader-manifest.json'
Require stack:
- /FOO/node_modules/next/dist/server/next-server.js
- /FOO/server.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at mod._resolveFilename (/FOO/node_modules/next/dist/build/webpack/require-hook.js:23:32)
    at Module._load (node:internal/modules/cjs/loader:920:27)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at NextNodeServer.getFontLoaderManifest (/FOO/node_modules/next/dist/server/next-server.js:643:16)
    at new Server (/FOO/node_modules/next/dist/server/base-server.js:74:40)
    at new NextNodeServer (/FOO/node_modules/next/dist/server/next-server.js:69:9)
    at Server.<anonymous> (/FOO/server.js:34:22)
    at Object.onceWrapper (node:events:627:28) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/FOO/node_modules/next/dist/server/next-server.js',
    '/FOO/server.js'
  ]
}

@lucasmerlin
Copy link

nx migrate 15.9.0-beta.2

fixes it for me

https://github.com/nrwl/nx/releases/tag/15.9.0-beta.2 includes nrwl/nx#15650 which should fix this 🎉

@ryandegruyter
Copy link

Tried the upgrade to 15.9.0-beta.2 but it results in different errors:

Attempted import error: 'ReactComponent' is not exported from '../../public/img/logos/alpha.svg' (imported as 'AlphaSvg').

And

info  - Generating static pages (0/45)
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Zc (/Users/.../node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:74:493)

@LuckeeDev
Copy link
Author

I'm closing this issue since it was fixed in nx@15.8.7 thank to this pull request: #15650.

@github-actions
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Apr 20, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Development

No branches or pull requests