CommonJS to ESM Modules

[mtpultz1977]

The use of CommonJS was initially intended for backend development back in the 2009/2010 when initially introduced, but when used on the frontend it prevents proper tree shaking within applications, and can result in large bundle sizes.

Is there roadmap for transition from CommonJS to ESM Modules?

[pooyaj]

@mtpultz1977 @segment/analytics-next supports both CJS and ESM: https://github.com/segmentio/analytics-next/blob/master/packages/browser/package.json#L10-L11 ... are you seeing any issues?

[mtpultz1977]

@pooyaj when using this with Angular you get this warning during builds:

Warning: /Users/xxxxxxxx/Projects/xxxxxxxx/website/workspace/node_modules/@segment/analytics-next/dist/pkg/plugins/routing-middleware/index.js depends on '@segment/tsub'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

It's the reliance on @segment/tsub

[mtpultz1977]

It looks like there are several other dependencies outside of @segment/tsub that all use CommonJS:

1. spark-md5
2. @segment/facade
3. @segment/analytics.js-video-plugins/dist/index.umd.js

Warning: /Users/xxxxxxxx/Projects/xxxxxxxx/website/workspace/node_modules/@segment/analytics-next/dist/pkg/core/events/index.js depends on 'spark-md5'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/xxxxxxxx/Projects/xxxxxxxx/website/workspace/node_modules/@segment/analytics-next/dist/pkg/plugins/ajs-destination/index.js depends on '@segment/facade'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/xxxxxxxx/Projects/xxxxxxxx/website/workspace/node_modules/@segment/analytics-next/dist/pkg/plugins/legacy-video-plugins/index.js depends on '@segment/analytics.js-video-plugins/dist/index.umd.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

[mtpultz1977]

Added an issue to @segment-facade, but not sure where to add an issue for @segment/analytics.js-video-plugins/dist/index.umd.js, and I guess this issue raises the reliance on the spark-md5 third-party dependency.

[joostburg]

We have implemented analytics-next with react context as described in the readme and got an 150kb increased main bundle. That's insane for some simple tracking. When I check bundlephobia you will see an loadLegacySettings export that's 25kb.

[hatton]

I assume this is the issue y'all are discussing, and for my future self. To fix
Module not found: Error: Can't resolve 'spark-md5' in 'C:\dev\lameta\node_modules\@segment\analytics-core\dist\esm\events' with node 16, I had to add "spark-md5" as an explicit dependency.