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

Question

I am trying to intigrate react-native-web with an existing react-native app, I have followed https://github.com/necolas/react-native-web/blob/master/docs/guides/multi-platform-apps.md instructions,

Unable to parse the any JSX code, due to Module parse failed: Unexpected token (8:2) You may need an appropriate loader to handle this file type.

Bug Report

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.

Tried with multiple plugins and presets in 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'],
    };

Any help would be most helpful.

Answer 1

I want to provide the solution to my question to others whoever is looking for the same resolution. Though the resolution is provided in the comments since It is obvious to everyone to try find the solution in the answers sections.

As per Tobias Koppers RegExp's are not allowed for include object configuration, changing my include modules configuration to src and node_modules path in babel configuration of webpack resolved this.

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

To this

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

Fixed this issue.