Level 51
What's your package.json look like? maybe you need to npm update vue-loader
May 16, 2022
8
Level 2
Inertia SSR compile issue with slot Element UI Plus
Stack
- Laravel 9
- Inertia & Inertia SSR
- Jetstream
- Vue 3 with composition Api
- Element plus UI
Issue
Hello everyone! I'm developing a new app to practice the SSR features in Inertia. Everything was going well until I wanted to get some things ready for production :/
The issue is that when I ran npm run prod it compiles my ssr.js
SSR
import { createSSRApp, h } from 'vue';
import { renderToString } from '@vue/server-renderer';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import createServer from '@inertiajs/server';
import route from 'ziggy';
const appName = 'Laravel';
createServer((page) =>
createInertiaApp({
page,
render: renderToString,
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ app, props, plugin }) {
return createSSRApp({ render: () => h(app, props) })
.use(plugin)
.mixin({
methods: {
route: (name, params, absolute) => {
return route(name, params, absolute, {
...page.props.ziggy,
location: new URL(page.props.ziggy.url),
});
},
},
});
},
})
);
Webpack.ssr.mix.js
const mix = require('laravel-mix')
const webpackNodeExternals = require('webpack-node-externals')
mix
.js('resources/js/ssr.js', 'public/js')
.vue({
version: 3,
useVueStyleLoader: true,
options: {
optimizeSSR: true,
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('el-'),
},
},
})
.alias({
'@': 'resources/js',
ziggy: 'vendor/tightenco/ziggy/dist/index',
})
.webpackConfig({
target: 'node',
externals: [webpackNodeExternals()],
})
production": "mix --production --mix-config=webpack.ssr.mix.js && mix --production
and gives me the following error:
Module build failed (from ./node_modules/vue-loader/dist/templateLoader.js): TypeError: Cannot read property 'type' of undefined
I've found the issue and its because I'm using Element UI for my UI components. In this case, I'm using to view my data in a table format. The problem comes when I try to pass scoped data to a template
<el-table :data="artists" style="width: 100%" height="70vh" table-layout="auto">
<el-table-column prop="name" label="Name" />
<el-table-column prop="email" label="Email" />
<el-table-column prop="phone" label="Phone" />
<el-table-column align="right">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
Has anyone encountered this?
Level 2
@MohamedTammam Here it is
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production --mix-config=webpack.ssr.mix.js && mix --production"
},
"devDependencies": {
"@inertiajs/inertia": "^0.11.0",
"@inertiajs/inertia-vue3": "^0.6.0",
"@inertiajs/progress": "^0.2.7",
"@inertiajs/server": "^0.1.0",
"@tailwindcss/aspect-ratio": "^0.4.0",
"@tailwindcss/forms": "^0.5.0",
"@tailwindcss/typography": "^0.5.2",
"@vue/compiler-sfc": "^3.2.31",
"@vue/server-renderer": "^3.2.31",
"axios": "^0.25",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"postcss-import": "^14.0.2",
"tailwindcss": "^3.0.0",
"vue": "^3.2.31",
"vue-loader": "^17.0.0",
"webpack-node-externals": "^3.0.0"
},
"dependencies": {
"@headlessui/vue": "^1.6.0",
"@heroicons/vue": "^1.0.6",
"element-plus": "^2.1.11",
"prettier": "^2.6.2"
}
}
Thanks for replying fast :)
Level 51
@psalcedodev did you run mix --production && mix --production --mix-config=webpack.ssr.mix.js?
Level 2
@MohamedTammam Yes and this is the error I get
ERROR in ./resources/js/Pages/Admin/Artists.vue?vue&type=template&id=654e0644 (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/Admin/Artists.vue?vue&type=template&id=654e0644)
Module build failed (from ./node_modules/vue-loader/dist/templateLoader.js):
TypeError: Cannot read property 'type' of undefined
at genNode (/Users/paulsalcedo/Desktop/FreelanceProjects/garrisontattoowebapp/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2568:18)
at genNode (/Users/paulsalcedo/Desktop/FreelanceProjects/garrisontattoowebapp/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2572:13)
at genNodeList (/Users/paulsalcedo/Desktop/FreelanceProjects/garrisontattoowebapp/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2546:13)
at genNodeListAsArray (/Users/paulsalcedo/Desktop/FreelanceProjects/garrisontattoowebapp/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2531:5)
at genNodeList (/Users/paulsalcedo/Desktop/FreelanceProjects/garrisontattoowebapp/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2543:13)
at genVNodeCall (/Users/paulsalcedo/Desktop/FreelanceProjects/garrisontattoowebapp/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2701:5)
at genNode (/Users/paulsalcedo/Desktop/FreelanceProjects/garrisontattoowebapp/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2593:13)
at genNode (/Users/paulsalcedo/Desktop/FreelanceProjects/garrisontattoowebapp/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2572:13)
at genNodeList (/Users/paulsalcedo/Desktop/FreelanceProjects/garrisontattoowebapp/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2546:13)
at genNodeListAsArray (/Users/paulsalcedo/Desktop/FreelanceProjects/garrisontattoowebapp/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2531:5)
webpack compiled with 1 error
My thought is that <template #default="scope"> is messing up the compiling, but don't know how to fix that.
Level 51
@psalcedodev Please share the code for Pages/Artists.vue
Level 2
@MohamedTammam Here it is
Also, worth mentioning that this only happens whenever I run the production command which compiles the SSR.js
I've tried with composition API and Options API, but its the same result, same error
<script>
import AppLayout from '@/Layouts/AppLayout.vue'
import Welcome from '@/Jetstream/Welcome.vue'
export default {
props: {
artists: {
type: Array,
default: [],
},
},
components: {
AppLayout,
Welcome,
},
data() {
return {
search: '',
}
},
method: {
handleEdit(index, row) {
console.log(index, row)
},
handleDelete(index, row) {
console.log(index, row)
},
},
}
</script>
<template>
<AppLayout title="Artists">
<template #header> Artists </template>
<div v-if="artists" class="tw-max-w-7xl tw-py-12 tw-mx-auto sm:tw-px-6 lg:tw-px-8 tw-shadow-xl sm:tw-rounded-lg">
<div class="tw-bg-white tw-overflow-hidden">
<el-table :data="artists" style="width: 100%" height="70vh" table-layout="auto">
<el-table-column prop="name" label="Name" />
<el-table-column prop="email" label="Email" />
<el-table-column prop="phone" label="Phone" />
<el-table-column align="right">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</AppLayout>
</template>
Level 51
@psalcedodev Is it related to that issue? https://github.com/inertiajs/inertia/issues/171
Level 2
@MohamedTammam I don't think is the same issue. Their issue is passing slots back to the parent Layout, my issue is not compiling the scope slots within the same file. I might try learning a bit more about the webpack ssr or probably will try a tailwind ui table component.
Let me know if you find anything else, thank you for your time, I really appreciate it <3
1 like
Please or to participate in this conversation.