[Documentation-Request] Update README to let people know to add the package to webpack.config

[Gamma169]

I use web mode in expo to run tests for my application, but It looks like Webview is not supported in web mode. https://github.com/react-native-webview/react-native-webview/issues/2157

Because of this, just including the library in web mode causes the build to fail.

Web Bundling complete 9858ms
./node_modules/@burstware/expo-plaid-link/Index.jsx 82:4
Module parse failed: Unexpected token (82:4)
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 (
>     <WebView
|       source={{
|         uri: `https://cdn.plaid.com/link/v2/stable/link.html?isWebview=true&token=${linkToken}`,
› Stopping Webpack server
› Stopped server

I've found that by adding the library to my webpack.config allows things to be built properly:

const createExpoWebpackConfigAsync = require("@expo/webpack-config");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: [
          // Need to add this here because webview is not supported for web build
          // https://github.com/react-native-webview/react-native-webview/issues/2157
          "@burstware/expo-plaid-link",
        ],
      },
    },
    argv
  );
  return config;
};

Might want to add this step to the documentation for running the application in web mode. Obviously, the package won't work if you try to use it, but at least the build won't break.

[Maker-Mark]

@Gamma169 What would be the purpose of this? From the sound of it, you'd just have it silently not show webviews? IMO, this is dangerous to add. As a developer, I would not expect a component to just not work.

[Gamma169]

@Maker-Mark, I wrote what the purpose is: to be able to build the app in web mode. If you use this library and don't include the above in your webpack config, you cannot use web mode at all. Webviews are already not supported in web mode: https://docs.expo.dev/versions/latest/sdk/webview/. But even if you use them in your project, they don't completely break the build. They just do not render when run in web mode.

Due to the multiple-platform capabilities of react-native, you generally have to do something like this when running libraries or things that are not supported on all platforms:

const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100
});

To my knowledge, this is a general react-native design principal. https://reactnative.dev/docs/platform-specific-code

So that is why I think it should be documented.

[Maker-Mark]

@Gamma169 Ahh my mistake! I missed the repo this issue was on. I thought you were recommending folks do this on any react native project that uses https://github.com/react-native-webview/react-native-webview/

Good call