无法在 react-native-web 上运行 webpack-dev-server。错误：您可能需要适当的加载程序来处理此文件类型

Posted 2023-02-22

【中文标题】无法在 react-native-web 上运行 webpack-dev-server。错误：您可能需要适当的加载程序来处理此文件类型

【英文标题】：Unable to run webpack-dev-server on react-native-web. ERROR: You may need an appropriate loader to handle this file type

【发布时间】：2018-01-18 14:25:06

【问题描述】：

我正在尝试深入研究 React 生态系统，但在我的 React Native 应用程序中使用 react-native-web 时遇到问题。我在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 来运行服务器。

【问题讨论】：

分享你的 webpack 和 package.json

嘿 Vikram，webpack config 和 package.json，我都在 github.com/thedarklord1/testNativeWithWeb

尝试安装 npm install babel-preset-es2015 然后配置 babel-loader 为 test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/,查询：预设：['es2015']

似乎 babel-loader 配置有问题。也尝试在 babelloader 配置中将 test: 更改为 test: /\.jsx?$/

肯定会试一试，然后返回结果。谢谢！

【参考方案1】：

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

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

在你的 webpack 配置中添加一个加载器。那么它应该可以工作了。

【讨论】：

这个，另外不要忘记将加载器实际安装为 npm 包。

【参考方案2】：

在你的 package.json 中将 script 标签替换为

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

并使用 npm install webpack-dev-server --hot 安装“webpack-dev-server --hot”

并使用

运行您的应用程序

npm start

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

 render() 

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

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

【讨论】：

嘿维克拉姆，这不是我要找的答案。你的解决方案不能解决我的问题。谢谢！