Error building app with react-native-web

[miguelocarvajal]

I haven't read anywhere that react-native-web is supported but everything works just fine until I try to build the project using "yarn build" where I get the following error:

yarn run v1.3.2
$ react-scripts build
Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

    ./node_modules/react-native-extended-stylesheet/src/replacers/vars.js:10

Read more here: http://bit.ly/2tRViJ9

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

If I remove react-native-extended-stylesheet then it works again. Not sure what is going on here?

Am using the re-start project (https://github.com/react-everywhere/re-start) to have react native for mobile devices and web configured.

Would be nice to get this working since everything else seemed to work fine.

[vitalets]

Hi! This is because React Native packages are historically published in ES6 / 7. The workaround suggested by react-native-web:

// web/webpack.config.js

// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// `node_module`.
const babelLoaderConfiguration = {
  test: /\.js$/,
  // Add every directory that needs to be compiled by Babel during the build
  include: [
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, 'node_modules/react-native-uncompiled') // <-- important line!
  ],

For re-start I've got it working by the following:

1. Eject project to get access to webpack configs:

   npm run eject

2. Include react-native-extended-stylesheet to babel loader configuration in configs/webpack.config.dev.js and configs/webpack.config.prod.js:

         // Process JS with Babel.
         {
           test: /\.(js|jsx)$/,
           include: [
               paths.appSrc,
               path.resolve(__dirname, '../node_modules/react-native-extended-stylesheet')
           ],
           loader: require.resolve('babel-loader'),
           options: {
             cacheDirectory: true,
           },
         },

   It should help. Feel free to reopen if it does not.

[sven09]

Hey @Vitalets, the answer is now some days old ;-D. I tried to use it in an expo / react-native-web scenario - without success. Is this answer still valid or do you know some new solutions?

Thanks

[vitalets]

Hi @sven09 Could you show some output / errors?

[vrgimael]

Does anybody know if this actually works with react-native-web in 2020?