payloadcms / payload

The best way to build a modern backend + admin UI. No black magic, all TypeScript, and fully open-source, Payload is both an app framework and a headless CMS.
https://payloadcms.com
MIT License
21.17k stars 1.28k forks source link

Using svgr webpack with Payload #7008

Closed pcarillion closed 10 hours ago

pcarillion commented 3 days ago

Link to reproduction

No response

Payload Version

v3@beta.56

Node Version

20

Next.js Version

15

Describe the Bug

Use SVGR with webpack as described here https://blog.logrocket.com/import-svgs-next-js-apps/#import-svgs-next-js-using-svgr

Running dev or build fails

`./node_modules/.pnpm/@payloadcms+ui@3.0.0-beta.56_monaco-editor@0.38.0next@15.0.0-rc.0@babel+core@7.24.7_react-d_6btuzme2v3pjqg2bytl3nrltfa/node_modules/@payloadcms/ui/dist/assets/payload-favicon.svg 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

|

Import trace for requested module: ./node_modules/.pnpm/@payloadcms+ui@3.0.0-beta.56_monaco-editor@0.38.0next@15.0.0-rc.0@babel+core@7.24.7_react-d_6btuzme2v3pjqg2bytl3nrltfa/node_modules/@payloadcms/ui/dist/assets/payload-favicon.svg`

Reproduction Steps

Adapters and Plugins

"@svgr/webpack": "^8.1.0"

rilrom commented 2 days ago

Add this whole thing to your next.config.js, this is what resolved it for me.

https://react-svgr.com/docs/next/#usage

paulpopus commented 10 hours ago

Hey @pcarillion can you confirm if the above fixes this issue for you please? I'll close the issue for now unless there's further problems confirmed