search

aurelia / webpack-plugin

A plugin for webpack that enables bundling Aurelia applications.
MIT License
90 stars 36 forks source link

Double inclusion of multiple builds in a package #206

Open rmja opened 2 years ago

rmja commented 2 years ago

I'm submitting a bug report

Please tell us about your environment:

Current behavior: I have created a reproducing example here with a description of the problem. In essence, it seems as if two different builds of a dependency package is included depending on whether e.g.

import { PureAbility } from "@casl/ability";

or

PLATFORM.moduleName("@casl/ability")

is used. That is probably ok, but if both are used, then only one of the two should be actually included. Currently both are included which causes strange bugs, for example when registering an instance in DI with the key PureAbility. The instance is registered with key PureAbility from one build, but is resolved with a different version of PureAbility from another build.

Expected/desired behavior: Only one build should be resolved for any package dependency.

A workaround currently is to use NormalModuleReplacementPlugin like this in the webpack config to force one particular build:

plugins: [
    ...,
    new NormalModuleReplacementPlugin(/^@casl\/ability$/, resolve("./node_modules/@casl/ability/dist/es6m/index.mjs")),
]
bigopon commented 2 years ago

@rmja can you try again with the latest version 5.0.4? Just making sure the issue doesn't get more complicated after that fix.

rmja commented 2 years ago

@bigopon I have upgraded to 5.0.4 and can confirm that it does not fix the issue:

PS C:\Source\double-include> npm outdated

aurelia-webpack-plugin    5.0.3   5.0.4   5.0.4  node_modules/aurelia-webpack-plugin  double-include
PS C:\Source\double-include> npm update

added 1 package, removed 1 package, changed 4 packages, and audited 210 packages in 15s

22 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS C:\Source\double-include> npm run build

> build
> webpack --mode development

Webpack Bundle Analyzer saved report to C:\Source\double-include\dist\report.html
Webpack Bundle Analyzer saved stats file to C:\Source\double-include\dist\stats.json
asset app.js 874 KiB [compared for emit] (name: app)
runtime modules 1.4 KiB 6 modules
modules by path ./node_modules/ 768 KiB
  modules by path ./node_modules/@ucast/ 21.8 KiB
    modules by path ./node_modules/@ucast/mongo/dist/ 5.67 KiB 2 modules
    modules by path ./node_modules/@ucast/js/dist/ 5.66 KiB 2 modules
    modules by path ./node_modules/@ucast/mongo2js/dist/ 2.19 KiB 2 modules
    modules by path ./node_modules/@ucast/core/dist/ 8.28 KiB 2 modules
  modules by path ./node_modules/aurelia-webpack-plugin/runtime/*.js 2.17 KiB
    ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js 595 bytes [built] [code generated]
    ./node_modules/aurelia-webpack-plugin/runtime/pal-loader-entry.js 1.59 KiB [built] [code generated]
  modules by path ./node_modules/@casl/ability/dist/ 16.5 KiB
    ./node_modules/@casl/ability/dist/es6m/index.mjs 8.23 KiB [built] [code generated]
    ./node_modules/@casl/ability/dist/es6c/index.js 8.27 KiB [built] [code generated]
  + 23 modules
./src/main.ts 309 bytes [built] [code generated]
webpack 5.72.0 compiled successfully in 4726 ms
PS C:\Source\double-include>

As can be seen it seems that both builds are still included in the bundle.

rmja commented 1 year ago

Ping. This issue is still present in version 5.0.5.

bigopon commented 1 year ago

this is what I got image

It seems using Webpack.Dependency.EXPORTS_OBJECT_REFERENCED somehow introduced this issue of

cjs self exports reference null ./node_modules/@casl/aurelia/dist/umd/index.js 1:72-79 
cjs self exports reference null ./node_modules/@casl/aurelia/dist/umd/index.js 1:337-341

Will investigate further. Thanks for the repo @rmja

bigopon commented 1 year ago

My current analysis is this line https://github.com/aurelia/webpack-plugin/blob/663b24d780a1e05f746e370ea149737ffb87a785/src/AureliaDependenciesPlugin.ts#L43 maybe the issues. It's adding the umd version of the module instead of the esm version of it. I'm not sure why it's doing such. If you add these lines to the config, you'll see quite clear what's being imported in

    stats: {
      reasons: true,
      modules: true,
    },
bigopon commented 1 year ago

@alexander-akait thanks for your help with the other issue. Can I also please have some help on this one? Currently, for the following block of code

import { Ability, PureAbility } from "@casl/ability";
import { Aurelia, PLATFORM } from "aurelia-framework";

export async function configure(aurelia: Aurelia) {
  aurelia.use.plugin(PLATFORM.moduleName("@casl/aurelia"));
  aurelia.use.instance(PureAbility, new AppAbility());
}

class AppAbility extends Ability {}

We have this build output image

You can see that the following 2 lines

import { Ability, PureAbility } from "@casl/ability";
...
  aurelia.use.plugin(PLATFORM.moduleName("@casl/aurelia"));

are pulling different files in:

There' 2 different module formats being used:

Is there a way to tell webpack to resolve PLATFORM.moduleName the same way with import?