fix(nuxt): use bundle for development mode (closes #3397)

[pi0]

Describe the PR

Fixes #3397

PR checklist

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Enhancement
• ARIA accessibility
• Documentation update
• Other (please describe)

Does this PR introduce a breaking change? (check one)

• No
• Yes (please describe)

The PR fulfills these requirements:

• It's submitted to the dev branch, not the master branch
• When resolving a specific issue, it's referenced in the PR's title (i.e. [...] (fixes #xxx[,#xxx]), where "xxx" is the issue number)
• It should address only one issue or feature. If adding multiple features or fixing a bug and adding a new feature, break them into separate PRs if at all possible.
• The title should follow the Conventional Commits naming convention (i.e. fix(alert): not alerting during SSR render, docs(badge): update pill examples, fix typos, chore: fix typo in README, etc). This is very important, as the CHANGELOG is generated from these messages.

If new features/enhancement/fixes are added or changed:

• Includes documentation updates (including updating the component's package.json for slot and event changes)
• New/updated tests are included and passing (if required)
• Existing test suites are passing
• The changes have not impacted the functionality of other components or directives
• ARIA Accessibility has been taken into consideration (Does it affect screen reader users or keyboard only users? Clickable items should be in the tab index, etc.)

If adding a new feature, or changing the functionality of an existing feature, the PR's
description above includes:

• A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

[codecov]

Codecov Report

Merging #3399 into dev will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##              dev    #3399   +/-   ##
=======================================
  Coverage   99.23%   99.23%           
=======================================
  Files         219      219           
  Lines        4186     4186           
  Branches     1215     1215           
=======================================
  Hits         4154     4154           
  Misses         26       26           
  Partials        6        6

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6f0f3fd...9f79df5. Read the comment docs.

[pi0]

Because of the same reason of this change, individual component imports from es/ are not working with nuxt on dev mode :)

[tmorehouse]

Hmmmm.

So we have a new issue now...

[pi0]

Yes. Generally es/ build is broken now. It requires modern tooling for bundling (babel + webpack) and also is pretranspiled to a legacy code :D

[tmorehouse]

We could go back to cjs format for es/, but that would defeat the purpose of have it for tree-shake-ability (specifically when using named exports, as webpack can't tree shake named exports from csj files - not without a plugin, such as https://github.com/indutny/webpack-common-shake).

[pi0]

I think component/level shaking would be possible CJS format as well. (Have to test more) but for users that really need that tree-shaking why not offering to use src/ directly?

[tmorehouse]

Now, if we had named exports in the main index.js file (for all plugins, components and directives), and users imported from import { BAlert } from 'bootstrap-vue', assuming webpack chose "module": "es/index.js" as the import then it would work. But we would need to have separate entry points when defining our different builds: bootstrap-vue.esm.js, bootstrap-vue.js, bootstrap-vue.common.js, and only have the top-level named exports in *.esm.js.

And revert the es/ directory to the old common JS format. for backwards compatibility (if needed)

Then we could point `"module": "dist/bootstrap-vue.esm.js"

[tmorehouse]

The issue with src/ is that people would need to enable babel to whitelist bootstrap-vue/src in their builds so that it get's transpiled.

[tmorehouse]

Currently es/ is babel transpiled using @babel/preset-env with modules: false set. So it is compatible with supported browsers, but still in the ES6 module format (although it is based on BootstrapVue's browserlistrc file)

[tmorehouse]

@pi0 what if the es/ build files had the extension .mjs instead of .js, which would instruct Webpack (v4 at least) to treat the files as ESM modules (so it understands import/export)?

The default extensions for weback are (https://webpack.js.org/configuration/resolve/#resolveextensions):

module.exports = {
  //...
  resolve: {
    extensions: ['.wasm', '.mjs', '.js', '.json']
  }
}

[pi0]

This still does not resolve node-externals problem. Probably we need to add extending whitelist support to Nuxt.js. But still es/ files should not be preferred at least for nuxt users. (I'll come back to you on discord :D)