Automatic inclusion of `package.json` breaks Next SSG

[tjzel]

Description

After bumping react-native-builder-bob in Reanimated monorepo, our example app using Next stopped building with a very obscure error.

Errors screenshots

Obviously this file doesn't have any instances of global and it worked well before the bump.

After investigation turns out the culprit is enforced addition of package.json into the build directory added in

• fix: always create package.json with type regardless of esm option #598

I don't exactly understand why is that causing the error, especially that the error message and the callstack itself don't provide any useful information.

Packages

• create-react-native-library
• react-native-builder-bob

Selected options

 {    "source": "src",
    "output": "lib",
    "targets": [
      "module",
      "typescript"
    ]
  }

Link to repro

https://github.com/software-mansion/react-native-reanimated/tree/main/apps/next-example

Environment

Irrelevant, since it breaks in GitHub actions as well.

[tjzel]

Hey @satya164, thanks for the quick release! I tested it and unfortunately the inclusion of package.json with "type":"commonjs" still breaks Next 😢

Also, using the following config:

{
    "source": "src",
    "output": "lib",
    "targets": [
      [
        "module",
        {
          "esm": true
        }
      ],
      "typescript"
    ]
}

results in the same error as in the original issue.

[satya164]

@tjzel seems like this is a NextJS bug :<
type: commonjs should behave exactly like having no type. without this there is no way to support specifying type: module in root package.json. we can temporarily remove the package.json but it's not a permanent solution.

[satya164]

results in the same error as in the original issue.

When ESM option is enabled, afaik it's necessary to use globalThis instead of global since global is a legacy thing.

[tjzel]

I replaced all uses of global in Reanimated with globalThis, even though files using global shouldn't be loaded into the Next example, and the issue persists. It must be something very eerie about Next/Webpack.

Thank you for the 0.30.2 version, with esm: true it works now as before 🥳

[satya164]

Hey @tjzel, there was a mistake in my change - the package.json should be emitted when esm: true but it did the opposite. I have fixed this issue - so for reanimated you may want to set esm: false instead when you upgrade since you don't want the package.json to be generated.

[tjzel]

@satya164 Sorry for the late response, thanks for pinging!

Unfortunately we cannot upgrade to the latest version of Bob, because we had to strip @babel/preset-react software-mansion/react-native-reanimated#7266 to preserve JSX.

I tried to upstream this change as a configuration specific thing, but couldn't get it to work properly so I left is as a patch 😢 Is it something you could do on your end?

[satya164]

@tjzel i'm not sure about making this change in bob as not pre-compiling JSX defeats one of the goals - to avoid additional setup for users. imo nativewind should really figure out another way instead of requiring library authors to ship uncompiled code.

but if you want to have this i'd suggest to have your own babel config instead of patching https://callstack.github.io/react-native-builder-bob/build#configfile. then you could do something like:

const bobPreset = require('react-native-builder-bob/babel-preset');

module.exports = {
  ...bobPreset,
  presets: bobPreset.presets.filter(...) // filter out `@babel/preset-react`
};

[tjzel]

I'll check if this works then!

[tjzel]

With a bit of fiddling your suggestion worked when I removed the patch - I got the same exact output. However, when I upgraded bob to the latest version, I'm getting an error:

$ yarn bob build
bob build

build files for publishing

Options:
  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]
  --target   The target to build
               [string] [choices: "commonjs", "module", "typescript", "codegen"]

Error: Invalid configuration in /Users/bigpoppe/swmansion/reanimated/ternary/packages/react-native-worklets/bob.config.js: targets[0][1].configFile must be boolean (was "/Users/bigpoppe/swmansion/reanimated/ternary/bob.babel.config.js") or targets[0] must be exactly length 1 (was 2)
    at Object.build [as handler] (/Users/bigpoppe/swmansion/reanimated/ternary/node_modules/react-native-builder-bob/lib/build.js:38:11)

I guess it's a bug since the doc says that .configFile can be a string.

[satya164]

@tjzel damn, seems the validation is not complete. will fix, but you can just pass true and it'll use babel.config.js.

[satya164]

@tjzel fixed and released