New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
sethlesky opened this Issue Dec 30, 2016 · 14 comments

Comments

Projects
None yet
3 participants
@sethlesky

sethlesky commented Dec 30, 2016

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

This comment has been minimized.

Owner

shuhei commented Dec 30, 2016

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

@sethlesky

This comment has been minimized.

sethlesky commented Jan 1, 2017

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

This comment has been minimized.

Owner

shuhei commented Jan 1, 2017

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.

@shuhei shuhei closed this Jan 1, 2017

@darkowic

This comment has been minimized.

darkowic commented Jan 4, 2017

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

@darkowic

This comment has been minimized.

darkowic commented Jan 4, 2017

@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

This comment has been minimized.

Owner

shuhei commented Jan 4, 2017

@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

This comment has been minimized.

darkowic commented Jan 4, 2017

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

This comment has been minimized.

darkowic commented Jan 4, 2017

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

This comment has been minimized.

Owner

shuhei commented Jan 4, 2017

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

This comment has been minimized.

darkowic commented Jan 4, 2017

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

@shuhei

This comment has been minimized.

Owner

shuhei commented Jan 4, 2017

After leaving my office, did some research on jsnext:main. jsforum/jsforum#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

This comment has been minimized.

darkowic commented Jan 4, 2017

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

This comment has been minimized.

Owner

shuhei commented Jan 4, 2017

Fixed in 9408aed and 1.2.1.

@shuhei

This comment has been minimized.

Owner

shuhei commented Jan 4, 2017

Also added another one, "module".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment