• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

The Curious Case of Webpack 4 Production Mode and Function.name

Webpack · March 9, 2018

I have migrated over to Webpack 4 for Built With Aurelia and I am using the fantastic Aurelia Store plugin.

During development, everything worked fine, but when I would do a production build the state management aspect would fall apart, complaining about something to do with the function that notifies Redux Dev Tools about the change (what the action name and state value was).

It took a lot of trial and error (a solid day) for me to work out what was going on.

My logic which registers my actions looked like this:

this.store.registerAction(loadProjects.name, loadProjects);

This takes the function name (a string) and uses it as the name of the action being registered. This was to save time creating separate constants or manual string names, it made perfect sense.

It turns out when you enable mode: 'production' in Webpack 4, it uglifies your code using UglifyJS. Unless told otherwise, Uglify will mangle your class and function names but it will not populate the name property on the prototype itself with the newly mangled name, as someone else encountered in this issue.

Inspecting the minified production source code, I could see the action name was provided to the send method was an empty string. This resulted in not only the app breaking but also red errors in the console complaining about the postMessage API and something else ambiguous.

My first instinct was to disable function name mangling and it would have fixed it. However, I just ended up abandoning the idea of using the Function.name value as the name of the action and reverting to using constants as the action name.

const LOAD_PROJECTS = 'loadProjects';

this.store.registerAction(LOAD_PROJECTS, loadProjects);

This is the kind of pattern you see promoted in other state management solutions and it kind of makes sense why you would do it this way.

If you use Function.name in your application regardless of whether or not it’s an Aurelia app, you will encounter this issue with Webpack 4 production mode enabled or even in Webpack 3 with UglifyJS and no explicit mangle settings.

Dwayne

Leave a Reply Cancel reply

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jose Roman
Jose Roman
4 years ago

Thanks for sharing this!

0

Primary Sidebar

Popular

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • How To Mock uuid In Jest
  • How To Decompile And Compile Android APK's On A Mac Using Apktool
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • Wild Natural Deodorant Review

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz