Build creating multiple classes with the same name

[thecaligarmo]

Link to the code that reproduces this issue

https://github.com/thecaligarmo/ngu-idle-calculators

To Reproduce

I've linked my repository that's throwing the error, but not sure if it will show up properly. Basically what's happening, in my 'src/helpers/localStorage.ts' file, I'm importing a bunch of objects. When I do npm run dev everything works perfectly as each class has it's own name. When I build and then start the application (npm run build; npm run start) I get a bunch of errors because a few of my classes are getting renamed to the same name.

As an example, I added the following debugging code in the first useEffect (Line 26) function

        console.log('advTrain', AdvTraining)
        console.log('apitem', APItem)
        console.log( 'beard', Beard)
        console.log('challenge', Challenge)
        console.log('digger', Digger)
        console.log('enemy', Enemy)
        console.log('item', Item)
        console.log('macguff', MacGuffin)
        console.log('game mode',  GameMode)
        console.log('ngu', NGU)
        console.log('perk', Perk)
        console.log('quirk', Quirk)
        console.log('resource', Resource)
        console.log('itemset', ItemSet)
        console.log('stat',  Stat)
        console.log('zone',  Zone)
        console.log('attackstat', AttackStat)
        console.log('bigdecimal', bigDecimal)

I ended up getting the following (I've cut large chunks to make this easier to read)

advTrain class o extends E.Z{updateStats(){for(var e of Object.keys(this.base))"adventureToughness"==this.key||"adventurePower"==this.key?this[e]=this.level**.4*10:"blockDamage"==this.key?this[e]=Math.floor((this.l…
apitem class o extends E.Z{}
beard class r extends o.Z{setPermLevel(e){this.permLevel=e,this.updateStats()}getTempStatValue(e){return a().isUndefined(this[e])?0:this[e].temp}getPermStatValue(e){return a().isUndefined(this[e])?0:this[e].perm…
challenge class o extends E.Z{updateStats(){for(var e of this.statnames)this[e]=this.level*this.base[e];if(this.extraProps)for(var n of this.extraProps)this.level>=n[2]&&(this.statnames.includes(n[0])?this[n[0]]+=n[…
digger class S extends E.Z{setMaxLevel(e){this.maxLevel=e}updateStats(){for(var e of this.statnames)switch(this.key){case o.DROP_CHANCE:case o.WANDOOS:case o.BLOOD:this[e]=150+this.level;break;case o.STAT:this[e]…
enemy class r{attackRate(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;return this.attackStat[e].attackRate}power(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;return this.a…
item class R extends o.Z{updateStats(){for(var e of Object.keys(this.base))this[e]=(1+this.level/100)*this.base[e]}importStats(e){var n=[e.spec1Type.value__,e.spec2Type.value__,e.spec3Type.value__],i=[e.spec1Cu…
macguff class o extends E.Z{updateStats(){}importStats(e){for(var n of Object.keys(this.base))this[n]=e[this.id]}constructor(e,n,i,t){super(e,n,i,a.G.ALL,0,t),this.active=!1}}
game mode {ALL: 4, NORMAL: 0, EVIL: 1, SADISTIC: 2}
ngu class A extends E.Z{isRespawn(){return this.key===l.RESPAWN}importStats(e){this.id>=20?(this.level=e.sadisticLevel.low,this.target=e.sadisticTarget.low):this.id>=10?(this.level=e.evilLevel.low,this.target=…
perk class o extends E.Z{setStat(e,n){this.statnames.includes(e)||(this.statnames.push(e),this.base[e]=n)}setLevel(e){if(this.level=e,94==this.id)switch(this.level){case 1597:case 987:this.setStat(t.k.EXPERIENC…
quirk class o extends E.Z{updateStats(){for(var e of Object.keys(this.base))this[e]=this.level>0?this.base[e]*this.level:0}}
resource class a{setLevel(e){this.level=e,this.updateStats()}updateStats(){for(var e of Object.keys(this.base))this[e]=this.level>0?this.base[e]:0}getStatValue(e){return(arguments.length>1&&void 0!==arguments[1]&&a…
itemset class E{updateStats(e){this.isMaxxed=!1,1===e.inventory.itemList[this.key+"Complete"]&&(this.isMaxxed=!0)}constructor(e,n){this.key=e,this.name=e,this.zone=n instanceof t.Z?[n]:n,this.isMaxxed=!1}}
stat {ATTACK: 'attack', DEFENSE: 'defense', POWER: 'power', TOUGHNESS: 'toughness', MOVE_COOLDOWN: 'moveCooldown', …}
zone class o{setLevel(e){if(this.level=e,0===this.id){var n=1;e>=1150?n=1e4:e>=850?n=5e3:e>=700?n=2e3:e>=450?n=1e3:e>=400?n=500:e>=350?n=200:e>=300?n=100:e>=250?n=50:e>=200?n=20:e>=150?n=10:e>=100?n=5:e>=50&&(n…
attackstat class o{oneHitPower(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:(0,t.bd)(1);return this.hp.divide((0,t.bd)(.8)).divide(e).add(this.toughness.divide((0,t.bd)(2)))}constructor(e,n,i,t,E){t…
bigdecimal ƒ r(e){void 0===e&&(e="0"),this.value=r.validate(e)}

You can see the first two (AdvTraining and APItem) both get mapped to the same object name o. This causes issues as my code no longer knows which object should be used and therefore everything breaks down.

I'm newer to nextjs so I'm not sure if there's a way to disable this (force using object names instead of obfuscating them), but even with obfuscation, two different classes shouldn't have the same name.

Current vs. Expected behavior

When building, multiple classes are named the same name causing issues. When building each class should get a unique name.

Provide environment information

Teste on multiple machines.

MACHINE 1:
Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Thu Jan 11 04:09:03 UTC 2024
Binaries:
  Node: 18.18.2
  npm: 10.2.5
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.3
  eslint-config-next: 14.1.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: standalone

MACHINE 2:
Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Wed Apr  5 15:30:32 EDT 2023
Binaries:
  Node: 20.11.1
  npm: 10.5.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.3
  eslint-config-next: 14.1.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: standalone

Which area(s) are affected? (Select all that apply)

Not sure, Runtime

Which stage(s) are affected? (Select all that apply)

next build (local), next start (local)

Additional context

No response

[icyJoseph]

Hi,

Could you try this out?

module.exports = {
    experimental: {
        serverMinification: false,
        ....
    },
    ....
}

And see if that helps out? Also, you have two next.config files, you probably want to drop one of them.

[thecaligarmo]

I removed the next.config.mjs file (locally) and edited the next.config.js file to be:

module.exports = {
  // ... rest of the configuration.
  output: "standalone",
  experimental: {
      serverMinification: false,
  },
  reactStrictMode: true,
};

It's still minifying from the looks of it as it's still changing the class names to o and such (and thus makes it so the problem is still there). Is this dependent on a particular version of Next? (Mine's showing up as version 14.1.3)

Additional note: I tried the same thing but with using next.config.mjs instead and the same issue. I also checked on 2 different browsers in case it was a cacheing issue and that didn't resolve the issue.

[icyJoseph]

Turn off swcMinify too, that one is at the root of the config, not experimental

[thecaligarmo]

Here's the updated config:

module.exports = {
  // ... rest of the configuration.
  output: "standalone",
  experimental: {
      serverMinification: false,
  },
  reactStrictMode: true,
  swcMinify: false,
};

Unfortunately still getting the same error =/ Again tried on a couple browsers and ran build twice just in case.

Just in case it is a cache thing: Do I need to delete old builds or by running npm run build and then npm run start that should automatically handle old build cleanups and such and only use the most recent build correct?

[thecaligarmo]

I don't know what you mean by default/name exports. You mean in the config file?

[icyJoseph]

I wonder if you could try to set up a reproduction repository? like try to remove as much as possible from the business logic, and just keep the code that breaks

[thecaligarmo]

I tried to remove as much as I could. I'm still getting an error that more than 1 item is being called the same thing. The good thing is that now there's a lot less collisions, but there's still collisions.

To help separate things, I created a new branch:
https://github.com/thecaligarmo/ngu-idle-calculators/tree/test-next

[thecaligarmo]

As an update. using the serverMinification and the swcMinify did nothing, but adding the following:

  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    config.optimization.minimize = false
    return config
  },

made it so minimization was no longer happening and everything is working again. I'm not sure if that means this is no longer a bug or not, but from the looks of other issues, this seems to creep up every so often, so not sure what the best fix is.