Babel target ie11

GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together. Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account. Possible Solution It looks like webpack is using Promise.

Hey sarod! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly. If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

This looks like a duplicate of Skip to content. Dismiss Join GitHub today GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.

Sign up. New issue. Jump to bottom. Labels i: bug i: duplicate i: needs triage outdated. Copy link Quote reply. Babel Configuration. Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in. Linked pull requests. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Node 8.By using our site, you acknowledge that you have read and understand our Cookie PolicyPrivacy Policyand our Terms of Service.

babel target ie11

Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. I'm writing JS app using webpack along with babel and preset-env to compile the code and ensure browser compatibility, the code is being compiled but I'm getting this error on IE If you need to support legacy targets or deal with targets that don't support modulesyou can use the commonJS export by simply appending.

Learn more. Asked 1 year ago. Active 1 year ago. Viewed 3k times. Scrocchi Scrocchi 52 1 1 silver badge 6 6 bronze badges. You probably need to have your compilation target set to ES5.

Subscribe to RSS

IE11 doesn't support arrow functions. Scrocchi If it were working you wouldn't have arrow functions in the result. Active Oldest Votes. Try this in your. Sreeram Padmanabhan Sreeram Padmanabhan 1, 5 5 silver badges 11 11 bronze badges. Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown.

The Overflow Blog. Tales from documentation: Write for your clueless users. Podcast a conversation on diversity and representation. Upcoming Events. Featured on Meta. Feedback post: New moderator reinstatement and appeal process revisions. The new moderator agreement is now live for moderators to accept across the….

Allow bountied questions to be closed by regular users. Linked Hot Network Questions. Question feed. Stack Overflow works best with JavaScript enabled.This both makes your life easier and JavaScript bundles smaller! We leverage these data sources to maintain mappings of which version of our supported target environments gained support of a JavaScript syntax or browser feature, as well as a mapping of those syntaxes and features to Babel transform plugins and core-js polyfills.

For browser- or Electron-based projects, we recommend using a. You may already have this configuration file as it is used by many tools in the ecosystem, like autoprefixerstylelinteslint-plugin-compat and many others. For more information on setting options for a preset, refer to the preset options documentation.

This can either be a browserslist-compatible query with caveats :. Example environments: chromeoperaedgefirefoxsafariieiosandroidnodeelectron. We don't recommend using preset-env this way because it doesn't take advantage of its ability to target specific browsers.

When specifying this option, the browsers field will be ignored. If you want to compile against the current node version, you can specify "node": true or "node": "current"which would be the same as "node": process. If you want to compile against the technology preview version of Safari, you can specify "safari": "tp".

Note: this will be removed in later version in favor of just setting "targets" to a query directly. These groups can be large and include a lot of edge cases, for example "function arguments" includes destructured, default and rest parameters.

Depending on your targets and on how many modern syntax you are using, this can lead to a significant size reduction in the compiled app. Enable more spec compliant, but potentially slower, transformations for any plugins in this preset that support them. Enable "loose" transformations for any plugins in this preset that allow them. Built-ins both for core-js 2 and core-js 3such as es. Note that the above. Also note that to match any character. For example, Node 4 supports native classes but not spread.

To use a plugin not included with this preset, add them to your "plugins" directly. When either the usage or entry options are used, babel-preset-env will add direct references to core-js modules as bare imports or requires.Babel can be configured!

Many other tools have similar configs: ESLint. All Babel API options are allowed. However, if the option requires JavaScript, you may want to use a JavaScript configuration file.

Babel is a JavaScript compiler.

We recommend using the babel. Babel itself is using it. Create a file called babel. Check out the babel. Check out the. Alternatively, you can choose to specify your. You can also write babel. You are allowed to access any Node. You can read more about JavaScript configuration files in the dedicated documentation. Check out the babel-cli documentation to see more configuration options.

Check out the babel-core documentation to see more configuration options. Guides What is Babel? Usage Options Config Files cli polyfill transform-runtime register. Presets env flow react typescript. Tooling parser core generator code-frame helpers runtime template traverse types. What's your use case?

You are using a monorepo? You have a configuration that only applies to a single part of your project? Guy Fieri is your hero?GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.

