dist version is not compiled down to es5

[geyang]

I am running into this problem while using react-scripts.

When a project uses remark-math, if we run react-scripts build, CRA tool reports this error:

Failed to minify the code from this file: 

 	./node_modules/remark-math/index.js:4 

Inspection of the file above shows that this index.js uses a es2015 feature: default value for function parameters. The file looks like this:

// node_modules/remark-math/index.js

const inlinePlugin = require('./inline')
const blockPlugin = require('./block')

module.exports = function mathPlugin (opts = {}) {
  blockPlugin.call(this, opts)
  inlinePlugin.call(this, opts)
}

I'm not familiar with lerna, is it possible to compile the dis version to es5? This has been a recurring theme with a lot of libraries (including my own), and the community tend to end up compiling to es5 in the end.

On CRA (Create React App) and react-scripts

CRA is the way to write react app nowadays, and it doesn't allow custom webpack.config so adding whitelisted loading is out of the question (TLDR;).

[geyang]

Here is the official recommendation:

Some third-party packages don't compile their code to ES5 before publishing to npm. This often causes problems in the ecosystem because neither browsers (except for most modern versions) nor some tools currently support all ES6 features. We recommend to publish code on npm as ES5 at least for a few more years.

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify

[Rokt33r]

Is react-scripts understands module field like the below?
https://github.com/Revisolution/typed-redux-kit/blob/master/packages/trackable/package.json#L6

[geyang]

@Rokt33r I am not sure. It uses webpack and Babel underneath.

However in this case remark-math only contains three files under its root. So it doesn’t have a separate dist folder.

[Rokt33r]

@episodeyang The scripts in dist doesn't have to be tracked by git. But we can deploy them to npm.

Btw, if using module property works, I can fix it easily.

[geyang]

@Rokt33r thanks for your reply! I spend half an hour looking for the answer: here is the relevant bits from web pack's issue. TLDR; module field should use es6 syntax, but it shouldn't contain other ES6 features b/c TypeScript users might have problem.

The issue with index.js is the default value for function parameter. So placing the code under module might break for TypeScript users. Although webpack recognize the field, it is unclear if webpack actually does transpiration to the files (under module) field.

So the safest way is probably juts to transpire to ES5, point to it in main, and avoid custom webpack config for good.

webpack/webpack#1979 (comment)

[ibrahima]

Hi! Are there any updates on this? This appears to be breaking my build, UglifyJS seems to choke after I added remark-math to my project. Would love to help out if there's any way for me to do so, because I don't think I can use this otherwise, but it would greatly help my use case.

I'm assuming to fix this, we'd have to implement a build script and set up the build/publish commands as they've done in https://github.com/facebook/jest or other libraries? It seems like lerna does not know or care about those parts of the build process, if I understand it correctly.

[Rokt33r]

Fixed.
Rokt33r@eb1b812