search

surevine / govuk-react-jsx

govuk-frontend compatible React components
https://govuk-react-jsx.netlify.app/
MIT License
3 stars 0 forks source link

Compatibility with Next JS #102

Open dawudr opened 3 years ago

dawudr commented 3 years ago

Build fails when adding project to Next Js app.

require is being used to load an asset file, which is why its return value is typically assigned to a variable: Better to put your image inside your project asset folder or use CDN to store that image and put the fullpath like: https://cdn.com/path/to/image in prop src in tag img.

Next JS doesn't seem to support it, see https://nextjs.org/docs/basic-features/static-file-serving

In your code node_modules/govuk-react-jsx/govuk/template/index.js

var _favicon = _interopRequireDefault(require("govuk-frontend/govuk/assets/images/favicon.ico"));

var _govukMaskIcon = _interopRequireDefault(require("govuk-frontend/govuk/assets/images/govuk-mask-icon.svg"));

var _govukAppleTouchIcon180x = _interopRequireDefault(require("govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-180x180.png"));

var _govukAppleTouchIcon167x = _interopRequireDefault(require("govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-167x167.png"));

var _govukAppleTouchIcon152x = _interopRequireDefault(require("govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-152x152.png"));

var _govukAppleTouchIcon = _interopRequireDefault(require("govuk-frontend/govuk/assets/images/govuk-apple-touch-icon.png"));

var _govukOpengraphImage = _interopRequireDefault(require("govuk-frontend/govuk/assets/images/govuk-opengraph-image.png"));

and prop src from tag img should receive URL, not a module.

Error message text is:-

info  - Creating an optimized production build  
Failed to compile.

./node_modules/govuk-frontend/govuk/assets/images/favicon.ico 1:0
Module parse failed: Unexpected character '' (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
(Source code omitted for this binary file)

> Build error occurred
Error: > Build failed because of webpack errors
    at /govuk-nextjs-example/node_modules/next/dist/build/index.js:15:918
    at async /govuk-nextjs-example/node_modules/next/dist/build/tracer.js:1:1441

See - Next js test project to reproduce: https://github.com/dawudr/govuk-nextjs-example.git

andymantell commented 3 years ago

Thanks @dawudr I'll take a look. It shouldn't be necessary to put the image into the asset folder - this is what the loaders are designed to do which are mentioned in the error message text.

I'll see if I can configure your example app to do it tomorrow. Thanks for making the example app reproducing the error - that's extremely helpful!

andymantell commented 3 years ago

@dawudr I have submitted a pull request against your repository here:

https://github.com/dawudr/govuk-nextjs-example/pull/1

I have tested this and it is now working and loading the images.

Hat tip to @ianhomer who's code I grabbed this from (https://github.com/ianhomer/try-govuk-react-jsx-next/blob/main/services/govuk-react-jsx-next/next.config.js)

What I'm gonna do next time I get a moment is take this repository and flesh it out slightly so it can be used as the main nextjs example for govuk-react-jsx. You aren't the first person to bring this up so I need to have a more ready answer next time!

SamChatfield commented 3 years ago

Hi @andymantell, I've come across this issue when looking at moving one of our applications using govuk-react-jsx to Next.js. I've got everything working great with the Next config mentioned above. However, the only thing I've had to work around is the fact that the Links within this library are the React Router links.

I've worked around it fairly easily for BackLink for now by wrapping BackLink in a Next.js Link and forwarding the href but it's a bit more complex for the other main component with a Link we're using which is Template (Header service name link).

I wondered if you had any thoughts or plans on supporting Next.js Links alongside the React Router ones?

andymantell commented 3 years ago

@SamChatfield I've got virtually zero experience with Next.JS so I'm not sure, but I can try and have a think about it. If you've got any suggestions let me know. One of the assumptions this library makes is that you are using react-router but I think I didn't appreciate how much of an issue that would be when I started.

I wonder whether it can be configured to support both, either by detecting something automatically, or just a "switch" somewhere so the library can be configured to support one or the other.