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

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

from storybook.

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

from storybook.

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.

from storybook.

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.

from storybook.

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.

from storybook.

@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

from storybook.

@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.

from storybook.

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

from storybook.

@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

from storybook.

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"
+    ]
   }
 }

from storybook.

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.

from storybook.

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?

from storybook.

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.

from storybook.