Possible conflict with vue-loader

[rafaelmmadeira]

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:

const base = {
  mode: is.production ? 'production' : 'development',
  devtool: is.production ? 'source-map' : 'inline-source-map',
  devServer: {
    contentBase: distPath,
    clientLogLevel: 'trace',
    host: '0.0.0.0',
    hot: true
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue'],
    alias: {
      '@': posix.resolve('src')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        include: [srcPath]
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource'
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource'
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        },
        exclude: /node_modules/
      },
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new VuetifyLoaderPlugin({
      registerStylesSSR: true
    })
  ]
}

webpack-server-config:

const server = merge(base, {
  entry: {
    app: join(srcPath, 'server-entry.js')
  },
  target: 'node',
  externalsPresets: { node: true },
  externals: [nodeExternals({
    allowlist: /\.css/
  })],
  output: {
    libraryTarget: 'commonjs2'
  },
  plugins: [
    new VueSSRServerPlugin()
  ]
})

webpack-cllient-config:

const client = merge(base, {
  entry: {
    app: join(srcPath, 'client-entry.js')
  },
  output: {
    filename: '[name].bundle.js',
    path: distPath,
    clean: true,
    publicPath: '/'
  },
  module: {
    rules: [

      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader']
      },
      {
        test: /\.s(c|a)ss$/,
        use: [
          {
            loader: 'vue-style-loader',
            options:
          { manualInject: true }
          },
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires >= sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                indentedSyntax: true // optional
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new VueSSRClientPlugin()
  ]
})

package-json:

{
  "name": "vue-webpack",
  "version": "0.0.1",
  "description": "Vue Webpack",
  "main": "server.ts",
  "scripts": {
    "dev": "ts-node -r dotenv/config ./server.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "@types/express": "^4.17.12",
    "@types/webpack-dev-middleware": "^5.0.0",
    "@typescript-eslint/eslint-plugin": "^4.28.1",
    "@typescript-eslint/parser": "^4.28.1",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.6",
    "deepmerge": "^4.2.2",
    "eslint": "^7.29.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^7.12.1",
    "memory-fs": "^0.5.0",
    "sass": "~1.32",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.0.0",
    "ts-loader": "^9.2.3",
    "ts-node": "^10.0.0",
    "typescript": "^4.3.4",
    "vue-loader": "^15.9.7",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.6.14",
    "vuetify-loader": "^1.7.1",
    "webpack": "^5.41.1",
    "webpack-dev-middleware": "^5.0.0",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-merge": "^5.8.0",
    "webpack-node-externals": "^3.0.0"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "vue": "^2.6.14",
    "vue-meta": "^2.4.0",
    "vue-router": "^3.5.2",
    "vue-server-renderer": "^2.6.14",
    "vuetify": "^2.5.6",
    "vuex": "^3.6.2"
  }
}

Is it possible that vuetify loader is conflicting with vue loader or i'm missing something?

Thanks in advance

[KaelWD]

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?

[rafaelmmadeira]

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

{
... others configs
plugins: [
    new VueSSRServerPlugin(),
    new VuetifyLoaderPlugin()
  ]
}

webpack-client-config

{
... others configs
plugins: [
    new VueSSRClientPlugin(),
    new VuetifyLoaderPlugin()
  ]
}

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:

• Does it makes sense using vuetify-loader only at the "server" phase of SSR?

• Printing client and server merged config (below), i can`t see any oneOf rule. Can it be a vue loader only issue?

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,

[pkolenic]

My team is having a very similar issue. Our project also has multiple configurations

• client config
• server config
  If we run them together we get the error, but if we run one config at a time then we don't.

Locally I added console.log() statements to the vue-loader plugin apply method to see get a better view of what is happening

START APPLY -  ssr_client
{ test: /\.vue$/,
  use:
   [ { loader: 'vue-loader' },
     { loader: 'vue-svg-inline-loader' } ] }
END APPLY -  ssr_client
START APPLY -  ssr_server
{ test: /\.vue$/,
  oneOf: [ { resourceQuery: '?', use: [Array] }, { use: [Array] } ] }
Error in: ssr_server
/Users/pkolenic/Projects/wisersaver/node_modules/webpack-cli/bin/cli.js:281
				throw err;
				^

Error: [VueLoaderPlugin Error] vue-loader 15 currently does not support vue rules with oneOf.

The ssr_client configuration has the vue rule I set on it, while the ssr_server configuration is getting the rule from
the vuetifyLoaderPlugin https://github.com/vuetifyjs/vuetify-loader/blob/master/lib/plugin.js#L63

[KaelWD]

Thanks for looking in to it, I guess we need to clone the rule before modifying it