Vue-cli: can't use --modern without html plugin / renaming the files still breaks --modern

[CoolGoose]

Version

3.0.0-rc.3

Reproduction link

https://codepen.io/anon/pen/zaXgNz

Steps to reproduce

https://codepen.io/anon/pen/zaXgNz

What is expected?

Having the modern bundle built.

What is actually happening?

1. --modern doesn't work without the html plugin
2. keeping the html plugin and using node_modules/.bin/vue-cli-service build --modern doesn't generate any 'modern' bundle, only the legacy one

[LinusBorg]

a config file copied into a code pen is not a valid reproduction. Please provide one.

More than two sentences of description would also be helpful to understand what the perceived problem is.

--modern doesn't work without the html plugin

How? What's extpected, what'w happening? if you didn't use html plugin, how did you try and serve the built files to determine that they "don't work"?

[CoolGoose]

@LinusBorg

With the codepen config you need to run node_modules/.bin/vue-cli-service build --modern .
It will error out with _TypeError: Cannot read property 'tapAsync' of undefined_ like on #1331

The thing is that I do want to use the --modern option that creates two bundles, and not the library target that doesn't do that.

As a workaround I can keep the html plugin, just ignoring the generated html, but, since I'm using custom filenames, the Modern bundle isn't generated.

[LinusBorg]

I can see the first problem as the ModernModePlugin we use assumes the html plugin to be present.

But I won't try and replicate your sitution from a config file. Bug reports require runnable code as a reproduction. Those are the rules, I kindly ask you to follow them to keep our workload maintainable.

[CoolGoose]

@LinusBorg I'm confused how the code isn't reproducible.
The current setup is a default vue-cli setup with router, with the codepen config as an overwrite for generating static files. It doesn't use any custom code other than the generated one by vue-cli.

Is there any other way of making it easier for it to reproduce ? Would a git repo with the code be better ?

[LinusBorg]

The current setup is a default vue-cli setup with router,

How am I supposed to know? you didn't provide any information about that.

It doesn't use any custom code other than the generated one by vue-cli.

How am I supposed to be sure? you didn't share the project.

Would a git repo with the code be better ?

Generally, yes. Becaus then we don't have to wonder if you actually provided all the details, which many, many people don't (often accidentally), and hunting this down this eats a lot of time.

All of this is explained in the issue template that you filled out.

But I guess for now I see the problem clearly enough.

[CoolGoose]

@LinusBorg
My bad I assumed it's the base setup and that the explanation was clear. Here's a repo with the exact code https://github.com/CoolGoose/vue-cli-modern-issue

What I was assuming is that even if somebody renames the javascript files, it would still create both bundles.

Let me know if you need any help reproducing it. I understand that it can be a pita to hunt down random bugs.

Thanks

[yyx990803]

That's intended, if you want to use modern mode you must use the HTML plugin. There's no workaround and there's no intention in supporting your desired usage.

[CoolGoose]

Hey @yyx990803 , two things:

1. With the HTML plugin but with custom filenames should modern still work?
2. Would a merge request with the functionality be accepted? Imho generating two files for manual inclusion is in scope of the project.

Thanks

[chasegiunta]

You'd think modern mode would be supported for usage where index generation isn't desired (like on every server rendered site). Not everyone using Vue CLI is writing SPAs.

[LinusBorg]

FYI concerning OP's original request about being able to rename files:

That's now possible by using the process.env.VUE_CLI_MODERN_BUILD env variable which we made part of the public API a while ago:

module.exports = {
  lintOnSave: false,
  assetsDir: assetsDir,

  configureWebpack() {
    const legacy = process.env.VUE_CLI_MODERN_BUILD ? "" : ".legacy";
    return {
      output: {
        filename: assetsDir + `/[name]${legacy}.js`,
        chunkFilename: assetsDir + `/[name]${legacy}.js`
      }
    };
  },

  chainWebpack: config => {
    if (config.plugins.has("extract-css")) {
      const legacy = process.env.VUE_CLI_MODERN_BUILD ? "" : ".legacy";
      const extractCSSPlugin = config.plugin("extract-css");
      extractCSSPlugin &&
        extractCSSPlugin.tap(() => [
          {
            filename: assetsDir + `/[name]${legacy}.css`,
            chunkFilename: assetsDir + `/[name]${legacy}.css`
          }
        ]);
    }
  }
};

If you really want a way to skip the html generation (while simply ignoring it would be easier imho), feel free to work on an implementation and send a PR:

Requirements:

• plugin removable through user webpack config
• does no add another config option to vue.config.js.