Why MobX might work for vite dev and not vite build production

[StephenHaney]

Documenting for future searchers:

• A lot of us are using @vitejs/plugin-react-swc which doesn't support ES decorators yet, so we've been using tsDecorators: true
• @vitejs/plugin-react-swc only runs in vite dev, it's not used for build
• This plugin -requires- you to use TS decorators since it will error if you try to use @ without tsDecorators: true
• ESBuild now shipped ES spec decorators and will use ES decorators if you target es2022
• MobX doesn't warn about missing accessor words in production (as far as I can tell)

So you can very easily run into a situation where you're using legacy decorators for dev mode and ES decorators for production builds. And your production build won't warn about needing to update your MobX syntax to use accessor. So your prod build might just mysteriously have no observables, although it was working fine in dev!

My solution is to switch to @vitejs/plugin-react (not SWC) so that I can run ES decorators in both dev and prod.

I hope this post saves someone else some debugging time! This is the first time that vite taking different paths for dev and build has bit me.

[AlmirKadric]

I managed to resolve this issue by prividing an empty array [] to the plugins property within the react() plugin configuration object. Looking at the plugin-react-swc source code, if this property is defined, even if empty, the SWC transform function is run for build mode (vite build) and not just serve mode (vite dev).

Sample configuration:

const userConfig: UserConfig = {
	/* Bundler Options */
	root: ...,
	publicDir: ...,
	build: {
		...
	},

	/* Transpiler Plugin Options */
	plugins: [
		react({
			// Enable JSX Decorators
			// NOTE: we need this for MobX
			useAtYourOwnRisk_mutateSwcOptions(options) {
				options.jsc!.parser!.decorators = true;
				options.jsc!.transform!.decoratorVersion = "2022-03";
			},

			// Force SWC transforms to run during `vite build` as well
			plugins: [],
		}),
	],
}

[AlmirKadric]

updated my comment with a cleaner solution 👍

[sheam]

@AlmirKadric can you share your full vite.config.ts? I can't see where options is coming from. Are you using any babel plugins explicitly?

I think I solved it, the following seems to work

// eslint-disable-next-line import-x/named
import react, { Options } from '@vitejs/plugin-react';

const options: Options = {
  babel: {
    parserOpts: {
      plugins: ['decorators'],
    },
  },

export default defineConfig((/*{  command, mode  } */) => {
  // const env = loadEnv(mode, paths.env);
  return {
    // .... regular stuff here
    plugins: [react(options), tsconfigPaths()],
  };
});
};```