Chrome Extension ChunkLoadErrors - option to package a standalone JS file? about analytics-next HOT 7 CLOSED

@davinsoftware Thanks for opening an issue!

Are you seeing ChunkLoadError on destination bundles (e.g. 3rd party destinations your source is sending data to) or is it just the library chunks (e.g. ajs-destination.js)?

I created a sample repo (forgive the code, this is my 1st attempt at a chrome extension) that uses webpack with react and analytics-next: https://github.com/chrisradek/chrome-extension-analytics-next Hopefully it's not too different for vue!

This seems to load the analytics library and it's split code paths (e.g. ajs-destination.js), but as you mention it isn't able to load 3rd party code.

My dist folder that contains the webpack artifacts includes the chunks from the analytics-next library. Is that what you're seeing as well?

from analytics-next.

I think I only got the ChunkLoadError on ajs-destination.js but I assumed that was because it was the only one it tried to load. I had Segment linked to Amplitude and Variance for destinations, which triggers loading ajs-destination.js because they're considered legacy destinations in the code.

I did have generated chunk files in the dist folder, except that they're in a subdir of that because we run our extension code from a subdirectory one level under the top level dist dir. So ex, our background service_worker is:

    "background":
    {
        "service_worker": "extension/background.js"
    },

and manifest.json lives in the top-level dir (sibling to 'extension' dir). Perhaps that caused the issue with the paths. (in my stack traces there is a '/' slash missing between 'extension' and the file name).

However I've switched to a new approach - I'm now using the Node integration path - analytics-node - because it was one of the methods previously recommended for Chrome extensions and it seems to be entirely standalone with easier packaging.

I also tried using AnalyticsNode of the analytics-next package, and that worked, because it didn't attempt to dynamically load any extra files. But it still generated the chunk files in my dist dir which seemed wasteful since they increase the package size.

It's confusing that there are essentially two Node implementations, and I couldn't determine what the purpose of the analytics-next Node.ts one is (the code has no commenting / documentation). I think the only downside to Analytics-Node (true Node) is that I have to manually assign the anonymous id (and carry it forward it my track() calls)?

from analytics-next.

I have a similar use case where I'm trying to include Segment analytics in a Chrome extension content script. Using AnalyticsBrowser leads to Uncaught ReferenceError: global is not defined error.

from analytics-next.

I have a similar use case where I'm trying to include Segment analytics in a Chrome extension content script. Using AnalyticsBrowser leads to Uncaught ReferenceError: global is not defined error.

This error is going to be fixed in the next version of Analytics, but for now, you can try adding this before loading the script:

<script>
 window.global = window
 var exports = {}
<script>

from analytics-next.

This should be solved now

from analytics-next.

It still emits ajs-destination.js and has ChunkLoadErrors on importing with the most recent version. It looks like it's emitting unnecessary files and I can't get Webpack to override that and force it to output everything into the same bundle.

from analytics-next.

I'm still seeing the above issue as well, any advice on how to proceed here?

from analytics-next.