Unable to run webpack-dev-server on react-native-web. ERROR: You may need an appropriate loader to handle this file type

Question

I am trying to dive into React ecosystem and having issues with using react-native-web with my React Native Application. I have hosted the application on https://github.com/thedarklord1/testNativeWithWeb. I have used Redux Store and React Native to build a very simple POC to build a calculator. The Android and the iOS versions are executing as expected. The issue that I am facing is that, while trying to run webpack-dev-server, to use react-native-web for web, it is failing with the error

ERROR in ./src/App.js
Module parse failed: /Users/abhishekkumar/Desktop/Credifiable/front_end/testNativeWithWeb/src/App.js Unexpected token (9:6)
You may need an appropriate loader to handle this file type.
|   render() {

|     return (
|       <Provider store={store}>
|         <AppContainer/>
|       </Provider>
 @ ./index.web.js 1:0-28
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.web.js

I am fairly new to the React and WebPack ecosystem and any help or pointer is appreciated. TIA.

EDIT: I am using the command webpack-dev-server -d --config web/webpack.config.js --inline --hot --colors to run the server.

Answer 1

You need to transpile to es2015 since most of the browsers do not natively understand modern JS.

loaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'stage-0', 'react']
            }
        }
    ]

Add a loader to your webpack config. It should work then.

Answer 2

In your package.json replace the script tag with

  "scripts": {
    "start": "webpack-dev-server --hot"
  },

and install "webpack-dev-server --hot" using npm install webpack-dev-server --hot

And run your app using

npm start

Also you need to enclose your code in tag inside return as

 render() {

     return (
<div>
       <Provider store={store}>
         <AppContainer/>
       </Provider>
</div>

and make sure you have installed all the babel dependencies to compile your code