Skip to content
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

The library has not been transpiled from ES6 to ES5 for browser support #700

Closed
eugenebuhor opened this issue Dec 17, 2019 · 2 comments
Closed

Comments

@eugenebuhor
Copy link

eugenebuhor commented Dec 17, 2019

Describe the bug
The main reason raising the issue is that common approach for such npm packages is being supportable by any browser. One of the way to reach it out is to transpile code written in ES6 to ES5 before moving it to npm repo. I know that this is a discussable question whether it should be consuming developer's or the library developer's responsibility of transpiling the library. But as easier to use your product for your customers as better for you, right?

To Reproduce

As the result, the outgoing error SCRIPT1028: Expected identifier, string or number appears using EDGE browser any version. ES6 rest operator has not been transpiled to ES5, and EDGE doesn't support rest operator unlike Chrome, Firefox etc.

Code reference: /react-calendar-timeline/src/lib/utility/calendar.js:624

const newItem = {
    ...item, //  <----  SCRIPT1028: Expected identifier, string or number
    [keys.itemTimeStartKey]: itemTimeStart,
    [keys.itemTimeEndKey]: itemTimeEnd,
    [keys.itemGroupKey]: isDragging
      ? _get(groups[newGroupOrder], keys.groupIdKey)
      : _get(item, keys.itemGroupKey)
  }

Expected behavior
The code of the library is transpiled to ES5 (on npm).

Library Version
any

Desktop (please complete the following information):
To see the example of caused issue:

  • OS: Windows 10
  • Browser: EDGE
  • Version: any
@eugenebuhor
Copy link
Author

eugenebuhor commented Dec 17, 2019

As a workaround follow the solution - babel/babel-loader#171
Summary:

  1. Add 'exclude all but one' rule to your webpack configuration file:
const rules = [
       ...,
       {
              test: /\.(js|jsx)$/,
              loader: 'babel-loader',
              exclude: /node_modules\/(?!react-calendar-timeline)/
       },
       ...
]
  1. If you use Babel 7, you should switch .babelrc to babel.config.js (if you haven't done it before). https://babeljs.io/docs/en/configuration#babelconfigjs

@Ilaiwi
Copy link
Collaborator

Ilaiwi commented Feb 17, 2020

@EugeneBugor you can use the transpiled version from react-calendar-timeline/lib

@Ilaiwi Ilaiwi closed this as completed Feb 17, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants