Description

When running a story using Storybook and React Native Web, the library is failing because of the optional react-native-haptic-feedback dependency. The TurboModuleRegistry cannot be imported

Steps to reproduce

Case Webpack

Create and expo start template with web enabled but using webpack, not metro bundler (we know Webpack bundler is deprecated, the migration is in progress on our side moving to React Router is not an easy one), add a story with a sample code of Sortable.Grid.
Then starts the web export.

It will failed with

Failed to compile
CommandError: Attempted import error: 'TurboModuleRegistry' is not exported from 'react-native-web/dist/index' (imported as 'TurboModuleRegistry').

Case Storybook

Create and expo start template with web enabled, install @storybook/react-native and @storybook/react-native-web-vite, add a story with a sample code of Sortable.Grid.
Then starts the devserver: storybook dev

It will failed with

✘ [ERROR] No matching export in "node_modules/react-native-web/dist/index.js" for import "TurboModuleRegistry"

    node_modules/react-native-haptic-feedback/lib/module/codegenSpec/NativeHapticFeedback.js:3:9:
      3 │ import { TurboModuleRegistry } from 'react-native';
        ╵          ~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-native-web/dist/index.js" for import "TurboModuleRegistry"

    node_modules/react-native-sortables/dist/module/integrations/haptics/adapters/react-native-haptic-feedback.js:17:24:
      17 │ import { NativeModules, TurboModuleRegistry } from 'react-native';
         ╵                         ~~~~~~~~~~~~~~~~~~~

/Users/ludovicthomas/Documents/Projects/landr/LANDR.MobileApp/node_modules/storybook/bin/index.cjs:23
  throw error;
  ^

Error: Error during dependency optimization:

More information

Please note that the Snack gives you nothing as the preview is working, but the export with Webpack would failed.

One fix proposed is to disabled react-native-haptic-feedback on web by creating a file: module/integrations/haptics/adapters/react-native-haptic-feedback.web.js that avoids the import and disable the feature:

> [!NOTE]
>  / Disable haptics on web
const ReactNativeHapticFeedback = {
  load: () => {
    // Not available on web
  }
};
export default ReactNativeHapticFeedback;

Code snippet, Snack or GitHub repository link

https://snack.expo.dev/@lthomas/gnarly-yellow-pastry

React Native Sortables version

1.9.3

Reanimated version

3.19.1

React Native Gesture Handler version

2.24.0

React Native version

0.79.6

Platforms

Web

Architecture

Paper (Old Architecture)

Workflow

Expo Dev Client

Device

No response

Acknowledgements

Yes