[Question] using ant-design-mobile-rn throws error

[Awethentique]

Describe the bug

A clear and concise description of what the bug is.

ant-design-mobile-rn - Supports web and native usages based on React Native. The package is working fine on a device but not on the web implementation with Storybook using "addon-react-native-web".

I cloned the repo from https://github.com/dannyhw/react-native-storybook-starter and followed the "getting started" guide I added the @ant-design/react-native library as per the instructions on https://github.com/ant-design/ant-design-mobile-rn

I have also tried with and without updating the .storybook/main.js:

module.exports = {
  stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-react-native-web',
     {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: [
          '@ant-design/react-native',
          '@react-native-camera-roll/camera-roll', 
          '@react-native-picker/picker',
          '@react-native-community/segmented-control',
          '@react-native-community/slider',
          'react-native-gesture-handler',
        ],
      },
    },
  ],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
};

When I run yarn storybook I get the errors described in the errors section of this post.

It seems like for some reason it's trying to load something from camera-roll which is not even being used by the button component. This works fine when running on a device with no errors.

To make it easier: I forked the starter repo and created a minimalistic reproduction here on the main branch with the packages and example component: https://github.com/Awethentique/react-native-storybook-starter

Steps to reproduce the behaviour

1. Git clone https://github.com/Awethentique/react-native-storybook-starter
2. run yarn install to install the packages
3. run yarn storybook to start the project
4. See the error

Expected behaviour

I would expect to see the ant-design-mobile-rn button to work on both the web view and the mobile device with no errors.

Screenshots and/or logs

I get this error in the canvas:

ERROR in ./node_modules/@bang88/react-native-ultimate-listview/src/refreshableScrollView.web.js 159:8
Module parse failed: Unexpected token (159:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     if (this.props.customRefreshView) {
|       return (
>         <View style={[defaultHeaderStyles.header, this.props.refreshViewStyle]}>
|           {this.props.customRefreshView(this.state.refreshStatus, this._offsetY)}
|         </View>
ERROR in ./node_modules/@bang88/react-native-ultimate-listview/src/ultimateListView.js 308:6
Module parse failed: Unexpected token (308:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|     return (
>       <View style={styles.fetchingView}>
|         <Text style={styles.paginationViewText}>{this.props.waitingSpinnerText}</Text>
|       </View>

and this error in the Devtools console:

Unexpected error while loading ./AntButton/AntButton.stories.tsx: Cannot read properties of undefined (reading 'getEnforcing')
 TypeError: Cannot read properties of undefined (reading 'getEnforcing')
    at ./node_modules/@react-native-camera-roll/camera-roll/lib/module/NativeCameraRollModule.js (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-5fc406.iframe.bundle.js:25285:243)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:338:21)
    at ./node_modules/@react-native-camera-roll/camera-roll/lib/module/CameraRoll.js (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-5fc406.iframe.bundle.js:25265:803)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:338:21)
    at ./node_modules/@react-native-camera-roll/camera-roll/lib/module/useCameraRoll.js (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-5fc406.iframe.bundle.js:25315:697)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:338:21)
    at ./node_modules/@react-native-camera-roll/camera-roll/lib/module/index.js (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-5fc406.iframe.bundle.js:25305:81)

Additional context

For most of the errors I encountered, I could not find any related solutions on the web. I could not find working boilerplate examples of this package with Storybook as well.

Any help finding a way to get this working will be very appreciated. Thanks!

[dannyhw]

@Awethentique can you try adding @bang88/react-native-ultimate-listview to the modules to transpile list, it seems to be the problematic library

[Awethentique]

Thank you for that find.

Adding '@bang88/react-native-ultimate-listview' to the modulesToTranspile seems to resolve the error from the Storybook canvas.

I now get this error:

I tried adding the config for the warning, but this only loads weback to 57% and hangs.

`module.exports = {
  addons: [
    /*existing addons,*/
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToTranspile: ['react-native-reanimated'],
        babelPlugins: ['react-native-reanimated/plugin'],
      },
    },
  ],
};

[dannyhw]

Not sure what you mean about the config for the warning, could you clarify?

[Awethentique]

in the previous screenshot, I had this warning:

I thought that might be because I need to add in this:

This caused webpack to hang at 57% Buiding.

[dannyhw]

@Awethentique well it looks like its actually complaining about reanimated not being installed, do you have reanimated installed on the project too?

If you add it you also might need this babel plugin for reanimated "@babel/plugin-proposal-export-namespace-from",

so like:

      options: {
        modulesToTranspile: ['react-native-reanimated'],
        babelPlugins: ['@babel/plugin-proposal-export-namespace-from', 'react-native-reanimated/plugin'],
      },

plus what ever other config. (note that react-native-reanimated/plugin should be last)

[Awethentique]

For anyone else stumbling across this setting up Ant design and Storybook with this add-on.

There was no need to do anything for reanimated.

I spent some time again with this. I finally got it to work using the following:

I had to install yarn add -D babel-plugin-module-resolver babel-plugin-import

To the babel.config.js I added:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.ios.js', '.android.js'],
        root: ['./src'],
        alias: {
          '~': './src',
        },
      },
      'root-alias',
    ],
    [
      'import',
      {
        libraryName: '@ant-design/react-native',
      },
    ],
  ],
};

All is working fine

The repo that I cloned above has been updated with the necessary changes committed.