question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Library stop working after webpack bundle it

See original GitHub issue

The library works fine in dev mode in my vue app but will stop working when webpack minify the files to create the dist bundle. To make things working again I’ve added this line chainWebpack: config => config.optimization.minimize(false) to my vue.config.js file, it will disable files minification but will result in worst performances in case of large app. This is the error that is logged in console after the production build of the app is created and the user try to create a zip file

Uncaught TypeError: Cannot read property 'length' of null
    at A (chunk-vendors.64883a9e.js:6)
    at chunk-vendors.64883a9e.js:6
    at Worker.s.onerror (chunk-vendors.64883a9e.js:6)
A @ chunk-vendors.64883a9e.js:6
(anonymous) @ chunk-vendors.64883a9e.js:6
s.onerror @ chunk-vendors.64883a9e.js:6
error (async)
r @ chunk-vendors.64883a9e.js:6
X @ chunk-vendors.64883a9e.js:6
re @ chunk-vendors.64883a9e.js:6
ce @ chunk-vendors.64883a9e.js:6
h @ chunk-vendors.64883a9e.js:6
Ae @ chunk-vendors.64883a9e.js:6
(anonymous) @ write-zip.896bce5d.js:1
u @ chunk-vendors.64883a9e.js:8
(anonymous) @ chunk-vendors.64883a9e.js:8
(anonymous) @ chunk-vendors.64883a9e.js:8
a @ chunk-vendors.64883a9e.js:1
s @ chunk-vendors.64883a9e.js:1
Promise.then (async)
a @ chunk-vendors.64883a9e.js:1
s @ chunk-vendors.64883a9e.js:1
Promise.then (async)
a @ chunk-vendors.64883a9e.js:1
s @ chunk-vendors.64883a9e.js:1
Promise.then (async)
a @ chunk-vendors.64883a9e.js:1
s @ chunk-vendors.64883a9e.js:1
Promise.then (async)
a @ chunk-vendors.64883a9e.js:1
s @ chunk-vendors.64883a9e.js:1
Promise.then (async)
a @ chunk-vendors.64883a9e.js:1
s @ chunk-vendors.64883a9e.js:1
Promise.then (async)
a @ chunk-vendors.64883a9e.js:1
s @ chunk-vendors.64883a9e.js:1
Promise.then (async)
a @ chunk-vendors.64883a9e.js:1
s @ chunk-vendors.64883a9e.js:1
Promise.then (async)
a @ chunk-vendors.64883a9e.js:1
s @ chunk-vendors.64883a9e.js:1
Promise.then (async)
a @ chunk-vendors.64883a9e.js:1
s @ chunk-vendors.64883a9e.js:1
(anonymous) @ chunk-vendors.64883a9e.js:1
(anonymous) @ chunk-vendors.64883a9e.js:1
processFiles @ write-zip.896bce5d.js:1
(anonymous) @ write-zip.896bce5d.js:1
(anonymous) @ chunk-vendors.64883a9e.js:6
Ee @ chunk-vendors.64883a9e.js:6
Re @ chunk-vendors.64883a9e.js:6
t @ chunk-vendors.64883a9e.js:6

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:27 (14 by maintainers)

github_iconTop GitHub Comments

2reactions
101arrowzcommented, Dec 31, 2020

Check v0.4.8 on NPM, which should have fixed the issue for your Chrome extension. Thanks for the bug report and especially for your continued help in debugging!

1reaction
realrecordzLabcommented, Jan 1, 2021

The problem was with the library, not your code, although you did have an unusual use case. The Content Security Policy (CSP) is used to prevent arbitrary code injection and execution from untrusted sources, which can somewhat improve security. Most of the time, I test with a very loose Content Security Policy, which is the default for most environments. However, Chrome extensions are not really allowed to execute anything but their own code, so I had to rewrite one function that used dynamic evaluation to make everything work. I hope the library works well for your codebase!

Not so unusual to see a strict CSP on certain websites nowdays, the update to support CSP is a great think trust me. I will link to the extension repo in my app where this project is used. You did a great job. Thank you!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack bundled library does not compile in React
I'm trying to bundle a standalone library with Webpack (v5) and use it in my React application. The webpack.config.js file is pretty ...
Read more >
Configuring library as external in webpack does not work like ...
I have a custom umd library (mylib) made by myself (bundled with webpack, of course); when I try to consume it in my...
Read more >
Authoring Libraries | webpack
The following guide is meant for library authors looking to streamline their ... Now webpack will bundle a library that can work with...
Read more >
Externals - webpack
The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency ...
Read more >
Output - webpack
When used in tandem with output.library and output. ... This bundle will not work as expected, or not work at all (in the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found