Unexpected token (8:2) You may need an appropriate loader to handle this file type
- Dominant language
- JavaScript
- Stars
- 4.8k
- Forks
- 456
- Avg merge
- 9h 19m
- Merged PRs (30d)
- 2
Description
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 => (
> package.json](https://gist.github.com/srikanthsunkari/64377454251739266ee5cd092209018e#file-package-json)**
**[web/webpack.config.js](https://gist.github.com/srikanthsunkari/64377454251739266ee5cd092209018e#file-webpack-config-js)**
**[metro.config.js](https://gist.github.com/srikanthsunkari/64377454251739266ee5cd092209018e#file-metro-config-js)**
**babel.config.js**
```
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
```
Any help would be most helpful.
Thank you.
Contributor guide
Research direction
Start by comparing web/webpack.config.js and babel.config.js with the linked react-native-sample configuration, then inspect the JSX entry in src/App.js and the webpack error output. Done means the existing React Native app compiles its JSX for the web target without the Module parse failed error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- babel, javascript, react-native, webpack
- Domain
- build-system, frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100