-
Notifications
You must be signed in to change notification settings - Fork 91
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Possible conflict with vue-loader #186
Comments
Not sure, that all seems fine. Does it still happen without the SSR plugins, or if you put the vuetify plugin after all the vue ones? |
Hi @KaelWD, thanks for your reply. I tried some scenarios here: 1 - I commented SSR plugins (client and server) just to see what i got. It was the exactly same error 2 - When i put the vuetify-loader plugin separated in each client and server webpack config (and not at webpack base config), after the SSR plugin, the error still exists: webpack-server-config
webpack-client-config
3 - But when i keep the plugin only at webpack server plugin, at least the bundle process is done without errors but an error occurs at the render process (status 500 with no content on error object) and the application crashes: const render = async (req, res) => {
let html
const context = {
url: req.params['0'] || '/'
}
try {
html = await renderer.renderToString(context)
} catch (error) {
if (error.code === 404) {
return res.status(404).send('404 | Page Not Found')
}
console.log('Error Render: ' + JSON.stringify(error))
return res.status(500).send('500 | Internal Server Error')
}
res.send(html)
} For vuetify-loader scenarios i updated the vuetify plugin config accordingly at my application: // src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts) It leaves me with two questions:
merged server config {
"mode": "development",
"devtool": "inline-source-map",
"devServer": {
"contentBase": "/Users/rafaelmmadeira/projects/vue-webpack/dist",
"clientLogLevel": "trace",
"host": "0.0.0.0"
},
"resolve": {
"extensions": [
".ts",
".js",
".vue"
],
"alias": {
"@": "/Users/rafaelmmadeira/projects/vue-webpack/src",
"@@": "/Users/rafaelmmadeira/projects/vue-webpack"
}
},
"module": {
"rules": [
{
"test": {},
"loader": "vue-loader"
},
{
"test": {},
"loader": "ts-loader",
"options": {
"appendTsSuffixTo": [
{}
]
},
"exclude": {}
},
{
"test": {},
"use": [
"vue-style-loader",
"css-loader"
]
},
{
"test": {},
"type": "asset/resource"
},
{
"test": {},
"type": "asset/resource"
},
{
"test": {},
"exclude": {},
"use": {
"loader": "babel-loader",
"options": {
"presets": [
"@babel/preset-env"
]
}
}
}
]
},
"plugins": [
{
"keys": [
"NODE_ENV",
"VUE_APP_API",
"PORT"
],
"defaultValues": {
"NODE_ENV": "\"development\"",
"VUE_APP_API": "\"http://localhost:8001\"",
"PORT": "\"3001\""
}
},
{},
{
"options": {
"filename": "vue-ssr-server-bundle.json"
}
},
{
"options": {}
}
],
"entry": {
"app": "/Users/rafaelmmadeira/projects/vue-webpack/src/server-entry.js"
},
"target": "node",
"externalsPresets": {
"node": true
},
"externals": [
null
],
"output": {
"libraryTarget": "commonjs2"
}
} merged client config {
"mode": "development",
"devtool": "inline-source-map",
"devServer": {
"contentBase": "/Users/rafaelmmadeira/projects/vue-webpack/dist",
"clientLogLevel": "trace",
"host": "0.0.0.0"
},
"resolve": {
"extensions": [
".ts",
".js",
".vue"
],
"alias": {
"@": "/Users/rafaelmmadeira/projects/vue-webpack/src",
"@@": "/Users/rafaelmmadeira/projects/vue-webpack"
}
},
"module": {
"rules": [
{
"test": {},
"loader": "vue-loader"
},
{
"test": {},
"loader": "ts-loader",
"options": {
"appendTsSuffixTo": [
{}
]
},
"exclude": {}
},
{
"test": {},
"use": [
"vue-style-loader",
"css-loader"
]
},
{
"test": {},
"type": "asset/resource"
},
{
"test": {},
"type": "asset/resource"
},
{
"test": {},
"exclude": {},
"use": {
"loader": "babel-loader",
"options": {
"presets": [
"@babel/preset-env"
]
}
}
},
{
"test": {},
"use": [
{
"loader": "vue-style-loader",
"options": {
"manualInject": true
}
},
"css-loader",
{
"loader": "sass-loader",
"options": {
"implementation": {
"info": "dart-sass\t1.32.13\t(Sass Compiler)\t[Dart]\ndart2js\t2.12.4\t(Dart Compiler)\t[Dart]",
"types": {},
"NULL": {},
"TRUE": {
"value": true
},
"FALSE": {
"value": false
}
},
"sassOptions": {
"indentedSyntax": true
}
}
}
]
}
]
},
"plugins": [
{
"keys": [
"NODE_ENV",
"VUE_APP_API",
"PORT"
],
"defaultValues": {
"NODE_ENV": "\"development\"",
"VUE_APP_API": "\"http://localhost:8001\"",
"PORT": "\"3001\""
}
},
{},
{
"options": {}
},
{
"options": {
"filename": "vue-ssr-client-manifest.json"
}
},
{
"options": {}
}
],
"entry": {
"app": "/Users/rafaelmmadeira/projects/vue-webpack/src/client-entry.js"
},
"output": {
"filename": "[name].[fullhash].bundle.js",
"path": "/Users/rafaelmmadeira/projects/vue-webpack/dist",
"clean": true,
"publicPath": "/"
}
} Thanks, |
My team is having a very similar issue. Our project also has multiple configurations
Locally I added console.log() statements to the vue-loader plugin apply method to see get a better view of what is happening
The ssr_client configuration has the vue rule I set on it, while the ssr_server configuration is getting the rule from |
Thanks for looking in to it, I guess we need to clone the rule before modifying it |
Hello Guys,
i'm setting up a vue ssr with vuetify and webpack from scratch and i'm having trouble when i added vuetify-loader to my webpack configuration. Here is the error:
Although the error is related to vue-loader, everything worked fine until i added vuetify-loader, Thats why i`m suspecting that something is wrong with my vuetify-loader configuration.
Here are my webpack files (base config is merged to both client and server config to generate the respectives bundles)
webpack-base-config:
webpack-server-config:
webpack-cllient-config:
package-json:
Is it possible that vuetify loader is conflicting with vue loader or i'm missing something?
Thanks in advance
The text was updated successfully, but these errors were encountered: