title: Using appropriate transpilers for React Native Web Project
body: <p>I am trying to create a React Native Web project.</p>
  
  <p>I have built several React Native apps before, but have never tried to put one on the web.</p>
  
  <p>My biggest problem has been incompatibility between native libraries when launching the web - not an unexpected problem.</p>
  
  <p>Anyway, my goal is to be able to load native libraries when on a native platform and having alternative libraries doing the same thing when on the web.</p>
  
  <p>For example, I am getting the current error:</p>
  
  <pre><code>./node_modules/react-native-calendars/src/expandableCalendar/asCalendarConsumer.js
  Module parse failed: Unexpected token (11:8)
  You may need an appropriate loader to handle this file type.
  |     render() {
  |       return (
  |         &lt;CalendarContext.Consumer&gt;
  |           {(context) =&gt; (
  |             &lt;WrappedComponent
  </code></pre>
  
  <p>How would I fix this? This library is theoretically compatible with React Native Web, and yet I get the above error.</p>
  
  <p>Would this loader be in Babel? Metro? Webpack?</p>
  
  <p>I have a babel.config.js that looks like this:</p>
  
  <pre><code>module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    resolve: {
      alias: {
        'react-native$': 'react-native-web'
      }
    },
    rules: [
      {
        test: /\.(js|jsx|mjs)$/,
        include: [
          paths.src,
          // In order to use react-native targetted libraries on web,
          // we have to use babel to compile them from ES6 to ES5.
          // This would still not allow us to use libraries that have RN
          // dependencies that are not polyfilled by react-native-web.
          path.resolve(paths.nodeModules, 'react-native-vector-icons'),
        ],
        loader: 'babel-loader',
        options: {
          compact: true,
          presets: ['react-native'],
        },
      }
    ]
  };
  </code></pre>
  
  <p>I have a metro that looks like this:</p>
  
  <pre><code>const { getDefaultConfig } = require("metro-config");
  
  module.exports = (async () =&gt; {
    const {
      resolver: { sourceExts }
    } = await getDefaultConfig();
    return {
      transformer: {
        babelTransformerPath: require.resolve("react-native-css-transformer")
      },
      resolver: {
        sourceExts: [...sourceExts, "css"]
      }
    };
  })();
  </code></pre>
  
  <p>And here is my webpack:</p>
  
  <pre><code>// webpack.config.js
  module.exports = {
      plugins: ["@babel/plugin-syntax-dynamic-import"],
  
      resolve: {
          alias: {
              'react-native$': 'react-native-web'
          },
      },
      rules: [
          {
              test: /\.js$/,
              loader: 'babel-loader',
              //exclude: /node_modules/,
              options: {
                  presets: ['es2015', 'stage-0', 'react', 'babel-preset-env', 'babel-preset-stage-0'],
                  plugins: ["@babel/plugin-syntax-dynamic-import"],
              }
          },
          {
              test: /\.ttf$/,
              loader: "url-loader", // or directly file-loader
              include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
          },
      ]
  }
  </code></pre>
  
  <p>I'm really quite lost on how to setup a Webpack, or how I am supposed to be using these files to get rid of the above error.</p>
  
  <p>Where do I add the loader the error is asking about?</p>
  
  <p>Sorry if this is a confusing question - this part of RN is completely new to me</p>