[Bug]: Bundling React Native 0.70 with minify enabled throws error in @storybook/preview-api

[esbenvb]

Describe the bug

When I try to make a bundle for production (with minify enabled), and I include any imports to StoryBook, I get this error:

error node_modules/@storybook/preview-api/dist/index.js: Unexpected token: operator (?) in file node_modules/@storybook/preview-api/dist/index.js at 3279:39.
Error: Unexpected token: operator (?) in file node_modules/@storybook/preview-api/dist/index.js at 3279:39
    at minifyCode (/Users/esben/storybook-rn-minify-issue/node_modules/metro-transform-worker/src/index.js:99:13)
    at transformJS (/Users/esben/storybook-rn-minify-issue/node_modules/metro-transform-worker/src/index.js:320:28)
    at transformJSWithBabel (/Users/esben/storybook-rn-minify-issue/node_modules/metro-transform-worker/src/index.js:411:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.transform (/Users/esben/storybook-rn-minify-issue/node_modules/metro-transform-worker/src/index.js:572:12)

Reproduction link

https://github.com/esbenvb/storybook-rn-minify-issue

Reproduction steps

Type the following

git clone https://github.com/esbenvb/storybook-rn-minify-issue
cd storybook-rn-minify-issue
yarn
./node_modules/.bin/react-native bundle \
      --dev false \
      --platform ios \
      --reset-cache \
      --entry-file index.js \
      --bundle-output ./TEST_BUNDLE \
      --sourcemap-output ./TEST_BUNDLE.map

And you'll get the error

System

Storybook Environment Info:

  System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.14.2 - ~/Library/Caches/fnm_multishells/64649_1716395534262/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn <----- active
    npm: 9.5.0 - ~/Library/Caches/fnm_multishells/64649_1716395534262/bin/npm
  Browsers:
    Chrome: 125.0.6422.61
    Safari: 17.5
  npmPackages:
    @storybook/addon-ondevice-actions: ^7.6.18 => 7.6.18 
    @storybook/addon-ondevice-controls: ^7.6.18 => 7.6.18 
    @storybook/react-native: ^7.6.18 => 7.6.18 

### Additional context

_No response_

[dannyhw]

Try adding the babel plugin for optional chaining https://babeljs.io/docs/babel-plugin-transform-optional-chaining

[shilman]

@dannyhw Is that something that should be supported out of the box in a recent version of RN?

[dannyhw]

This is already included in preset env, I wouldn't expect to see this in most projects. The repro is using an old version of the react native babel preset which could be a cause.

[esbenvb]

Try adding the babel plugin for optional chaining https://babeljs.io/docs/babel-plugin-transform-optional-chaining

I tried installing @babel/transform-optional-chaining and added it to the babel config, but the problem remains.

[esbenvb]

This is already included in preset env, I wouldn't expect to see this in most projects. The repro is using an old version of the react native babel preset which could be a cause.

I tried bumpingmetro-react-native-babel-preset to the latest version, and installing @babel/preset-env but none of it seems to help.

We already use lots of optional chaining operators in our code base, with no issues, this issue is only happening when we're building a minified bundle that includes Storybook.

Also, the file that it refers to seems to be minified already, and there's no such (?) operator on line 39, as suggested by the error message. The file looks like this.

[dannyhw]

@esbenvb react native uses a different package for the babel plugin now its @react-native/babel-preset, not sure which version that changed though

if the ? is inside a string then maybe its the ` which doesn't get parsed correctly 🤔 however I'm not sure it is that line which causes it

[dannyhw]

@esbenvb the unstable_useRequireContext option requires at least react native 0.72 so you wont be able to use v7.6 on v70 of react native. You should try to at least update to 0.72.

[dannyhw]

I've tested on https://github.com/dannyhw/react-native-storybook-starter and the bundle command works fine

[esbenvb]

@esbenvb the unstable_useRequireContext option requires at least react native 0.72 so you wont be able to use v7.6 on v70 of react native. You should try to at least update to 0.72.

I'm not sure this is true.

If I leave out unstable_useRequireContext in my project, I get the error below, when starting the bundle server (yarn start). But works well with this transformer setting in metro config.

And as I said, Storybook seems to work fine in my 0.70.x project, both in debug and release. The ONLY case that cause trouble us when with minify enabled.

We're not just gonna upgrade RN soon, but If you think that v7.6 is too new for my RN version, what version would you recommend that works with RN 0.70?

 ERROR  Error: The experimental Metro feature `require.context` is not enabled in your project.
This can be enabled by setting the `transformer.unstable_allowRequireContext` property to `true` in your Metro configuration., js engine: hermes

[esbenvb]

I've tested on https://github.com/dannyhw/react-native-storybook-starter and the bundle command works fine

Yes, it also works for me in a 0.71 sandbox project.

The metro and babel config files are the same, the only difference is the versions in package.json.

I tried updating all modules one by one until I upgraded RN to 71 and then it worked.

diff --git a/package.json b/../SBsandbox/package.json
index 0b27114..4d87d4d 100644
--- a/package.json
+++ b/../SBsandbox/package.json
@@ -1,46 +1,55 @@
 {
-  "name": "SBsandbox71",
+  "name": "sbsandbox",
   "version": "0.0.1",
   "private": true,
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios",
-    "lint": "eslint .",
     "start": "react-native start",
     "test": "jest",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "storybook-generate": "sb-rn-get-stories"
   },
   "dependencies": {
-    "react": "18.2.0",
-    "react-native": "0.71.19"
+    "react": "18.1.0",
+    "react-native": "0.70.13"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@babel/preset-env": "^7.20.0",
-    "@babel/runtime": "^7.20.0",
+    "@babel/core": "^7.12.9",
+    "@babel/runtime": "^7.12.5",
     "@react-native-async-storage/async-storage": "^1.23.1",
     "@react-native-community/datetimepicker": "^8.0.1",
-    "@react-native-community/eslint-config": "^3.2.0",
+    "@react-native-community/eslint-config": "^2.0.0",
     "@react-native-community/slider": "^4.5.2",
     "@storybook/addon-ondevice-actions": "^7.6.18",
     "@storybook/addon-ondevice-controls": "^7.6.18",
     "@storybook/react-native": "^7.6.18",
     "@tsconfig/react-native": "^2.0.2",
-    "@types/jest": "^29.2.1",
-    "@types/react": "^18.0.24",
+    "@types/jest": "^26.0.23",
+    "@types/react": "^18.0.21",
+    "@types/react-native": "^0.70.6",
     "@types/react-test-renderer": "^18.0.0",
-    "babel-jest": "^29.2.1",
+    "@typescript-eslint/eslint-plugin": "^5.37.0",
+    "@typescript-eslint/parser": "^5.37.0",
+    "babel-jest": "^26.6.3",
     "babel-loader": "^8.3.0",
-    "eslint": "^8.19.0",
-    "jest": "^29.2.1",
-    "metro-react-native-babel-preset": "0.73.10",
-    "prettier": "^2.4.1",
-    "react-dom": "18.2.0",
+    "eslint": "^7.32.0",
+    "jest": "^26.6.3",
+    "metro-react-native-babel-preset": "0.72.3",
+    "react-dom": "18.1.0",
     "react-native-safe-area-context": "^4.10.1",
-    "react-test-renderer": "18.2.0",
-    "typescript": "4.8.4"
+    "react-test-renderer": "18.1.0",
+    "typescript": "^4.8.3"
   },
   "jest": {
-    "preset": "react-native"
+    "preset": "react-native",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json",
+      "node"
+    ]
   }
 }

[dannyhw]

Other than upgrading to 71 im not really sure. It does look like require context was already around on .70 after all.

One thing is that after trying a change to babel or metro make sure to clear cache because the cache sticks around.

You could try the setup with v6.5 of storybook.

[esbenvb]

Thanks for all your responses.

We're planning to upgrade RN version later this year. But I don't believe that SB v7.6.x is completely incompatible with RN 0.70.x - after all, everything works great, except from the minified bundling.

It seems to me that something's going wrong when bundling the preview-api module, since the @storybook/preview-api/dist/index.js at 3279:39 where it reports the error is already minified when I open it. Also, the file on my disk does only contain 90 lines of code, but it reports the error at line 3279.

How can that be? And could I try to replace the preview-api module with a version that's not minified? Where do I get that?

[dannyhw]

You could try using resolutions to get a specific version. If you go to npm you can see the version history of the package and try a few different ones. Probably it relates to how bundling was changed for that package. You can try forcing usage of the .mjs export though i tried and seemed to get the same issue.

[SaiChand-Headout]

@esbenvb were you able to resolve this ?? I'm getting the same error

[dannyhw]

Ok I found the issue, there is a ??= that seems to be the cause, if you add '@babel/plugin-transform-logical-assignment-operators' then it successfully minifies.

heres the changes needed: https://github.com/esbenvb/storybook-rn-minify-issue/pull/1/files

[dannyhw]

closing as there is a solution, see my comment above