colors.es2015.js const not supported in older browser (Safari 9)

[sethlesky]

I see export const in colors.es2015.js

This causes issues in browsers like Safari 9: SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.

I'm trying to understand whether I should be using babel to transpile this module to es5 replacing const with var. I would guess that packages that get installed to node_modules would not need transpilation. I need to use strict mode. Curious how to proceed.

Any suggestions?

[shuhei]

If you want to use it on old browsers without any transpiler, I recommend colors.js.

[sethlesky]

Thanks for your response. I see that now. I'm using react-color (https://github.com/casesandberg/react-color) which has material-color as a dependency. Just trying to get react-color to use colors.js instead of colors.es2015.js. Sorry if this is the wrong place for this issue.

[shuhei]

Now I understand the context. However, react-color doesn't seem to be using colors.es2015.js. It seems to be using this package's main script, which is dist/colors.js. Anyway, please ask how to use react-color at its own repo.

[darkowic]

@sethlesky what have you done to solve this problem? I have same issue with this library

[darkowic]

@shuhei

"jsnext:main": "dist/colors.es2015.js",

If I use webpack 2 it will use it. I think it is a bug. It should be exported as a module.

[shuhei]

@darkowic Ah, I overlooked it when I made the comment above. However, ES module is always in strict mode and dist/colors.es2015.js doesn't need to have 'use strict';.

What do you mean by "It should be exported as a module."?

[darkowic]

In es6 imported values are const anyway http://stackoverflow.com/a/32558929/5185634

What do you mean by "It should be exported as a module."?

After a moment I realize that it will not solve the problem...

I dont know how to avoid the problem with const and strict. I've tried to compile it wiht babel using this solution http://stackoverflow.com/questions/33878586/safari-babel-webpack-const-declarations-are-not-supported-in-strict-mode but it didnt helped

[darkowic]

I solved my problem by adding another rule for the material-colors

{
      test: /\.js$/,
      include: [
        path.resolve(process.cwd(), "node_modules/material-colors/")
      ],
      loader: 'babel-loader',
      query: {
        plugins: ['transform-runtime', 'transform-es2015-block-scoping'],
      }
    },

[shuhei]

I think it's a problem of how you build your app using webpack 2. Not this package or react-color. It will happen with other packages with jsnext:main. I guess webpack community should have better solution.

[darkowic]

I use presets latest, react and stage-0. It is possible that I missed there something. Anyway, thanks for help!

[shuhei]

After leaving my office, did some research on jsnext:main. https://github.com/jsforum/jsforum/issues/5

To my surprise, the community recommends it to be a ES2015 module with no other ES2015+ features! It doesn't make sense ag all to me, but I'll fix it or remove it later. Sorry for the confusion.

[darkowic]

Oh thanks for it! This is interesting. But its very confusing - from one side I would like to import "nexjs" component but on the other hand I would like to get working code that I don't have to compile (like the author wrote I dont know which compiler I should use).

For other older libraries that I want to use I have to use imports-loader to get it works...

import "imports-loader?$=jquery&define=>false!blueimp-file-upload/js/jquery.fileupload-process";

With nexjs it is easier :)

[shuhei]

Fixed in https://github.com/shuhei/material-colors/commit/9408aedb7ef870b0bb56f9e371398dac8cb67f53 and 1.2.1.

[shuhei]

Also added another one, "module".