React-native-web: Outdated Webpack stuff in Getting Started guide ?

[Freddy03h]

Do you want to request a feature or report a bug?
Outdated documentation or maybe bug

What is the current behavior?
Can't setup react-native-web in an existing react-native project (react-native 0.50.4, no crna)

If the current behavior is a bug, please provide the steps to reproduce and
if a minimal demo of the problem via Glitch or similar (template:
https://glitch.com/edit/#!/react-native-web-playground).

1. Following the Quick start guide and then the Getting Started guide.
2. Can't _run in development_ because I don't have any webpack-dev-server in ./node_modules/.bin
3. So I add it manually yarn add --dev webpack-dev-server
4. error "path" and "webpack" aren't defined in web/webpack.config.js, copied from Getting Started
5. Manually add require at top of the file const path = require('path'); const webpack = require('webpack');
6. Then get Configuration file found but no entry configured. Use --help to display the CLI options
7. So, I try the _build for production_ too : Error: 'output.filename' is required, either in config file or as --output-filename

What is the expected behavior?
All seems relative to webpack
Maybe Getting Started guide isn't up to date ?

I'm doing only react-native since severals months so I'm not up to date with webpack ^^' but maybe I still can help for updating the Getting Started guide ?
Or maybe this guide will disappear for a recommended Starter kit ? (but I don't find in re-start a way to setup in an existing react-native project, only template for init)

Environment (include versions). Did this work in previous versions?

• OS: macOS 10.13.1
• Yarn : 1.3.2
• Node : 9.1.0
• Device: -
• Browser: -
• React Native for Web (version): 0.1.16
• React Native (version): 0.50.4 (no crna)
• React (version): 16.0.0 before adding react-native-web, 16.2.0 after

[necolas]

The webpack stuff is an example. It even has this in the file // ...the rest of your config

[jardayn]

Yes, but the getting started guide in itself is hard to comprehend.
It's already been an hour that i've spent trying to set up react-native-web, and got nowhere.
And this is considering I have a JS guy helping me.

Imo there needs to be a step by step guide for setting an example app that can be ran both on native devices and in web browsers

[necolas]

The issue with that is that there's no "one way" to do that. You need to understand what outcomes you want and then configure the tools (especially webpack) appropriately. Eventually we will have smarter bundler infrastructure and you won't need to know about RN or use webpack, but we're not there yet. Perhaps it would be less confusing if I remove the example setup and link to webpack/create-react-app docs instead.

[jardayn]

@necolas I think there should be at least "a way" of doing things. For the people that are just starting out.

The currently available starter packs are outdated, and it's a major hindrance. Also, there's no clear way of figuring out how does one even use them.

I think that if you added a simple start-pack i can clone, run npm run web and get RNW running - that'd be great. Nothing fancy is needed. Just a page that says "RNW is ready".
You can put all the configs there, so people can either copy the configs into their own projects, or just compare the ones they have with them.

I assume it won't take too much time to have a separate repo with that. And i think it'll help a lot with adoption

P.S. my problem is that i have almost no experience with modern JS. So webpack and all that stuff is going to be a pain to setup

[Freddy03h]

First, thank's for your really quick answer !

Ok sorry I miss the // ...the rest of your config
But I don't get any pre-existing webpack config because it's a react-native project…

How can I create the rest of the config file ?
I'm going on the Webpack documentation, Getting Started guide, find a minimal example config file that seem to match my issue (about entry and output).

So I add :

entry: './index.js',
output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
}

to the /web/webpack.config.js file but still don't work Module parse failed: Unexpected token It seem it don't like JSX in the index.js file.

All of this append because I'm a Webpack noob. So ok it's my fault. But I'm not the only react-native dev in that case, so just link to the webpack doc won't help…
Also why link to create-react-app ? Is it possible to use it in an existing react-native project ?

---

The Quick Start and Getting Started guides really feel incomplete. Why not providing at least one complete example for use react-native-web in an existing react-native app without a webpack config ?
What make that impossible ? Some react-native-* modules ?

[Freddy03h]

After finding various ressources :
https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
https://github.com/necolas/react-native-web/pull/445
https://github.com/ndbroadbent/react-native-web-webpack
https://github.com/react-community/react-navigation/issues/2298

(I comment/disable many package for now like redux-persiste, react-native-blur, react-native-htmlview)

I've got this configuration :
web/webpack.config.js

// web/webpack.config.js
const path = require('path');
const webpack = require('webpack');

const appDirectory = path.resolve(__dirname, '../')

const __DEV__ = process.env.NODE_ENV === 'development'

// 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(appDirectory, 'index.web.js'),
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-vector-icons'),
    path.resolve(appDirectory, 'node_modules/react-navigation'),
    path.resolve(appDirectory, 'node_modules/react-native-tab-view')
  ],

  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      // This aliases 'react-native' to 'react-native-web' and includes only
      // the modules needed by the app
      plugins: ['react-native-web/babel'],
      // The 'react-native' preset is recommended (or use your own .babelrc)
      presets: ['react-native']
    }
  }
};

// This is needed for webpack to import static images in JavaScript files
const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]'
    }
  }
};

const vectorIconsLoader = {
  test: /\.ttf$/,
  include: path.resolve(appDirectory, '../node_modules/react-native-vector-icons'),
  use: {
    loader: 'url-loader'
  },
}

module.exports = {
  entry: {
    main: './index.web.js',
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(appDirectory, 'dist')
  },

  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration,
      vectorIconsLoader
    ]
  },

  plugins: [
    // `process.env.NODE_ENV === 'production'` must be `true` for production
    // builds to eliminate development checks and reduce build size. You may
    // wish to include additional optimizations.
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      __DEV__,
    })
  ],

  resolve: {
    // If you're working on a multi-platform React Native app, web-specific
    // module implementations should be written in files using the extension
    // `.web.js`.
    extensions: [ '.web.js', '.js' ],
    alias: {
      'react-native': 'react-native-web'
    }
  }
}

.babelrc

{
  "plugins": ["react-native-web/babel", "transform-runtime"],
  "presets": ["react-native"]
}

And also monkey patching about react-navigation in their package.json to force the use of the RN version (and not the abandoned web version, that don't export Navigators)

  "sources": {
    "react-native-v1": "lib-rn/react-navigation.js",
    "web": "lib-rn/react-navigation.js"
  },
  "module": "lib-rn/react-navigation.js",
  "webpack": "lib-rn/react-navigation.js",

(anybody has a true solution for this please ?)

And for the first time I see something in the browser o/

[RangerMauve]

I've found that running all modules that start with react-native-* has been enough to support almost all my react-native dependencies. I made an (unmaintained) fork of create-react-app that has this change

[peterlandry]

Just throwing a +1 at the Getting Started being a little difficult to follow. If you don't want to put _a_ complete way to run the app in docs, an example app with code in the repo (including a complete webpack.config.js) would be a great addition to the repo and really help new users.

[raarts]

@Freddy03h: A Huge Thank You! It took me a couple of hours to 'get' webpack, but it works! Thanks!

[PeterKottas]

+1 on improving the docs a bit. What I would expect is 2 clear walk-throughts, 1 with create-react-app, one with webpack. People coming here have all sorts of backgrounds, it might not be that easy to follow. Biggest reason for me is that current state of things can repulse people from using this otherwise amazing lib.

[PeterKottas]

Also it wouldn't be the worst thing to share a word or 2 on create-react-native-app and react-native init setup. Those 2 are again common entry points for people coming here. Plus typescript setup for everything (which I know creator of this lib is not all for but hell, how can somebody not be using typescript with react! :p )