Skip to content
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

[vue ssr]normalizeFile get undefined file #9488

Open
leekafai opened this issue Feb 13, 2019 · 6 comments

Comments

@leekafai
Copy link

@leekafai leekafai commented Feb 13, 2019

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

This comment has been minimized.

Copy link
Author

@leekafai leekafai commented Feb 13, 2019

  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

This comment has been minimized.

Copy link

@ediaos ediaos commented Feb 26, 2019

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

This comment has been minimized.

Copy link

@sneko sneko commented Jun 9, 2019

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

This comment has been minimized.

Copy link

@ediaos ediaos commented Jun 9, 2019

@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

This comment has been minimized.

Copy link

@Zousdie Zousdie commented Jun 24, 2019

@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 comment has been minimized.

Copy link

@lovetingyuan lovetingyuan commented Jul 25, 2019

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();
    });
  });
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.