[Bug]: Web compatibility broken in >= 5.0.6

[garrottkai]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

Web

What happened?

Console error Uncaught ReferenceError: require is not defined.

Same as previously reported in https://github.com/gorhom/react-native-bottom-sheet/issues/2274 (automatically closed by the bot)

Reproduction steps

• Run any web app using 5.0.6 or greater

snack.expo.dev

Reproduction sample

snack.expo.dev

Relevant log output

[alexandergyllensvard]

I've done some investigation, and in versions below 5.0.6 I get the following output from a webpack build:

Module not found: Error: Can't resolve '@shopify/flash-list' in '.../node_modules/@gorhom/bottom-sheet/lib/module/components/bottomSheetScrollable'

And in versions later than 5.0.6 I don't get this error, but instead when I open the app I get the thing reported here, where require is not defined.

Is it possibly linked or am I just guessing in the blind here?

[brycnguyen]

@alexandergyllensvard I was able to bypass the error by installing

@shopify/[email protected]. Looks like @gorhom/bottom-sheet uses it, but it's not a peer dependency.

For my webpack set up I also had to point the library to where @shopify/flashlist was installed, because I have a monorepo set up, so the installation was at the root.

webpack.config.js

resolve: {
      ...
      alias: {
        ...,
        '@gorhom/bottom-sheet': path.join(__dirname, '../../node_modules', '@gorhom/bottom-sheet'),
        '@shopify/flash-list': path.join(__dirname, '../../node_modules', '@shopify/flash-list'),
      },

@gorhom/[email protected] is the version I'm using now

[alexandergyllensvard]

@brycnguyen I tried your workaround, but couldn't make it work. Not sure if we have the same webpack setup though. I'm not using a monorepo for example, but I have this config from earlier issues:

const compileNodeModules = [
  'react-native-reanimated',
  '@gorhom/bottom-sheet',
  // Add every react-native package that needs compiling
].map((moduleName) => path.resolve(appDirectory, `node_modules/${moduleName}`));

const babelLoaderConfiguration = {
  test: /\.js$|\.tsx?$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(__dirname, 'index.web.js'), // Entry to your application
    path.resolve(__dirname, './src/booting/Root.web.tsx'), // Change this to your main App file
    path.resolve(__dirname, 'src'),
    ...compileNodeModules,
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets,
      plugins: ['react-native-web'],
    },
  },
}

I tried adding flash-list to the list of packages to compile, but that didn't to the trick. I must say I don't know much about the reasoning behind the configuration, I just followed a guide and it worked. The presets that is referenced in the code snippet is from the babel config, which looks like this:

module.exports = {
  presets: ['module:@react-native/babel-preset', '@babel/preset-typescript'],
  plugins: [
    ['module:react-native-dotenv'],
    [
      'module-resolver',
      {
        alias: {
          src: './src',
        },
      },
    ],
    '@babel/plugin-proposal-export-namespace-from',
    'react-native-reanimated/plugin',
  ],
  env: {
    production: {
      plugins: ['transform-remove-console'],
    },
  },
};

I'm not sure if this helps the issue, but maybe there's a clue hidden somewhere in the config.

[brycnguyen]

@alexandergyllensvard, that's strange. I would just dig into where your code is looking for @shopify/flash-list and trying to point it there via webpack alias. It won't be a one to one with my workaround because my node_modules folder lives in a different place.

My app:

Root -
node_modules/@shopify_flashlist
    App
          App/node_modules
          webpack.config.js

Your app probably?:

App
App/node_modules/@shopify_flashlist
webpack.config.js

So maybe you need an alias like:

resolve: {
      ...
      alias: {
        ...,
        '@gorhom/bottom-sheet': path.join(__dirname, './node_modules', '@gorhom/bottom-sheet'),
        '@shopify/flash-list': path.join(__dirname, './node_modules', '@shopify/flash-list'),
      },

[gorhom]

this should be resolved in the next release

[gorhom]

could you please test https://github.com/gorhom/react-native-bottom-sheet/releases/tag/v5.1.6

[jerone]

@shopify/[email protected]. Looks like @gorhom/bottom-sheet uses it, but it's not a peer dependency.

A bit off-topic, but why is @shopify/flash-list not a peer-dependency or at least documented that this package should be installed manually?

[alexandergyllensvard]

@gorhom I tried the latest version (5.1.6), but I'm still getting the same error:

index.js:2 Uncaught ReferenceError: require is not defined
    at ./node_modules/@gorhom/bottom-sheet/lib/module/index.js (app.bundle.js?3b3d8a5…:572:1)
    at __webpack_require__ (app.bundle.js?3b3d8a…579eb1c7e5:37002:32)
    at fn (app.bundle.js?3b3d8a…579eb1c7e5:37214:21)

I'll try to find workarounds tomorrow (CEST), but is there anything I can provide you to help you understand the issue?

[stevenwchien]

@gorhom Just wanted to let you know I still see a reference to @shopify/flash-list in code. And noting that I don't see a corresponding dep/peer dep in package.json

[benjaminharringtonrose]

I'm having this issue as well - I'll let y'all know if I find a solution

[benjaminharringtonrose]

I figured out the fix for web -

// webpack.config.js

module.exports = (env, argv) => ({
  resolve: {
    mainFields: ['browser', 'main', 'module'], // this is what you need to add
  }
})

This prioritizes browser-optimized builds and is actually a very standard and safe configuration for React Native web projects. Wahoo 🚢