babel / babel/babel-loader

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

Open
#791 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.