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

Question

我正在尝试深入研究 React 生态系统，但在将 react-native-web 与我的 React Native 应用程序一起使用时遇到问题。我在 https://github.com/thedarklord1/testNativeWithWeb 上托管了该应用程序。我已经使用 Redux Store 和 React Native 构建了一个非常简单的 POC 来构建计算器。 Android 和 iOS 版本正在按预期执行。我面临的问题是，在尝试运行 webpack-dev-server 以将 react-native-web 用于网络时，它失败并显示错误

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

我对 React 和 WebPack 生态系统还很陌生，非常感谢任何帮助或指点。 TIA。

编辑：我正在使用命令 webpack-dev-server -d --config web/webpack.config.js --inline --hot --colors 到运行服务器。

Answer 1

在您的 package.json 中将脚本标记替换为

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

并使用 npm install webpack-dev-server --hot

安装 "webpack-dev-server --hot"

并且运行您的应用使用

npm start

您还需要将代码包含在 return 内的标记中，如

 render() {

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

并确保你已经安装了所有的 babel 依赖项来编译你的代码

Answer 2

您需要转译为 es2015，因为大多数浏览器本身并不理解现代 JS。

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

在您的 webpack 配置中添加一个加载器。那应该可以了。

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

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

reactjs

react-native

webpack

babeljs

react-native-web