Javascriptservices: Enable babel-plugin-transform-react-jsx-source in development for better warning messages

[gaearon]

In Create React App, we enable babel-plugin-transform-react-jsx-source in development configuration. I would suggest you to do the same.

It must only be enabled in development (since it produces bigger bundles). When it is enabled, React warnings get component stack traces with exact line numbers.

Example before:

Example after:

Hope you find this useful!

[DanHarman]

I don't currently have time to make a pull request for this and get up to speed with how the templates are defined etc, but if anyone wants to add this feature either locally or contribute then this seems to work ok:

npm install --save-dev babel-plugin-transform-react-jsx-source

and modifying the webpack rule for babel-loader as below:

module: {
            rules: [
                { test: /\.tsx?$/, include: /ClientApp/, use: { loader: 'babel-loader', options: { plugins: isDevBuild ? ["transform-react-jsx-source"] : [] } } },
                { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' }
            ]
        },

[DanHarman]

Addtionally wondering if we shouldn't be setting cacheDirectory: true in the babel options. Theoretically improves compilation times, but I don't know enough about this template to be sure it won't cause probs.

[DanHarman]

ok decided to man up, pull request incoming :) The cache does speed up the webpack build by 30-40%.

[gaearon]

We use cacheDirectory: true in babel-loader options in CRA and it works great.

[DanHarman]

That might have been where I got the idea from ;)

[SteveSandersonMS]

Thanks for the suggestion. Since @DanHarman is implementing this in #749, I'll close this one.

BTW @gaearon thanks for the wonderful work on Redux. I especially like the docs - really easy and fun to read through.

[SteveSandersonMS]

@gaearon Do you know if there's some way to make babel-plugin-transform-react-jsx-source work with source maps, or some other equivalent Webpack loader that supports compile-to-JS languages such as TypeScript?

From what I can tell, if we include babel-plugin-transform-react-jsx-source as-is in the Webpack config, it does add line numbers to warnings, but they are the wrong line numbers because (presumably) they refer to some intermediate .jsx representation of the source, not the original .tsx files.

[gaearon]

Oh, I see. It uses information as provided by Babel. I don’t know about how TS and Babel interaction is set up so I can’t really answer that.

[SteveSandersonMS]

OK, thanks for the info! I'll see whether anyone else knows if there's a way to get the original line numbers to flow through somehow. If not, I guess we'd have to just not add this change.

[gaearon]

Maybe @hzoo could say whether there’s a any way to tell Babel to infer the original location information from a TS sourcemap (or something like this) or not.

[hzoo]

I don't think we do anything special with sourcemaps other than use the source-map package.?

The location that is referenced ^ is just from the AST passed into Babel that is reading the JSX. Just my thoughts, but I don't think it has to do with sourcemaps because the Babel plugin runs on the source code itself. I believe we'd need to support TS in babylon for this feature

[loganfsmyth]

We'd either have to have Babylon take the input sourcemap into account, or we'd have parse and then iterate over the AST afterward in babel-core to adjust the positions. I don't think there's anything technically blocking that, but we do not do that right now.

[SteveSandersonMS]

Thanks for the info! If this gets implemented one day, we will change the templates to take advantage of it. In the meantime we'll leave things as-is.