webpack loader for react

[treboryx]

Hi.

After the new SSR update, I've been getting this error while trying to run React with SSR

ERROR in ./resources/js/ssr.js 10:31
Module parse failed: Unexpected token (10:31)
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
|     render: ReactDOMServer.renderToString,
|     resolve: (name) => require(`./Pages/${name}`),
>     setup: ({ App, props }) => <App {...props} />,
|   })
| }

Any idea what "loader" it's missing? Couldn't find anything appropriate on webpack docs.

[eidellev]

hey @treboryx! you probably need to add the following to your webpack.ssr.config.js:

Encore.enableReactPreset();

Let me know if that worked or not and thanks for opening an issue

[treboryx]

hey @treboryx! you probably need to add the following to your webpack.ssr.config.js:

Encore.enableReactPreset();

Let me know if that worked or not and thanks for opening an issue

An update:

It works with Encore.enableReactPreset(); but only if everything is js/jsx, and even then the styling isn't loaded (I'm using tailwind, postcss enabled with encore)

CSS not being loaded correctly is an issue, however, since my codebase is ts/tsx let's go back to typescript:

With typescript several errors come up and a few of them are:

ERROR in /Users/roberto/Dev/personal/adonis-react/resources/js/ssr.ts
./resources/js/ssr.ts 10:31-49
[tsl] ERROR in /Users/roberto/Dev/personal/adonis-react/resources/js/ssr.ts(10,32)
      TS2769: No overload matches this call.
  Overload 2 of 2, '(options: InertiaAppOptionsForSSR<PageProps>): Promise<CreateInertiaAppSSRContent>', gave the following error.
    Type 'boolean' is not assignable to type 'ReactInstance'.

ERROR in /Users/roberto/Dev/personal/adonis-react/resources/js/ssr.ts
./resources/js/ssr.ts 10:32-35
[tsl] ERROR in /Users/roberto/Dev/personal/adonis-react/resources/js/ssr.ts(10,33)
      TS2749: 'App' refers to a value, but is being used as a type here. Did you mean 'typeof App'?

webpack compiled with 6 errors

[treboryx]

This is my webpack.ssr.config.js

webpack.ssr.config.js.txt

[eidellev]

can you please share your ssr.ts?

[treboryx]

can you please share your ssr.ts?

It's actually copy pasted from the README

[treboryx]

incase you need it anyway

[eidellev]

i think you forgot to enable jsx under the compiler options in your tsconfig.json:

[treboryx]

i think you forgot to enable jsx under the compiler options in your tsconfig.json:

Hi!

I've got that since last time so that's not it.

[eidellev]

I forgot that if you use jsx in typescript the file name needs to end in tsx rather than ts. can you please confirm that this is the issue?

[treboryx]

I forgot that if you use jsx in typescript the file name needs to end in tsx rather than ts. can you please confirm that this is the issue?

❤️ Thanks! Everything works as it should now!