Why does my jsx code compile in js when I use npm start?

Question

can you help me please. I use React and build my app by npm. Can you tell me why when I use "npm start" my jsx code transforms to js code in browser. But when I use "npm run build" it remains in the jsx format. It is not comfortable to debug my application using transform code. And I think that it's must be conversely when I build my app the code must be transformed.

My package.json is:

 {
  "name": "kb_frontend",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.7.0"
  },
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "semantic-ui-css": "^2.2.4",
    "semantic-ui-react": "^0.61.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

After answers below, I understand that I need to attach sourcemap to my "npm start" config. How can I do this?

Thank you for helping.

score 0 · Accepted Answer · answered Nov 29 '16 at 11:29

0

JSX will always need transpiling to native JS be understood by current browsers. I guess what's happening when you run the build is that although it's still transpiled, a sourcemap is created which lets you see the 'original' or near-original in your browser.

Looks like your using create-react-app (great choice!).

answered Nov 29 '16 at 11:29

Mark Williams

2,268
1
11
14

Thank you for answer, Mark. Can you tell me, what shall I do to attach sourcemap for my "npm start" config? – Maksim Nov 29 '16 at 11:47
The link that free-soul has provided below looks promising, it enables some beta features in Chrome. I suppose it depends on how much debugging you ned to do - I've found using the transpiled code's not too bad if you've nothing too tricky to do. The React Developer tools extension for Chrome is very useful as well (as is the Redux Dev Tools if you start to use redux). – Mark Williams Nov 29 '16 at 12:01
Unfortunatly React Developer tools allow to debug elements only, not a source code – Maksim Nov 29 '16 at 12:09
Sorry yes, I know, I was just suggesting them as another tool to help debugging in general. – Mark Williams Nov 29 '16 at 12:10
No sourcemaps in dev is a known issue with create-react-app: https://github.com/facebookincubator/create-react-app/pull/109#issuecomment-234674331. If you really, really need them you may have to resort to another boilerplate environment for React, or work with webpack yourself. As you've already ran the build why not use that when you need sourcemap debugging? – Mark Williams Nov 29 '16 at 12:24
I find the **SOLUTION** for my problem. You must open node_modules\react-scripts\config\webpack.config.dev.js and in module.exports replace `devtool: 'eval'` on `devtool: 'cheap-module-source-map'`. So in production config this param is setting by default. – Maksim Nov 29 '16 at 13:07
Great, all the best! – Mark Williams Nov 29 '16 at 13:07

score 0 · Answer 2 · edited May 23 '17 at 12:24

It looks like you have used create-react-app to create your codebase.

"npm start jsx code transforms to js code in browser."

Yes that is expected, because our browsers can understand only js and not jsx. Actually it is not just JSX, you have ES6 code as well, and they need to be transpiled to ES5.
"when I use npm run build it remains in the jsx format"

I don't think so. All your JavaScript files are bundled, transpiled and minified, and will be stored inside build/static/js/
"It is not comfortable to debug my application using transform code."

Yes unfortunately, if you're debugging in browser, you will have to deal with pure JavaScipt.

But don't worry yet, you have Source Maps FTW! Refer this answer https://stackoverflow.com/a/24011617/5069226 which explains how to enable some experimental JavaScript features in Chrome Dev Tools for debugging your code with Source Maps.

Why does my jsx code compile in js when I use npm start?

2 Answers2