vue.jsvuejs3inertiajsadonis.js

SSR does not run in Adonis Js and Inertia Js


I want to use SSR but an error occurs as follows, if not using SSR application then it runs normally.

I am using adonis Js and Vue Js repository. https://github.com/eidellev/inertiajs-adonisjs

ERRO

require() of ES Module C:\Users\project\software\node_modules\@inertiajs\vue3\dist\index.js from C:\Users\project\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\project\software\node_modules\@inertiajs\vue3\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

inertia/ssr/ssr.js
/*!**********************************!*\
  !*** external "@inertiajs/vue3" ***!
  \**********************************/
/***/ ((module) => {

module.exports = require("@inertiajs/vue3");

/***/ }),

/***/ "@vue/server-renderer":
/*!***************************************!*\

Solution

  • 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'], }), ]