Fix webpack5 and @storybook/addon-storyshots compatibility error, and a typo (storybookjs#442)

* fix: compatibility with webpack5

* fix: compatibility with @storybook/addon-storyshots

* docs: typo in react-native-storybook-server --help

* feat: use webpack5 in the example

---------

Co-authored-by: Daniel Williams <[email protected]>

Author: leonardo-fc

app/react-native-server/package.json

@@ -43,11 +43,14 @@
     "react": "^18.2.0",
     "react-dom": "18.2.0",
     "uuid": "^3.3.2",
-    "webpack": "^4",
     "ws": "^7.1.2"
   },
+  "devDependencies": {
+    "webpack": "^5.76.2"
+  },
   "peerDependencies": {
-    "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0"
+    "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0",
+    "webpack": "^4 || ^5"
   },
   "engines": {
     "node": ">=16.0.0"

app/react-native-server/src/server/cli.js

@@ -24,7 +24,7 @@ function getCli() {
     .option('--ssl-cert <cert>', 'Provide an SSL certificate. (Required with --https)')
     .option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)')
     .option('--smoke-test', 'Exit after successful start')
-    .option('--ci', "CI mode (skip interactive prompts, don't open browser")
+    .option('--ci', "CI mode (skip interactive prompts, don't open browser)")
     .option('--quiet', 'Suppress verbose build output');
 
   program.parse();

app/react-native-server/src/server/options.js

@@ -1,19 +1,22 @@
+import path from 'path';
 import packageJson from '../../package.json';
 
 function extendOptions(options, extendServer) {
   const { manualId, https: secured, host, port } = options;
   const storybookOptions = { manualId, secured, host, port };
 
+  const config = require(path.join(options.configDir, 'main'));
+  const useWebpack5 = config.core?.builder === 'webpack5';
+
   return {
     ...options,
     framework: 'react-native',
     extendServer,
     packageJson,
-    mode: 'dev',
     ignorePreview: true,
     corePresets: [
       {
-        name: '@storybook/manager-webpack4/manager-preset',
+        name: `@storybook/manager-webpack${useWebpack5 ? 5 : 4}/manager-preset`,
         options: { managerEntry: require.resolve('../client/manager') },
       },
       {

app/react-native/src/index.ts

@@ -29,3 +29,8 @@ export const storiesOf = (kind: string, _module: NodeModule) =>
 export const getStorybookUI = view.getStorybookUI;
 
 export * from './types/types-6.0';
+
+// @storybook/addon-storyshots v6 needs global.__STORYBOOK_STORY_STORE__.initializationPromise
+(global as any).__STORYBOOK_STORY_STORE__ = {
+  initializationPromise: clientApi.storyStore?.initializationPromise,
+};

examples/expo-example/.storybook/Storybook.tsx

@@ -12,7 +12,7 @@ const StorybookUIRoot = getStorybookUI({
   // isSplitPanelVisible: true,
 
   // onDeviceUI: false,
-  // enableWebsockets: true,
+  enableWebsockets: true,
   // theme: {
   //   storyList: {
   //     search: {

examples/expo-example/.storybook_server/main.js

@@ -5,5 +5,8 @@ module.exports = {
   ],
   logLevel: 'debug',
   env: () => ({}),
+  core: {
+    builder: 'webpack5',
+  },
   addons: ['@storybook/addon-essentials'],
 };

examples/expo-example/assets/icon.png

@@ -11,7 +11,7 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "prestart": "yarn get-stories",
     "start": "expo start",
-    "start-server": "NODE_OPTIONS=--openssl-legacy-provider react-native-storybook-server",
+    "start-server": "react-native-storybook-server",
     "storybook-watcher": "sb-rn-watcher --config-path=./.storybook",
     "preweb": "yarn get-stories",
     "web": "expo start --web"
@@ -30,7 +30,9 @@
     "@storybook/addon-ondevice-knobs": "^6.5.0-rc.5",
     "@storybook/addon-ondevice-notes": "^6.5.0-rc.5",
     "@storybook/addons": "^6.5.14",
+    "@storybook/builder-webpack5": "^6.5.16",
     "@storybook/docs-tools": "^6.5.14",
+    "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/react": "^6.5.14",
     "@storybook/react-native": "^6.5.0-rc.5",
     "@storybook/react-native-server": "^6.5.0-rc.5",