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 ExpressJS for Server Side Rendering #107

Closed rhirani1 closed 3 years ago

rhirani1 commented 3 years ago

Hi Similar to Compatibility with NextJS: https://github.com/surevine/govuk-react-jsx/issues/102

We face the same issue where it isn't able to load an image, the application has been created using create-react-app and using babel as the javascript compiler. But we see the below error during runtime:

node_modules/govuk-frontend/govuk/assets/images/govuk-logotype-crown.png:1
�PNG

SyntaxError: Invalid or unexpected token
    at wrapSafe (internal/modules/cjs/loader.js:1053:16)
    at Module._compile (internal/modules/cjs/loader.js:1101:27)
    at Module._extensions..js (internal/modules/cjs/loader.js:1157:10)

Have you seen this issue before for Express Rendering, have also tried using webpack to bundle and transpile it using image loaders or file loaders. However had no luck. Any help would be appreciated.

andymantell commented 3 years ago

Are you able to post a minimal reproduction of the issue? This library works with create-react-app out the box (https://github.com/surevine/govuk-react-jsx-examples) but you mention express - clearly there's something extra going on here. It certainly sounds like a loader issue that should be easily resolved - I just need to see the context of what your app looks like.

If you could strip the app back to the bare minimum "hello world", but demonstrating the bug and stick it in a github repo that would be awesome.

rhirani1 commented 3 years ago

Example: https://github.com/rhirani1/express-govuk-react-jsx

We primarily used this tutorial to render ssr: https://www.pluralsight.com/guides/how-to-partly-server-side-render-in-react

With Babel configuration:

require('ignore-styles')

require('@babel/register')({
  ignore: [/(node_modules)/],
  presets: ['@babel/preset-env', '@babel/preset-react']
})

require('./server')

The current example doesn't use ignore styles such as stylesheets or images, as further on we would get another issue regarding the images in govuk-react-jsx/govuk/template/index.js being an empty object and getting an error such as TypeError: tag[primaryAttributeKey].toLowerCase is not a function


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
andymantell commented 3 years ago

ok that's great thanks, I'll try and find a moment to take a look

andymantell commented 3 years ago

I'm slightly confused - the repository you've linked there seems to work ok for me? I've got a couple of console errors but I think they're unrelated to the issues you're describing.

At what point do you see the errors? What NodeJS version?

rhirani1 commented 3 years ago

We are using node version, v12.18.4

That is weird if it's working for you, are you building then running the app using npm run start-ssr. Should see the errors straight away

andymantell commented 3 years ago

ah no I was running npm start, I'll try the ssr one

daniele-zurico commented 3 years ago

hi there, I got the exact same problem (I'm not using CRA):

/Users/danielezurico/Documents/Projects/defra/mmo-cc-fe/node_modules/govuk-frontend/govuk/assets/images/govuk-logotype-crown.png:1
�PNG

SyntaxError: Invalid or unexpected token
    at wrapSafe (internal/modules/cjs/loader.js:1053:16)
    at Module._compile (internal/modules/cjs/loader.js:1101:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at Module.patchedRequire [as require] (/Users/danielezurico/Documents/Projects/defra/mmo-cc-fe/node_modules/diagnostic-channel/dist/src/patchRequire.js:14:46)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/danielezurico/Documents/Projects/defra/mmo-cc-fe/node_modules/govuk-react-jsx/govuk/components/header/index.js:22:50)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
[nodemon] app crashed - waiting for file changes before starting...
andymantell commented 3 years ago

Hi @daniele-zurico, It's the same problem on the surface but if you aren't using create-react-app, or express, then the solution will be slightly different compared to this ticket. Ultimately it boils down to having your loaders configured correctly in your repository. Can you put together a reproduction in a git repo please and maybe start a new ticket as I don't believe the issue is the same, despite the error looking similar. Thanks!

andymantell commented 3 years ago

@rhirani1 So you're issue is I think because lines like this:

import { Template } from 'govuk-react-jsx';

are compiled and working correctly in your /build output for the frontend - but nothing is doing this same job for the server side version. For the clientside code, webpack and the url-loader plugin are parsing those image imports and stick a file out on disk (See /build/static/media/favicon.abc123.ico). But for the server side ones nothing is doing that because your server side code is looking directly back at the untranspiled copies in node_modules.

99% sure that's you're issue. Just wondering what to actually do about it.

andymantell commented 3 years ago

I've run out of lunchtime now but will continue to mull this over.

In the meantime you could maybe investigate what your options are in terms of running the SSR version from webpack-built copies.

Without wanting to sound dismissive, I don't think this is an issue with the library - just how it's built in this specific express + react + whatever setup. NextJS has a solution for it (as in the ticket you linked to) - we just need to discover what the solution is for your setup.

andymantell commented 3 years ago

@rhirani1 It has occurred to me this morning that a previous iteration of my test suite actually used express in a very similar manner to how you are. In order to achieve this I did in fact compile the server code with webpack using this config:

https://github.com/surevine/govuk-react-jsx/blob/009ab63adabc3e4ae46d63859109dcc36fe0c9a2/tests/utils/webpack.config.js

and then ran the server like this:

"run-test-server": "webpack --config tests/utils/webpack.config.js && node tests/dist/bundled-server.js",

crucially this webpack config has the loaders set up to handle the image and ico files.

Can you give this a try and let me know if this helps? If you don't get anywhere with it I will have a look at lunchtime and see if I can set the example repository up using this webpack config.

andymantell commented 3 years ago

@daniele-zurico unless you are also using express and doing server side rendering, the above suggested fix won't apply to you - we'll need to find a similar solution for whatever your setup is. Feel free to open a separate issue + example repository describing your specific problem.

rhirani1 commented 3 years ago

@rhirani1 It has occurred to me this morning that a previous iteration of my test suite actually used express in a very similar manner to how you are. In order to achieve this I did in fact compile the server code with webpack using this config:

https://github.com/surevine/govuk-react-jsx/blob/009ab63adabc3e4ae46d63859109dcc36fe0c9a2/tests/utils/webpack.config.js

and then ran the server like this:

"run-test-server": "webpack --config tests/utils/webpack.config.js && node tests/dist/bundled-server.js",

crucially this webpack config has the loaders set up to handle the image and ico files.

Can you give this a try and let me know if this helps? If you don't get anywhere with it I will have a look at lunchtime and see if I can set the example repository up using this webpack config.

@andymantell That works! 🥳 Thank you very much, your a ⭐

andymantell commented 3 years ago

ah awesome, glad I could help 😄