Webpack Parse Error: Unexpected token (8:2) You may need an appropriate loader to handle this file type

Question

我正在尝试将 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'],
    };

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

Answer 1

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

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

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

对此

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

已解决此问题。

Webpack Parse Error: Unexpected token (8:2) You may need an appropriate loader to handle this file type

Webpack Parse Error: Unexpected token (8:2) You may need an appropriate loader to handle this file type

transpiler

webpack

babeljs

react-native-web

babel-loader