[BUG] Publisher Interface cannot be bunbled with Webpack 4

[seancrowe]

Describe the bug

When trying to bundle a project that has @chili-publish/publisher-interface with Webpack 4.x you receive an error message:

ERROR in ./node_modules/@chili-publish/publisher-interface/lib/PublisherInterface.js 10:32
Module parse failed: Unexpected token (10:32)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| class $0370263bd5c7e7d2$export$a13915682e709c4f {
>     chiliEventListenerCallbacks = new Map();
|     // eslint-disable-next-line @typescript-eslint/no-empty-function
|     constructor(){}
 @ ./src/index.js 5:0-72 16:17-35

If you bundle with Webpack 5.1.0 or higher, you receive no error message

To Reproduce

Steps to reproduce the behavior:

1. Go to https://replit.com/@scrowe/Webpack-4#package.json
2. Run npm run build and see error
3. Change the package.json version of webpack to

    "webpack": "5.1.0",
    "webpack-cli": "^4.10.0"

The only reason we update webpack-cli too, is because the older CLI version does not work with 5.

4.Run npm run build and see no error

Solution

Use Webpack 5 (or other bundler like Parcel, Vite, etc) for you bundling needs.

[seancrowe]

Linked private support ticket:
https://chili-publish.zendesk.com/agent/tickets/6533

[seancrowe]

The Root Cause

The root cause is related to the version of acron used by Webpack 4 to parse the JavaScript. This version does not support certain JavaScript syntax. In the case of this particular error, it is setting public properties of classes.

While you could fix this one error by changing this:

export class PublisherInterface {
  private child!: AsyncMethodReturns<ChiliWrapper>;
  private chiliEventListenerCallbacks: Map<string, (targetId: string) => void> =
      new Map<string, (targetId: string) => void>();

  // eslint-disable-next-line @typescript-eslint/no-empty-function
  private constructor() {
  }

to this:

export class PublisherInterface {
  private child!: AsyncMethodReturns<ChiliWrapper>;
  private chiliEventListenerCallbacks: Map<string, (targetId: string) => void>;

  // eslint-disable-next-line @typescript-eslint/no-empty-function
  private constructor() {
    this.chiliEventListenerCallbacks =
    new Map<string, (targetId: string) => void>();
  }

Only more errors will be thrown by Webpack, because there were a number of "modern" JS syntax used in PublisherInterface.

Reference webpack/webpack#10216, to see issue on Webpack github.

[seancrowe]

Immediate Solutions for Users

Webpack 5

Obviously the easiest solution is to use Webpack 5, which is using acorn version 8.x

Override

If you must stay on Webpack 4 you can use overrides.

If using npm, you can use overrides in your package.json

  "overrides": {
    "acorn": "8.8.1"
  }

If using yarn, you can use resolutions in your package.json

"resolutions": {
    "acorn": "8.8.1"
  }

Potential Solutions from Publisher Interface

If we decide to support Webpack 4, then we will need to either change our code manually or have parcel run it through babel or tsc to remove any modern JS.

I know the manual update of the code would work, but I do not think that is a practical idea - its 2022, this is the reason why all these libraries exists: so we don't have to use JS from the 2000s.

The running of typescript through tsc or babel is possible, but not tested. I have tested running tsc alone, which indeed works. So in theory this should work.

However, there is no consensuses if Webpack 4 should be supported, especially when the fixes for users are very straight forward and it appear the Webpack team no longer support version 4. (Also, Webpack 4 does not work one Node 18 do to changes in standard node library.)