1"use strict";(self.webpackChunkcra_docs=self.webpackChunkcra_docs||[]).push([[3412],{876:function(e,t,r){r.d(t,{Zo:function(){return u},kt:function(){return m}});var a=r(2784);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function n(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?n(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):n(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,a,o=function(e,t){if(null==e)return{};var r,a,o={},n=Object.keys(e);for(a=0;a<n.length;a++)r=n[a],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(a=0;a<n.length;a++)r=n[a],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var i=a.createContext({}),l=function(e){var t=a.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},u=function(e){var t=l(e.components);return a.createElement(i.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=a.forwardRef((function(e,t){var r=e.components,o=e.mdxType,n=e.originalType,i=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),d=l(r),m=o,f=d["".concat(i,".").concat(m)]||d[m]||c[m]||n;return r?a.createElement(f,s(s({ref:t},u),{},{components:r})):a.createElement(f,s({ref:t},u))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var n=r.length,s=new Array(n);s[0]=d;var p={};for(var i in t)hasOwnProperty.call(t,i)&&(p[i]=t[i]);p.originalType=e,p.mdxType="string"==typeof e?e:o,s[1]=p;for(var l=2;l<n;l++)s[l]=r[l];return a.createElement.apply(null,s)}return a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},4281:function(e,t,r){r.r(t),r.d(t,{frontMatter:function(){return p},contentTitle:function(){return i},metadata:function(){return l},toc:function(){return u},default:function(){return d}});var a=r(7896),o=r(1461),n=(r(2784),r(876)),s=["components"],p={id:"supported-browsers-features",title:"Supported Browsers and Features",sidebar_label:"Supported Browsers and Features"},i=void 0,l={unversionedId:"supported-browsers-features",id:"supported-browsers-features",title:"Supported Browsers and Features",description:"Supported Browsers",source:"@site/../docs/supported-browsers-features.md",sourceDirName:".",slug:"/supported-browsers-features",permalink:"/docs/supported-browsers-features",editUrl:"https://github.com/facebook/create-react-app/edit/main/docusaurus/website/../docs/supported-browsers-features.md",tags:[],version:"current",lastUpdatedBy:"Dan Abramov",lastUpdatedAt:1625672679,formattedLastUpdatedAt:"7/7/2021",frontMatter:{id:"supported-browsers-features",title:"Supported Browsers and Features",sidebar_label:"Supported Browsers and Features"},sidebar:"docs",previous:{title:"Available Scripts",permalink:"/docs/available-scripts"},next:{title:"Updating to New Releases",permalink:"/docs/updating-to-new-releases"}},u=[{value:"Supported Browsers",id:"supported-browsers",children:[],level:2},{value:"Supported Language Features",id:"supported-language-features",children:[],level:2},{value:"Configuring Supported Browsers",id:"configuring-supported-browsers",children:[],level:2}],c={toc:u};function d(e){var t=e.components,r=(0,o.Z)(e,s);return(0,n.kt)("wrapper",(0,a.Z)({},c,r,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h2",{id:"supported-browsers"},"Supported Browsers"),(0,n.kt)("p",null,"By default, the generated project supports all modern browsers. Support for Internet Explorer 9, 10, and 11 requires polyfills. For a set of polyfills to support older browsers, use ",(0,n.kt)("a",{parentName:"p",href:"https://github.com/facebook/create-react-app/blob/main/packages/react-app-polyfill/README.md"},"react-app-polyfill"),"."),(0,n.kt)("h2",{id:"supported-language-features"},"Supported Language Features"),(0,n.kt)("p",null,"This project supports a superset of the latest JavaScript standard. In addition to ",(0,n.kt)("a",{parentName:"p",href:"https://github.com/lukehoban/es6features"},"ES6")," syntax features, it also supports:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/rwaldron/exponentiation-operator"},"Exponentiation Operator")," (ES2016)."),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/tc39/ecmascript-asyncawait"},"Async/await")," (ES2017)."),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/tc39/proposal-object-rest-spread"},"Object Rest/Spread Properties")," (ES2018)."),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/tc39/proposal-dynamic-import"},"Dynamic import()")," (stage 4 proposal)"),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://github.com/tc39/proposal-class-public-fields"}
1,"Class Fields and Static Properties")," (part of stage 3 proposal)."),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://facebook.github.io/react/docs/introducing-jsx.html"},"JSX"),", ",(0,n.kt)("a",{parentName:"li",href:"./adding-flow"},"Flow")," and ",(0,n.kt)("a",{parentName:"li",href:"./adding-typescript"},"TypeScript"),".")),(0,n.kt)("p",null,"Learn more about ",(0,n.kt)("a",{parentName:"p",href:"https://tc39.github.io/process-document/"},"different proposal stages"),"."),(0,n.kt)("p",null,"While we recommend using experimental proposals with some caution, Facebook heavily uses these features in the product code, so we intend to provide ",(0,n.kt)("a",{parentName:"p",href:"https://medium.com/@cpojer/effective-javascript-codemods-5a6686bb46fb"},"codemods")," if any of these proposals change in the future."),(0,n.kt)("p",null,"Note that ",(0,n.kt)("strong",{parentName:"p"},"this project includes no ",(0,n.kt)("a",{parentName:"strong",href:"https://github.com/facebook/create-react-app/blob/main/packages/react-app-polyfill/README.md"},"polyfills"))," by default."),(0,n.kt)("p",null,"If you use any other ES6+ features that need ",(0,n.kt)("strong",{parentName:"p"},"runtime support")," (such as ",(0,n.kt)("inlineCode",{parentName:"p"},"Array.from()")," or ",(0,n.kt)("inlineCode",{parentName:"p"},"Symbol"),"), make sure you are ",(0,n.kt)("a",{parentName:"p",href:"https://github.com/facebook/create-react-app/blob/main/packages/react-app-polyfill/README.md"},"including the appropriate polyfills manually"),", or that the browsers you are targeting already support them."),(0,n.kt)("h2",{id:"configuring-supported-browsers"},"Configuring Supported Browsers"),(0,n.kt)("p",null,"By default, the generated project includes a ",(0,n.kt)("a",{parentName:"p",href:"https://github.com/browserslist/browserslist"},(0,n.kt)("inlineCode",{parentName:"a"},"browserslist"))," configuration in your ",(0,n.kt)("inlineCode",{parentName:"p"},"package.json")," file to target a broad range of browsers based on global usage (",(0,n.kt)("inlineCode",{parentName:"p"},"> 0.2%"),") for production builds, and modern browsers for development. This gives a good development experience, especially when using language features such as async/await, but still provides high compatibility with many browsers in production."),(0,n.kt)("p",null,"The ",(0,n.kt)("inlineCode",{parentName:"p"},"browserslist")," configuration controls the outputted JavaScript so that the emitted code will be compatible with the browsers specified. The ",(0,n.kt)("inlineCode",{parentName:"p"},"production")," list will be used when creating a production build by running the ",(0,n.kt)("inlineCode",{parentName:"p"},"build")," script, and the ",(0,n.kt)("inlineCode",{parentName:"p"},"development")," list will be used when running the ",(0,n.kt)("inlineCode",{parentName:"p"},"start")," script. You can use ",(0,n.kt)("a",{parentName:"p",href:"https://browserl.ist/?q=%3E+0.2%25%2C+not+dead%2C+not+op_mini+all"},"https://browserl.ist")," to see the browsers supported by your configured ",(0,n.kt)("inlineCode",{parentName:"p"},"browserslist"),"."),(0,n.kt)("p",null,"Here is an example ",(0,n.kt)("inlineCode",{parentName:"p"},"browserslist")," that is specified in ",(0,n.kt)("inlineCode",{parentName:"p"},"package.json"),":"),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-json"},'"browserslist": {\n "production": [\n ">0.2%",\n "not dead",\n "not op_mini all"\n ],\n "development": [\n "last 1 chrome version",\n "last 1 firefox version",\n "last 1 safari version"\n ]\n}\n')),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"Note that this does not include polyfills automatically for you. You will still need to polyfill language features (see above) as needed based on the browsers you are supporting.")),(0,n.kt)("blockquote",null,(0,n.kt)("p",{parentName:"blockquote"},"When editing the ",(0,n.kt)("inlineCode",{parentName:"p"},"browserslist")," config, you may notice that your changes don't get picked up right away. This is due to an ",(0,n.kt)("a",{parentName:"p",href:"https://github.com/babel/babel-loader/issues/690"},"issue in babel-loader")," not detecting the change in your ",(0,n.kt)("inlineCode",{parentName:"p"},"package.json"),". A quick solution is to delete the ",(0,n.kt)("inlineCode",{parentName:"p"},"node_modules/.cache")," folder and try again.")))}d.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.