[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');

[lovetingyuan]

This bug is caused by vue-server-renderer/client-plugin.
Some moduleId in client manifest json file maybe -1.
Because when you disable css sourceMap, css source map files are not included in webpack stats.assets, but they are included in stats.chunks when webpack devtool uses sourcemap.
If you do not want to generate css sourcemap, then you could apply this plugin:

apply(compiler) {
  compiler.hooks.afterEnvironment.tap('fix-missing-source-map', () => {
    compiler.hooks.emit.tapAsync('fix-missing-source-map', (compilation, cb) => {
      let manifest = JSON.parse(
        compilation.assets['vue-ssr-client-manifest.json'].source()
      );
      Object.keys(manifest.modules).forEach(moduleId => {
        manifest.modules[moduleId] = manifest.modules[moduleId].filter(v => v !== -1);
      });
      manifest = JSON.stringify(manifest);
      compilation.assets['vue-ssr-client-manifest.json'] = {
        source() { return manifest; },
        size() { return manifest.length; }
      };
      cb();
    });
  });
}

[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,

[lovetingyuan]

You should use mini-css-extract-plugin in your browser webpack build config.

[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.