vue-loader@15.0.0-rc.1 in a server bundle

[o-alexandrov]

Version

15.0.0-beta.1

Reproduction link

webpack-contrib/mini-css-extract-plugin#90 (comment)

Steps to reproduce

Two options:

1. Using css-loader/locals:

module: {
  rules: [
    {
      test: /\.scss$/,
      include: includePaths,
      use: [
        "css-loader/locals",
        {
          loader: "sass-loader",
          options: { includePaths: ["node_modules"] },
        },
      ],
    },
    {
      test: /\.(styl|stylus)$/,
      use: [
        "css-loader/locals",
        "stylus-loader", //
      ],
    },
  ],
},

2. Using a null-loader:

module: {
  rules: [
    {
      test: /(\.css|.\scss|\.stylus|\.styl)$/,
      loader: "null-loader",
    },
  ],
},

What is expected?

The config above is for the Node.js server bundle.
I omit the vue-loader and other loaders as they are irrelevant here.

Null-loader is expected to work properly, excluding styles from the bundle.
Instead, I ended up using the first option above => css-loader/locals.

What is actually happening?

This is the error message that I receive when using null-loader, please refer to option two above:

ERROR in ./src/app/PageServerError.vue?vue&type=style&index=0&lang=stylus (./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/null-loader!./node_modules/vue-loader/lib??vue-loader-options!./src/app/PageServerError.vue?vue&type=style&index=0&lang=stylus)
Module build failed: CssSyntaxError: /project/src/app/PageServerError.vue:1:1: Unknown word
    at Input.error (/project/node_modules/postcss/lib/input.js:119:22)
    at Parser.unknownWord (/project/node_modules/postcss/lib/parser.js:506:26)
    at Parser.other (/project/node_modules/postcss/lib/parser.js:171:18)
    at Parser.parse (/project/node_modules/postcss/lib/parser.js:84:26)
    at parse (/project/node_modules/postcss/lib/parse.js:24:16)
    at new LazyResult (/project/node_modules/postcss/lib/lazy-result.js:70:24)
    at Processor.process (/project/node_modules/postcss/lib/processor.js:117:12)
    at compileStyle (/project/node_modules/@vue/component-compiler-utils/dist/compileStyle.js:29:35)
    at Object.module.exports (/project/node_modules/vue-loader/lib/loaders/stylePostLoader.js:9:33)
 @ ./src/app/PageServerError.vue?vue&type=style&index=0&lang=stylus 1:17-250
 @ ./src/app/PageServerError.vue
 @ ./src/app/entry-error.js

[JounQin]

You can safely use vue-style-loader with css-loader like vuejs/vue-hackernews-2.0#302 .

[o-alexandrov]

@JounQin,
With css-loader, you will end up having css in your server bundle, whereas with css-loader/locals, you would have only css classes.

Therefore, it's definitely not the right way to proceed.

Could anyone please suggest a way how to use null-loader or explain why it doesn't work without using CSS modules, which require the use of css-loader/locals?

[yyx990803]

That's the point: you need to have CSS in your SSR bundle for critical CSS inference, unless you are extracting all CSS (including those from async chunks) in the client build.

[o-alexandrov]

@yyx990803 thank you for the attention.

1. I have thought vue-loader@15+ moves the style modules handling to the actual rules of the file extensions.
2. I use MiniCssExtractPlugin on the client-side build to extract most of the styles traces, probably leaving module references in the bundle, whereas null-loader completely removes styles modules from the bundle.

I apologize, I haven't observed vue-server-renderer and vue-loader, so I'm only reporting actual usage results.

[o-alexandrov]

@yyx990803 thank you very much!
I tested the new changes by installing vue-loader from github:

npm i -D vuejs/vue-loader#next

And now the rules for styles successfully build:

      module: {
        rules: [
          {
            test: /\.(css|scss|stylus|styl)$/,
            loader: "null-loader",
          }
        ]
      }

[tiagomatosweb]

@o-alexandrov did you find any solution? I'm facing the same here. If a build without css everything works fine, but if I add css into js, yeah SSR get trouble.

[jiyarong]

same problem for me, add css into js, server side rendering has a error with 'document is not defined'

nice, it solves the problem I'm having