How to implement React server Side rendering with Adonisjs

[declaudefrancois]

Hello everyone! I'm trying to implement a server side rendered application with react & AdonisJs but i'm getting errors when i try to do to so like i do with expressJS , i have look on the net and nothing found.\

Bellow my code

1- My Route definition for my react app.

2- The controller action

3- The view

4- React App

5- Index file of the react App

6- The error i get.

7- Then i add "type" = "module" in the package.json file and the Error become:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension "" for /{PROJECT_DIR}/ace

I'm stuck since i've already done a lot of work with adonis JS a can't go back and use express JS. Does someone have any idea of how to to this ?

[WeyIin]

Try using type = module in the script tag.

e.g. <script type="module" src="/js/topics.js"></script>
I had similar problem, added type=module and it worked fine where I am appending the above script tag.

Also look into inertiaJS :)

[declaudefrancois]

Thank you for your answer!
But using type="module" in script tags is about using ES6 module directly inside the browser without to have to compile the code before...

Since the error is thrown when i am trying to import my react app import App from "...{DIR}/APP" inside my controller. I think it's because even if the controllers use ES6 modules (import, export) , they are still commonJS module (nodeJS)... And this is the reason of the errors, and as far as i know solving this problem is done in the package.json by adding type=module but nothing works here...

Perhaps some configurations is required in order to do so, but i don't know how to do, even in the docs...

I will also try to look at inertia , never use that before but i will give it a go.

[thetutlage]

Once you add type: module to package.json, it enforces ES modules on your entire AdonisJS application. However, AdonisJS cannot run with ES modules as of now.

[declaudefrancois]

Yes thanks, I understand now, i thought there was a way.
So to sum it up, i can't render my React app into an Adonis JS app like I did, that's what i understand.

By the way, my choice to render React on the server was because React <BrowserRouter /> didn't work because all requests were handled by the server instead of React Router. So I decided to do server-side rendering.

Currently I am using the <HashRouter /> and it works without problem.