Cannot start webpack-dev-server on response-native-web site. ERROR: you may need an appropriate loader to process this file type

Question

I'm trying to dive into the React ecosystem and have problems using react-native-web with my React Native Application. I posted the app at https://github.com/thedarklord1/testNativeWithWeb . I used the Redux Store and React Native to create a very simple POC to create a calculator. The Android and iOS versions are running as expected. The problem that I encountered is that when I try to start webpack-dev-server to use react-native-web for the network, it does not work with an 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 new to the React and WebPack ecosystem, and any help or pointer appreciated. TIA.

EDIT: I use the command webpack-dev-server -d --config web/webpack.config.js --inline --hot --colors to start the server.

Answer 1

You need to switch to es2015 as most browsers do not understand modern JS.

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

Add the loader to your web package configuration. He should work then.

Answer 2

In your package.json package, 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 the application using

 npm start 

You also need to wrap your code in a 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 the code