Module not initialised causing runtime issue

[SamyPesse]

I'm trying to upgrade from 0.8.53 to 0.10 / 0.11.2 and I'm encountering a blocking issue, without any changes to the code, I have a runtime issue (Node JS environment):

TypeError: Cannot read property 'something' of undefined
    at /.../dist/index.js:11740:57
    ...

While looking at the code basically

import { webConfig } from '@company/app-config'

...
webConfig.something // this line is failing
...

in @company/app-config, we have the following structure (we want to import in priority webConfig.functions.ts using esbuild option resolveExtensions: ['.functions.tsx', '.functions.ts', '.tsx', '.ts']) :

index.ts
webConfig.functions.ts
webConfig.ts

Looking at the bundled code, it looks like:

The issue is that init_index_functions is never called so webConfig stays undefined.

I'm going to try writing a minimal reproducible example. But looking at the bundled code, it looks like the issue is the same for all imports coming from a "prioritised" extension (ex .web.ts or .functions.ts), maybe there is a regression there?

[dalcib]

I am facing the same problem after upgrade to 0.11.0

Bundle in 0.10.x:

// node_modules/react-native-web/dist/exports/Platform/index.js
var Platform = {
  OS: "web",
  select: function select(obj) {return "web" in obj ? obj.web : obj.default;}
};
var Platform_default = Platform;

// node_modules/react-native-paper/lib/module/styles/fonts.js
var fontConfig = {/*...*/};
function configureFonts(config) {
  const fonts = Platform_default.select({
    ...fontConfig,
    ...config
  });
  return fonts;
}

It worked perfectly.

Bundle in 0.11.x:

// node_modules/react-native-web/dist/exports/Platform/index.js
var Platform, Platform_default;
var init_Platform = __esm(() => {
  init_define_process_env_APP_MANIFEST();
  Platform = {
    OS: "web",
    select: function select(obj) {return "web" in obj ? obj.web : obj.default;}
  };
  Platform_default = Platform;
});

// node_modules/react-native-paper/lib/module/styles/fonts.js
var fontConfig = {/*...*/};
function configureFonts(config) {
  const fonts = Platform_default.select({
    ...fontConfig,
    ...config
  });
  return fonts;
}

Now it produces Uncaught TypeError: Cannot read property 'select' of undefined

And all modules in react-native-web are now wrapped in __esm(), which increased the bundle a little bit.
I couldn't find any require in the modules using this package, to justify the wrapper.

[evanw]

Thanks for the report. It looks like this is related to packages that have "sideEffects": false in their package.json file. I'm currently working on a fix.

I couldn't find any require in the modules using this package, to justify the wrapper.

An import() could also cause this. Both require() and import() are ways to dynamically import a module and therefore require a wrapper to ensure correct evaluation order.

[dalcib]

Yes, the react-native-web has "sideEffects": false.
I couldn't find any import() either.

[evanw]

I'm still working on fixing this and it looks like it's not a super quick fix. The bug is with some long-standing behavior (files without side effects containing only re-exports are not included) combined with some new behavior (lazy-ESM files need to call their wrapper closure as a side effect).

In the meantime you might be able to get this to work with --tree-shaking=ignore-annotations if you need to. I would recommend not upgrading until this is fixed though since that would be less work on your part.