[vue ssr]normalizeFile get undefined file

[leekafai]

Version

2.6.6

Reproduction link

https://codepen.io/lkafai/pen/Erpgze

Steps to reproduce

package.json:

"vue": "^2.5.22",
"vue-server-renderer": "^2.6.6"

run command
vue-cli-service build

What is expected?

success render

What is actually happening?

TypeError: Cannot read property 'replace' of undefined
at normalizeFile (/node_modules/_vue-server-renderer@2.6.6@vue-server-renderer/build.dev.js:8998:27)

---

i open the file vue-ssr-client-manifest.json , and found that some id in modules got -1 index

  "modules": {
    "13323344": [
      13,
      14
    ],
    "0b0ba5ab": [
      3,
      15,
      -1,
      16
    ],

and the -1 index not found any file.
so in vue-server-renderer/build.dev.js file,the normalizeFile get undefined , and throw out "Cannot read property 'replace' of undefined"
i have no idea why there is -1 in modules , and file mapping fail, is this a configure problem?
my vue.config.js is writed in codepen , sorry for my poor english

[leekafai]

  css: {
    extract: true,
    sourceMap: false
  }

when i set sourceMap to true ,render success

  css: {
    extract: true,
    sourceMap: true
  }

looks like that no matter where you set in sourceMap,when you create manifest.json, it alway mapping xxx.css.map

[ediaos]

i got same error when enable sourceMap .
in vue-server-render/build.prod.js , getUsedAsyncFiles will throw undefind error.

enable js sourceMap , disable css sourceMap

server render error

enable js and css sourceMap

server render success

disable js and css sourceMap

server render success

[sneko]

Hi @ediaos,

I tried in my vue.config.js :

  productionSourceMap: true,
  css: {
    extract: true,
    sourceMap: true,
  },

and

  productionSourceMap: false,
  css: {
    extract: true,
    sourceMap: false,
  },

but none of them works 😢 do am I doing something wrong?

Thank you,

EDIT: Oups! Sorry! I was just retrying the ssr:start without ssr:build before. My bad! Great news!

[ediaos]

@sneko
if target is ssr node, you can try delete extract
code :

if (TARGET_NODE) {
      const isExtracting = config.plugins.has("extract-css");
      if (isExtracting) {
        // Remove extract
        const langs = ["css", "postcss", "scss", "sass", "less", "stylus"];
        const types = ["vue-modules", "vue", "normal-modules", "normal"];
        for (const lang of langs) {
          for (const type of types) {
            const rule = config.module.rule(lang).oneOf(type);
            rule.uses.delete("extract-css-loader");
            // Critical CSS
            rule
              .use("vue-style")
              .loader("vue-style-loader")
              .before("css-loader");
          }
        }
        config.plugins.delete("extract-css");
      }

AND I WRIETE A PROJECT FOR SSR TEMPLATE vue-cli3-ssr-project

[Zousdie]

@sneko
if target is ssr node, you can try delete extract
code :

if (TARGET_NODE) {
      const isExtracting = config.plugins.has("extract-css");
      if (isExtracting) {
        // Remove extract
        const langs = ["css", "postcss", "scss", "sass", "less", "stylus"];
        const types = ["vue-modules", "vue", "normal-modules", "normal"];
        for (const lang of langs) {
          for (const type of types) {
            const rule = config.module.rule(lang).oneOf(type);
            rule.uses.delete("extract-css-loader");
            // Critical CSS
            rule
              .use("vue-style")
              .loader("vue-style-loader")
              .before("css-loader");
          }
        }
        config.plugins.delete("extract-css");
      }

AND I WRIETE A PROJECT FOR SSR TEMPLATE vue-cli3-ssr-project

I found that the inline style of the SSR injection is duplicated with the extracted css style. So use css-loader/locals instead of css-loader, css-loader/locals will not inject the css file at server.

const langs = ['css', 'postcss', 'scss', 'sass', 'less', 'stylus'];
      const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];

      // disable inline style
      langs.forEach((lang) => {
        types.forEach((type) => {
          const rule = config.module.rule(lang).oneOf(type);
          rule
            .use('vue-style')
            .loader('css-loader/locals')
            .before('css-loader');
          rule.uses.delete('css-loader');
          rule.uses.delete('extract-css-loader');
        });
      });

      // delete MiniCssExtractPlugin
      config.plugins.delete('extract-css');

[sneko]

Hi,

No longer sure but I just saw my source code generated by the SSR is always containing all the style into a <style> ... </style> instead of having a separate CSS style file that can be cached.

Any idea if it comes from the workarounds mentioned before?

Thanks,

[GreenMashimaro]

Check if *.vue file is use eval keyword

[sneko]

@lovetingyuan I upgraded to v0.6.0 and thanks to that I was able to remove a lot of workarounds including the one in this thread.

But I still have all CSS in the source code, do you know why this plugin does not embed it by default? Even with css.extract = true it does not work.

Do you have an example of your vue.config.js integrating mini-css-extract-plugin please? Otherwise will give a try in the week, but dealing with webpack chaining has always been a pain for me haha 🤣

Thank you,

EDIT: @GreenMashimaro I have no eval in my code

EDIT2: @lovetingyuan it seems related to some new activity on Akryum/vue-cli-plugin-ssr#186 and Akryum/vue-cli-plugin-ssr#191

[lovetingyuan]

@sneko I create a complete example for vue ssr at https://github.com/lovetingyuan/vue-ssr-example. You could check it out.