ssr server not up

[marcelodelta]

I did all the step by step to run an ssr application, but without success.

Could anyone help to know what I'm doing wrong?

config/inertia

export const inertia: InertiaConfig = {
  view: 'app',
  ssr: {
    enabled: true,
    autoreload: process.env.NODE_ENV === 'development',
    allowList: ['@inertiajs/core', '@inertiajs/vue3']
  },
};

resources/js/ssr.js

import { createSSRApp, h } from 'vue';
import { renderToString } from '@vue/server-renderer';
import {createInertiaApp, Link} from '@inertiajs/vue3';

export default function render(page) {
  return createInertiaApp({
    page,
    render: renderToString,
    resolve: (name) => require(`./Pages/${name}`),
    setup({ app, props, plugin }) {
      return createSSRApp({
        render: () => h(app, props),
      }).use(plugin).component('inertia-link', Link);
    },
  });
}

webpack.ssr.config

Encore.enableVueLoader(() => {}, {
  version: 3,
  runtimeCompilerBuild: false,
  useJsx: false,
})

run the commands

node ace serve --watch node ace ssr:watch

The server does not raise an ssr server.

Instead of using ssr.js the server still raises app.js.

Anything I need to do?

[eidellev]

Hi @marcelodelta I suspect the problem is with this line:

  allowList: ['@inertiajs/core', '@inertiajs/vue3']

The allow list is for enabling SSR on specific components only. Simply remove this line and things should start working. Let me know if there are any additional issues.

[marcelodelta]

I removed the line, but when running the server.

export const inertia: InertiaConfig = {
  view: 'app',
  ssr: {
    enabled: true,
    autoreload: process.env.NODE_ENV === 'development'
  },
};

An error is shown when accessing the application

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

package.json

{
  "name": "avozdavitoria",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "node ace serve --watch",
    "build": "node ace build --production",
    "start": "node server.js",
    "test": "node ace test",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
    "format": "prettier .  --write"
  },
  "prettier": {
    "trailingComma": "es5",
    "semi": false,
    "singleQuote": true,
    "useTabs": false,
    "quoteProps": "consistent",
    "bracketSpacing": true,
    "arrowParens": "always",
    "printWidth": 150
  },
  "devDependencies": {
    "@adonisjs/assembler": "^5.9.5",
    "@babel/core": "^7.22.6",
    "@babel/preset-env": "^7.22.6",
    "@japa/preset-adonis": "^1.2.0",
    "@japa/runner": "^2.5.1",
    "@symfony/webpack-encore": "^4.1.1",
    "@types/proxy-addr": "^2.0.0",
    "@types/source-map-support": "^0.5.6",
    "adonis-preset-ts": "^2.1.0",
    "eslint": "^8.44.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-vue": "^9.15.1",
    "pino-pretty": "^10.0.1",
    "prettier": "3.0.0",
    "typescript": "~4.6",
    "vue-loader": "^17.2.2",
    "webpack": "^5.88.1",
    "webpack-cli": "^4.10.0",
    "youch": "^3.2.3",
    "youch-terminal": "^2.2.2"
  },
  "dependencies": {
    "@adonisjs/core": "^5.9.0",
    "@adonisjs/repl": "^3.1.11",
    "@adonisjs/session": "^6.4.0",
    "@adonisjs/shield": "^7.1.1",
    "@adonisjs/view": "^6.2.0",
    "@eidellev/inertia-adonisjs": "^8.0.1",
    "@inertiajs/vue3": "^1.0.9",
    "@vue/server-renderer": "^3.3.4",
    "axios": "^1.4.0",
    "bootstrap": "^5.3.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "proxy-addr": "^2.0.7",
    "reflect-metadata": "^0.1.13",
    "sass": "^1.63.6",
    "sass-loader": "^13.3.2",
    "source-map-support": "^0.5.21",
    "vue": "^3.3.4",
    "webpack-node-externals": "^3.0.0"
  }
}