Where to configure webpack manual installation for web

Question

Description

We're encountering an issues on the web side while trying to run React Native Skia in NextJS as part of a Solito monorepo. Mobile (Expo) seems to work fine, but the "warning" Skia throws of not finding reanimated is causing Next.js builds to error out with the following error: warn ../../node_modules/@shopify/react-native-skia/lib/module/external/reanimated/moduleWrapper.js Module not found: Can't resolve 'react-native-reanimated/package.json' in '/Users/apple/Documents/frontend/node_modules/@shopify/react-native-skia/lib/module/external/reanimated'

The warning above is referenced in the documents around how to set up webpack installations manually. It gives a code snippet but we are struggling to understand where to add this in our NextJS configuration. We have a suspicion it's supposed to be in the next.config.js file but don't know how to merge both code snippets to get it to work. Please find a screenshot attached of what our next.config.js file looks like so far.

Our current next.config.js file

We have tried this code snippet from skia documentation in a few places but have struggled to figure out where to put this exactly. https://shopify.github.io/react-native-skia/docs/getting-started/web/#manual-webpack-installation

Answer 1

I'm not familiar with your setup. However to configure webpack in nextjs you can do it in next.config.js file. More information in the docs

const nextConfig = {
  webpack(config) {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false,
    };

    return config;
  },
};