babel target ie11

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account. Possible Solution I tried to add babel-preset-es and configure IE as supported browsers in. Hey volokolamskspb! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

babel target ie11

So what is on line 37 for you? You haven't shown us any code, so that would be the place to start. What specific syntax is not getting converted, and thus causing the issue? Also, is IE running in compatibility mode, or running as proper IE 11? Line 37 when I open it is an empty line with only comments, from what I can see, and I don't have an IE11 installation to test with.

The problem is probably in Webpack. I included script which is compiled by webpack and it throws an error on line where eval starts. I'm sorry, this problem is not related to Babel. I found the solution.

Had to add devtools to webpack. Skip to content. Dismiss Join GitHub today GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together. Sign up.

Configuring Babel 7

New issue. Jump to bottom. Labels outdated. Copy link Quote reply. IE11 does not recognize let volokolamskspb btw, your website list all static files What is your Webpack config? Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in. Linked pull requests.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window.With the recent release of Babel 7, it's the perfect time to really get to know it.

A post on what Babel is, what it does and how to use it. Important : If you are using Babel 7. This is what the website says:. Babel is a JavaScript transpiler, something that compiles other code down to a standardized version of JavaScript.

It can also be used to transpile Typescript or other languages to javascript. That way you can write next-generation javascript and old browsers or node can use your javascript. If you have a look at the ECMAScript 6 compatibility table you can see that writing code that works on all devices or all devices you want to target can be complicated. You would have to manually check for specific browser support if want to use some of javascript newest features.

Babel does a lot of this heavy lifting for you. Create a new folder babel-test and inside the folder make a index. Run npm init from the command-line in the root of your project, this will create a package. Create a webpack. What we are saying here in our config file: look for an entry point. So go ahead and make a src -folder and a dist -folder. Inside the src -folder create a javascript file called main.

To test if our Webpack is working, we will add a console. When you run npm run dev the script you added to your package.

@babel/preset-env

If you point your local server environment Mamp, Laravel Valet, … to the root of this project and open the website, you should see the console. Notice that the npm run dev command has the --watch flag in our package. This way we can play around with our javascript, without having to manually refresh the page each time. However, if you make changes to the webpack. Everything works fine so far, but what happens if we try to use some next-generation javascript in our code?

Change the code inside main. We make an array, and loop over each item with the Array. When you check the console on a modern browser, you will see the output 1 2 3but what happens when you open the console in IE11? Why is this? How would you make sure that IE11 users can use your next-gen javascript code? We will need a couple of different things to set up Babel: a couple of npm-packagesa. Note that you do not really need a.GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account. This seems to be from a5e76b8 and thus introduced in 3. This latter syntax isn't supported by IE11, causing issues in production, specifically the error "Expected hexadecimal digit".

Related to You can see the uglify behavior on this online example. We are experiencing the same issue, and just fixed it by changing our production.

Will push an option for this in environment during the weekend. In meantime, please use the solution suggested by danielma. Even with Webpacker 3. I just spent a looong time googling for a solution to this. I'm going to add what I was searching for as a comment here to hopefully save other peoples time. I am aiming to provide an option for this in Webpacker 4.

Thank you. I think there are still a decent number of teams that need ES5 to support IE Having a first class option to change this config will be helpful. The solution by danielma works for us, thank you. Since Webpacker aims to provide a preconfigured pipeline that includes both Babel and UglifyJS by default, maybe the default config could target the same browsers in all processing steps? Webpacker's default.

Just bumped into this problem. We've investigated for a very long time before finding this issue. Wish we'd seen it before. After danielma 's fix, the code looked like proper ES I agree with triskweline I suspect that the majority of babel users are using it to transpile to ES5.

Seeing UglifyJs ruining it is clearly not what they are expecting and they will have a hard time to understand where the issue is coming from. If you updated to Webpacker 4 Webpack 4 and are using the default config, the workaround is to add this line to your production.

This is quite a big issue IMHO and took hours to track down. You can use this as a workaround in your environment. It does look like comment which i didn't see is essentially the same. Well, glad it worked.

I noticed there has not been a release since this fix was merged Looks like this was closed with v3. R-obert Have you updated both gem and npm package to 3. I'm having the same issue.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *