TypeError: Cannot convert a Symbol value to a string when making production build

[ariataylor96]

Intended outcome:

I am able to compile my NextJS or other React project while NODE_ENV=production.

Actual outcome:

I receive the following error:

TypeError: Cannot convert a Symbol value to a string
    at b (/code/node_modules/mobx/dist/mobx.cjs.production.min.js:1:1455)
    at n.i.O (/code/node_modules/mobx/dist/mobx.cjs.production.min.js:1:40579)
    at Function.q [as u] (/code/node_modules/mobx/dist/mobx.cjs.production.min.js:1:5046)
    at n.i.u (/code/node_modules/mobx/dist/mobx.cjs.production.min.js:1:39408)
    at s (/code/node_modules/mobx/dist/mobx.cjs.production.min.js:1:46570)
    at Array.forEach (<anonymous>)
    at exports.makeAutoObservable (/code/node_modules/mobx/dist/mobx.cjs.production.min.js:1:46618)
    at new config_ConfigStore (/code/.next/server/pages/_app.js:195:49)
    at new stores_RootStore (/code/.next/server/pages/_app.js:211:19)
    at Object.sYqq (/code/.next/server/pages/_app.js:223:15)
    at __webpack_require__ (/code/.next/server/pages/_app.js:23:31)
    at Module.1TCz (/code/.next/server/pages/_app.js:113:72)
    at __webpack_require__ (/code/.next/server/pages/_app.js:23:31)
    at Object.0 (/code/.next/server/pages/_app.js:99:18)
    at __webpack_require__ (/code/.next/server/pages/_app.js:23:31)
    at /code/.next/server/pages/_app.js:91:18
ierror Command failed with exit code 1.

How to reproduce the issue:

I've created a minimal example repository on GitHub that exhibits this behavior here: https://github.com/markrawls/mobx-symbol-error-example

If you manually downgrade MobX to 6.0.5 or 6.0.4, it works as expected. If you forcibly set NODE_ENV=development (or any non production string) for the build process, the build completes as expected. This is obviously suboptimal as we want to produce a production bundle.

Versions

The exclusively effects MobX 6.1.0. Downgrading to 6.0.4 or 6.0.5 resolves this issue.

[zhangchao828]

+1
use toJS

[urugator]

Found the problem, mobx includes parameters in minified errors like this: args.join(",") ... so [Symbol()].join(",") fails with the mentioned TypeError

[mweststrate]

Released as 6.1.1 (well, in ~30 minutes that is if CI succeeds)

[cnLawrie]

It works
{ "mobx": "6.0.3", "next": "10.0.4" }

[Tarpsvo]

Still the exact same issue in 6.1.6.

[urugator]

@Tarpsvo There is a test, so it's unlikely to be exactly the same issue. Can you provide a reproduction?

[Tarpsvo]

I tried to create a minimum reproducible repo, but can't reproduce it outside of the main project. (Yes, I have rm -rf node_modules package-lock.json && npm i).

From my debugging, this seems to happen:

1. makeAutoObservable(this) is called in the store class constructor.
2. This bit runs:

   mobx/packages/mobx/src/api/makeObservable.ts

   Lines 66 to 69 in 248e25e

   	// Use cached inferred annotations if available (only in classes)
   	if (target[inferredAnnotationsSymbol]) {
   	target[inferredAnnotationsSymbol].forEach((value, key) => adm.make_(key, value))
   	} else {

3. The given code receives a value of Symbol(mobx-stored-annotations)
   

   mobx/packages/mobx/src/api/decorators.ts

   Line 3 in 248e25e

   export const storedAnnotationsSymbol = Symbol("mobx-stored-annotations")

4. It eventually gets here:
   https://github.com/mobxjs/mobx/blob/main/packages/mobx/src/utils/utils.ts#L159-L163

And that's where shit hits the fan.

I see from the logs that the Symbol("mobx-stored-annotations") is passed it, but from what I see in the minified code, it gets transpiled as such:

If I try the same code in the browser, I get the same exception:

So I guess the issue boils down to why the transpiled code doesn't call .toString() on the Symbol and decides to do ""+Symbol() instead?

No clue to be honest.

[urugator]

It really looks like you're using older version - perhaps a stupid question, but have you re-build production build after updating mobx?

[Tarpsvo]

Yes I have. The screenshot of the minified code comes from node_modules/mobx/dist/mobx.cjs.production.min.js.

I can't figure out why it happens in my actual project, but not the minimal repro project. Could it be the issue with missing .toString()?

[Tarpsvo]

Might also be worth mentioning that the crash happens on the server (using React SSR here) and only in the production build. Works fine in dev.

[Tarpsvo]

Alright, switching to makeObservable works in my case. I'll just stick to that and compensate where needed.

[urugator]

I read it wrong ... do you use makeAutoObservable with decorators? That's not supported...

[Tarpsvo]

Yeah... whoops. :(

[urugator]

Was the intention to use decorators as overrides?

[Tarpsvo]

My coworker changed the makeObservable into makeAutoObservable at one point, I'm not sure of their intentions. I just happened to debug why our dev environment stopped working.

Weird thing is that it worked and went unnoticed when using MobX 6.0.5.

[urugator]

Btw thing.toString() => ""+thing is truly weird, could be a terser bug...

EDIT: Found the problem, it's caused by unsafe flag that we're passing to terser...