Open decoderid opened 1 year ago
I have the same problem with vue3
Could anyone help?
inertia/ssr/ssr.js
/*!**********************************!*\
!*** external "@inertiajs/vue3" ***!
\**********************************/
/***/ ((module) => {
module.exports = require("@inertiajs/vue3");
/***/ }),
/***/ "@vue/server-renderer":
/*!***************************************!*\
require() of ES Module C:\Users\upoa\software\node_modules\@inertiajs\vue3\dist\index.js from C:\Users\upoa\software\inertia\ssr\ssr.js not supported. index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules. Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in C:\Users\upoa\software\node_modules\@inertiajs\vue3\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
It worked using the code below.
webpack.ssr.config.js
// config.externals = [require('webpack-node-externals')()] const nodeExternals = require('webpack-node-externals');
config.externals = [ nodeExternals({ allowlist: ['@inertiajs/core', '@inertiajs/vue3'], }), ]
It worked using the code below.
webpack.ssr.config.js
// config.externals = [require('webpack-node-externals')()] const nodeExternals = require('webpack-node-externals');
config.externals = [ nodeExternals({ allowlist: ['@inertiajs/core', '@inertiajs/vue3'], }), ]
doesn't work in build versionm you can add this in config/intertia.ts for allowlist property
I am also having the same problem. @decoderid solution did not worked for me...
require() of ES Module /home/brlebtag/Projetos/inertiajs/langstown/node_modules/@inertiajs/core/dist/index.js from /home/brlebtag/Projetos/inertiajs/langstown/inertia/ssr/ssr.js not supported.
index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/brlebtag/Projetos/inertiajs/langstown/node_modules/@inertiajs/core/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
err: {
"type": "Error",
"message": "require() of ES Module /home/brlebtag/Projetos/inertiajs/langstown/node_modules/@inertiajs/core/dist/index.js from /home/brlebtag/Projetos/inertiajs/langstown/inertia/ssr/ssr.js not supported.\nindex.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains \"type\": \"module\" which declares all .js files in that package scope as ES modules.\nInstead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change \"type\": \"module\" to \"type\": \"commonjs\" in /home/brlebtag/Projetos/inertiajs/langstown/node_modules/@inertiajs/core/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).\n",
"stack":
Error [ERR_REQUIRE_ESM]: require() of ES Module /home/brlebtag/Projetos/inertiajs/langstown/node_modules/@inertiajs/core/dist/index.js from /home/brlebtag/Projetos/inertiajs/langstown/inertia/ssr/ssr.js not supported.
index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/brlebtag/Projetos/inertiajs/langstown/node_modules/@inertiajs/core/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
at ./node_modules/@inertiajs/react/dist/index.js (/home/brlebtag/Projetos/inertiajs/langstown/inertia/ssr/ssr.js:169:725)
at __webpack_require__ (/home/brlebtag/Projetos/inertiajs/langstown/inertia/ssr/ssr.js:199:41)
at ./resources/js/ssr.tsx (/home/brlebtag/Projetos/inertiajs/langstown/inertia/ssr/ssr.js:77:15)
at __webpack_require__ (/home/brlebtag/Projetos/inertiajs/langstown/inertia/ssr/ssr.js:199:41)
at Object.<anonymous> (/home/brlebtag/Projetos/inertiajs/langstown/inertia/ssr/ssr.js:251:36)
at Inertia.renderSsrPage (/home/brlebtag/Projetos/inertiajs/langstown/node_modules/@eidellev/inertia-adonisjs/build/src/Inertia.js:97:24)
at Inertia.render (/home/brlebtag/Projetos/inertiajs/langstown/node_modules/@eidellev/inertia-adonisjs/build/src/Inertia.js:77:47)
at async PreCompiler.runRouteHandler [as fn] (/home/brlebtag/Projetos/inertiajs/langstown/node_modules/@adonisjs/http-server/build/src/Server/PreCompiler/index.js:44:31)
at async InertiaMiddleware.handle (/home/brlebtag/Projetos/inertiajs/langstown/node_modules/@eidellev/inertia-adonisjs/build/middleware/Inertia.js:10:9)
at async Server.handleRequest (/home/brlebtag/Projetos/inertiajs/langstown/node_modules/@adonisjs/http-server/build/src/Server/index.js:108:13)
"code": "ERR_REQUIRE_ESM",
"status": 500
}
I can't make work Adonis + React + SSR + Inertia. One difference from my configuration to the above is that I can't use require() within .jsx. I am having to use import() instead. Otherwise I got an error before this one.
Hi everyone, I found the solution to my problem and I'd like to share it with everyone.
First of all, @eidellev, Thank you very much for your hard work!
I don't know if it was 'designed' this way or not but I think we need to install @inertiajs/core when we execute node ace configure @eidellev/inertia-adonisjs
.
I think the problem we are experiencing when we are trying to use SSR with adonis is because it is missing @inertiajs/core
package.
Here goes a small tutorial on how to set up adonis project from the begining for React:
Create a new adonis project:
npm init adonis-ts-app@latest adonisssr
Don't forget to select web and yes to 'Configure webpack encore for compiling frontend assets?'
Configure Encore:
node ace configure encore
Install @eidellev/inertia-adonisjs package:
npm i -S @eidellev/inertia-adonisjs
Configure @eidellev/inertia-adonisjs package:
node ace configure @eidellev/inertia-adonisjs
Install the missing @inertiajs/core
package:
npm i -S @inertiajs/core`
Add Inertia middleware to start/kernel.ts:
Server.middleware.register([
() => import('@ioc:Adonis/Core/BodyParser'),
() => import('@ioc:EidelLev/Inertia/Middleware'),
]);
Create ./resources/js/app.jsx and add the following code:
import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'
createInertiaApp({
resolve: (name) => require(./Pages/${name}.jsx
),
setup({ el, App, props }) {
createRoot(el).render(<App {...props} />)
},
})
8. create ./resources/js/ssr.jsx and add the following code:
import React from 'react' import ReactDOMServer from 'react-dom/server' import { createInertiaApp } from '@inertiajs/react'
export default function render(page) {
return createInertiaApp({
page,
render: ReactDOMServer.renderToString,
resolve: (name) => require(./Pages/${name}.jsx
),
setup: ({ App, props }) => <App {...props} />,
})
}
9. Install @babel/preset-react package:
npm i -D @babel/preset-react
10. Enable React presets at `webpack.config.js` AND `webpack.ssr.config.js`
Encore.enableReactPreset()
11. Rename app.js to **app.jsx** at `webpack.config.js`
Encore.addEntry('app', './resources/js/app.jsx')
12. Rename ssr.js to **ssr.jsx** at `webpack.ssr.config.js`
Encore.addEntry('ssr', './resources/js/ssr.jsx')
13. Add `@inertiajs/core` and `@inertiajs/react` to allowlist at `webpack.ssr.config.js`
config.externals = [ require('webpack-node-externals')({ allowlist: ['@inertiajs/core', '@inertiajs/react'], }), ]
Some people complained that you needed to load `require('webpack-node-externals')` to a variable first and then use, like this:
const externals = require('webpack-node-externals') config.externals = [ externals({ allowlist: ['@inertiajs/core', '@inertiajs/react'], }), ]
but for me, both ways worked.
14. Create a **Pages** folder at ./resources/js and inside of it, create a Index.jsx (./resources/js/Pages/Index.jsx) and add the following code:
import React from 'react'
export default function Index({ title }) { return
15. Change **./start/routes.ts** to use inertia and render our recently created page:
Route.get('/', async ({ inertia }) => inertia.render('Index', { title: 'Hello World!' }))
16. Lastly, compile the files using both (in two separated terminals) following commands:
Terminal 1:
npm run dev
Terminal 2:
node ace ssr:watch
And that's all folks. I hope I did not miss anything.
Hi everyone, I found the solution to my problem and I'd like to share it with everyone.
First of all, @eidellev, Thank you very much for your hard work!
I don't know if it was 'designed' this way or not but I think we need to install @inertiajs/core when we execute
node ace configure @eidellev/inertia-adonisjs
.I think the problem we are experiencing when we are trying to use SSR with adonis is because it is missing
@inertiajs/core
package.Here goes a small tutorial on how to set up adonis project from the begining for React:
- Create a new adonis project:
npm init adonis-ts-app@latest adonisssr
Don't forget to select web and yes to 'Configure webpack encore for compiling frontend assets?'
- Configure Encore:
node ace configure encore
- Install @eidellev/inertia-adonisjs package:
npm i -S @eidellev/inertia-adonisjs
- Configure @eidellev/inertia-adonisjs package:
node ace configure @eidellev/inertia-adonisjs
- Install the missing
@inertiajs/core
package:npm i -S @inertiajs/core`
- Add Inertia middleware to start/kernel.ts:
Server.middleware.register([ () => import('@ioc:Adonis/Core/BodyParser'), () => import('@ioc:EidelLev/Inertia/Middleware'), ]);
- Create ./resources/js/app.jsx and add the following code:
import { createInertiaApp } from '@inertiajs/react' import { createRoot } from 'react-dom/client' createInertiaApp({ resolve: (name) => require(`./Pages/${name}.jsx`), setup({ el, App, props }) { createRoot(el).render(<App {...props} />) }, })
- create ./resources/js/ssr.jsx and add the following code:
import React from 'react' import ReactDOMServer from 'react-dom/server' import { createInertiaApp } from '@inertiajs/react' export default function render(page) { return createInertiaApp({ page, render: ReactDOMServer.renderToString, resolve: (name) => require(`./Pages/${name}.jsx`), setup: ({ App, props }) => <App {...props} />, }) }
- Install @babel/preset-react package:
npm i -D @babel/preset-react
- Enable React presets at
webpack.config.js
ANDwebpack.ssr.config.js
Encore.enableReactPreset()
- Rename app.js to app.jsx at
webpack.config.js
Encore.addEntry('app', './resources/js/app.jsx')
- Rename ssr.js to ssr.jsx at
webpack.ssr.config.js
Encore.addEntry('ssr', './resources/js/ssr.jsx')
- Add
@inertiajs/core
and@inertiajs/react
to allowlist atwebpack.ssr.config.js
config.externals = [ require('webpack-node-externals')({ allowlist: ['@inertiajs/core', '@inertiajs/react'], }), ]
Some people complained that you needed to load
require('webpack-node-externals')
to a variable first and then use, like this:const externals = require('webpack-node-externals') config.externals = [ externals({ allowlist: ['@inertiajs/core', '@inertiajs/react'], }), ]
but for me, both ways worked. 14. Create a Pages folder at ./resources/js and inside of it, create a Index.jsx (./resources/js/Pages/Index.jsx) and add the following code:
import React from 'react' export default function Index({ title }) { return <div>{title}</div> }
- Change ./start/routes.ts to use inertia and render our recently created page:
Route.get('/', async ({ inertia }) => inertia.render('Index', { title: 'Hello World!' }))
- Lastly, compile the files using both (in two separated terminals) following commands:
Terminal 1:
npm run dev
Terminal 2:
node ace ssr:watch
And that's all folks. I hope I did not miss anything.
Thanks for sharing, it works very well with JavaScript.
However, as soon as I try to use TypeScript, adding Encore.enableTypeScriptLoader()
to both the webpack.config.js
and the webpack.ssr.config.ts
, ..., I get the following error :
Hello Everyone,
I hope you are all doing well. I don't know if you still a problems with using Inertia with React SSR and Typescript but I have a little project that I am working on and it uses those technologies. If you want to check out for yourself, here's the link to the repo : https://gitlab.com/qkab/learnencore.io
Hope it helps
Hello Everyone,
I hope you are all doing well. I don't know if you still a problems with using Inertia with React SSR and Typescript but I have a little project that I am working on and it uses those technologies. If you want to check out for yourself, here's the link to the repo : https://gitlab.com/qkab/learnencore.io
Hope it helps
Thanks, your project helped me a lot, the main difference for me was using:
npm i -D @babel/preset-typescript
Encore.enableBabelTypeScriptPreset()
#Instead of:
Encore.enableTypeScriptLoader()
Used "jsx": "react
" on tsconfig.json instead of "jsx": "react-jsx"
since it breaks the SSR.
If you want to use react-jsx add the following to webpack.ssr.config.js
const webpack = require('webpack')
Encore.addPlugin(
new webpack.ProvidePlugin({
React: 'react',
})
)
INTRO
I want to use SSR but an error occurs as follows, if not using the SSR application it runs normally
ERROR
ERROR REFERENCE IN node_modules
ssr.jsx
app.jsx
webpack.config.js
webpack.ssr.config.js