eidellev / inertiajs-adonisjs

279 stars 17 forks source link

Is there a complete example for ssr #79

Closed fengzi91 closed 2 years ago

fengzi91 commented 2 years ago

I tried the following steps but it never works.

// create project
yarn create adonis-ts-app adonis-inertia-vue

// choice it api
cd adonis-inertia-vue
node ace serve --watch

// is works, show like this `{hello:world}`
// add inertiajs-adonisjs 
yarn add @eidellev/inertia-adonisjs

// add view and session
yarn add @adonisjs/view
yarn add @adonisjs/session

// configure inertiajs-adonisjs
node ace configure @eidellev/inertia-adonisjs

// set ssr `Y` and choice vue3

create resources/js/ssr.js and write this

import { createSSRApp, h } from 'vue';
import { renderToString } from '@vue/server-renderer';
import { createInertiaApp } from '@inertiajs/inertia-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);
    },
  });
}

change webpack.ssr.config.js to enabled vue3

run command

node ace ssr:watch

then

yarn add vue@^3.2.14 vue-loader@^17.0.0 @vue/compiler-sfc --dev

rerun

node ace ssr:watch
// console like this
// 2 files written to inertia/ssr
// webpack compiled successfully

but when run command node ace serve its show this

[ info ]  building project...
[ info ]  starting http server...
[1659787135295] INFO (adonis-vue-inertia-ssr/86597 on xxxdeMac-mini.local): started server on 0.0.0.0:3333
╭────────────────────────────────────────────────────────╮
│                                                        │
│    Server address: http://127.0.0.1:3333               │
│    Watching filesystem for changes: NO                 │
│    Encore server address: http://localhost:8080        │
│                                                        │
╰────────────────────────────────────────────────────────╯
[ encore ] Running webpack-dev-server ...
[ encore ] <i> [webpack-dev-server] Project is running at:
[ encore ] <i> [webpack-dev-server] Loopback: http://localhost:8080/
[ encore ] <i> [webpack-dev-server] On Your Network (IPv4): http://192.168.31.158:8080/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/xxx/ExampleCode/adonis-vue-inertia-ssr/public' directory
[ encore ] assets by status 115 KiB [cached] 1 asset
runtime modules 27.3 KiB 12 modules
orphan modules 18.8 KiB [orphan] 8 modules
cacheable modules 158 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 53.5 KiB
    ./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&reconnect=10 + 8 modules 25.7 KiB [built] [code generated]
    + 3 modules
  modules by path ./node_modules/webpack/hot/*.js 4.3 KiB
    ./node_modules/webpack/hot/dev-server.js 1.59 KiB [built] [code generated]
    + 3 modules
  modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB
    ./node_modules/html-entities/lib/index.js 7.74 KiB [built] [code generated]
    ./node_modules/html-entities/lib/named-references.js 72.7 KiB [built] [code generated]
    + 2 modules
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./node_modules/events/events.js 14.5 KiB [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in main
Module not found: Error: Can't resolve './src' in '/Users/xxx/ExampleCode/adonis-vue-inertia-ssr'
resolve './src' in '/Users/xxx/ExampleCode/adonis-vue-inertia-ssr'
  using description file: /Users/xxx/ExampleCode/adonis-vue-inertia-ssr/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/xxx/ExampleCode/adonis-vue-inertia-ssr/package.json (relative path: ./src)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/xxx/ExampleCode/adonis-vue-inertia-ssr/src doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/xxx/ExampleCode/adonis-vue-inertia-ssr/src.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/xxx/ExampleCode/adonis-vue-inertia-ssr/src.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /Users/xxx/ExampleCode/adonis-vue-inertia-ssr/src.wasm doesn't exist
      as directory
        /Users/xxx/ExampleCode/adonis-vue-inertia-ssr/src doesn't exist

webpack 5.74.0 compiled with 1 error and 1 warning in 1447 ms
fengzi91 commented 2 years ago

tips run command

node ace serve --watch --no-assets

and change file resources/views/app.edge, delete this

 @entryPointStyles('app')
 @entryPointScripts('app')

it works fine