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.

Bundling with webpack to prod gives me wrong class names

See original GitHub issue

What is the current behavior? Everything works fine in development environment when css is inlined. However, as soon as I bundle my entire app with webpack, places.js class names aren’t properly set :

Part of the result after bundling, where .ap-dropdown-menu class name becomes ap-DROPDOWN_MENU% :

<span class="ap-DROPDOWN_MENU% ap-with-places" role="listbox" id="algolia-places-listbox-0"><div class="ap-DATASET%-places"></div></span>

Happening with suggestions related class names too. Any idea where that might come from?

If that comes from my webpack configuration, I’d be more than happy to provide it to you guys,

Cheers! Hugo

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:12 (7 by maintainers)

github_iconTop GitHub Comments

2reactions
hypervillaincommented, Sep 22, 2017

Hello guys,

I finally managed to reproduce the error this morning! See here : https://github.com/THook/bugPlaces

“Funny” thing is : it’s actually not the bundling which causes the error but the deploy to Netlify.

You will find the 3 different ways to retrieve the bundle in the repo I created and a Netlify url I generated after running npm run build.

Any insight would be greatly appreciated, because I still don’t have any clue about what’s going on

1reaction
hypervillaincommented, Sep 26, 2017

@bobylito, the deployed version had the bug but not anymore it seems. It was verified on several computers and browsers, by different alpha testers including myself! Definitely something I should talk with Netlify. I’ll contact them tomorrow and let you guys know

Read more comments on GitHub >

github_iconTop Results From Across the Web

javascript - Wrong component styles in angular when bundling ...
I am developing a web-app using angular, third-party components and webpack. When i am bundling everything in production mode, ...
Read more >
How I solved and debugged my Webpack issue through trial ...
When webpack bundles your source code, it can become difficult to track down errors and warnings to their original location.
Read more >
Entry Points - webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...
Read more >
An in-depth guide to performance optimization with webpack
The names of the vendor bundles indicate from which application chunk the dependencies were pulled. Since React DOM is only used in the...
Read more >
API - esbuild
Some bundlers such as Webpack try to support this by including all potentially-reachable files in the bundle and then emulating a file system...
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