Webpack Parse Error: Unexpected token (8:2) 你可能需要一个合适的加载器来处理这个文件类型

Posted 2023-03-24

【中文标题】Webpack Parse Error: Unexpected token (8:2) 你可能需要一个合适的加载器来处理这个文件类型

【英文标题】：Webpack Parse Error: Unexpected token (8:2) You may need an appropriate loader to handle this file type

【发布时间】：2019-05-31 15:53:22

【问题描述】：

我正在尝试将 react-native-web 与现有的 react-native 应用程序结合起来，我已按照https://github.com/necolas/react-native-web/blob/master/docs/guides/multi-platform-apps.md 的说明进行操作，

由于模块解析失败，无法解析任何 JSX 代码：意外令牌 (8:2) 您可能需要适当的加载器来处理此文件类型。

错误报告

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from E:\React_Native\react-native-sdk\react-native-sample
× ｢wdm｣: Hash: 7aedd4585c7beddba8f6
Version: webpack 4.32.2
Time: 2621ms
Built at: 05/31/2019 7:03:04 PM
        Asset     Size  Chunks             Chunk Names
bundle.web.js  6.8 MiB    main  [emitted]  main
Entrypoint main = bundle.web.js
[1] multi (webpack)-dev-server/client?http://localhost (webpack)/hot/dev-server.js ./index.js 52 bytes main [built]
[./index.js] 1.62 KiB main [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB main [built]
[./node_modules/querystring-es3/index.js] 127 bytes main [built]
[./node_modules/react-native-web/dist/index.js] 8.86 KiB main [built]
[./node_modules/strip-ansi/index.js] 161 bytes main [built]
[./node_modules/url/url.js] 22.8 KiB main [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost] (webpack)-dev-server/client?http://localhost 9.26 KiB main [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB main [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB main [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes main [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.61 KiB main [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes main [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB main [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.11 KiB main [built]
    + 302 hidden modules

ERROR in ./src/App.js 8:2
Module parse failed: Unexpected token (8:2)
You may need an appropriate loader to handle this file type.
| 
| const Link = props => (
>   <Text
|     ...props
|     accessibilityRole="link"
 @ ./index.js 29:0-28 34:54-57
 @ multi ./index.js
i ｢wdm｣: Failed to compile.

在 webpack.config.js 中尝试了多个插件和预设

 i. presets: [require.resolve('babel-preset-react-native')],

 ii. presets: ['react-native']

react-native-sample -> package.json

web/webpack.config.js

metro.config.js

babel.config.js

    module.exports = 
      presets: ['module:metro-react-native-babel-preset'],
    ;

任何帮助都是最有帮助的。

【问题讨论】：

尝试将此添加到您的package.json 文件"babel": "presets": ["react-app"] 并重新启动您的应用程序。

谢谢@ravibagu91。这是 RegExp 的问题。在webpack.config.js 更改正则表达式后，它得到了解决。

【参考方案1】：

我想将我的问题的解决方案提供给寻求相同解决方案的其他人。尽管在 cmets 中提供了解决方案，因为每个人都可以尝试在答案部分中找到解决方案。

根据Tobias Koppers RegExp 不允许包含对象配置，将我的包含模块配置更改为src 和node_modules webpack 配置中的路径解决了这个问题。

 path.resolve(appDirectory, '/src/*'),
 path.resolve(appDirectory, '/node_modules/react-native-*'),

到这里

 path.resolve(appDirectory, 'src'),
 path.resolve(appDirectory, 'node_modules'),

修复了这个问题。