Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Gamma169 opened this issue Dec 5, 2021 · 3 comments
Labels
documentation Improvements or additions to documentation help wanted Extra attention is needed

Comments

@Gamma169
Copy link

Gamma169 commented Dec 5, 2021

I use web mode in expo to run tests for my application, but It looks like Webview is not supported in web mode.
react-native-webview/react-native-webview#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
Copy link

@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
Copy link
Author

Gamma169 commented Feb 9, 2022

@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
Copy link

@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

@Laphatize Laphatize added help wanted Extra attention is needed documentation Improvements or additions to documentation labels Apr 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

3 participants