<h2 dir="auto">Bug Report</h2>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">To be completely honest: I have no idea what exactly causes this issue and I'm using technology that might not be fully prime time ready yet but let's see.</p>
<p dir="auto">I'm using Webpack + <a href="https://github.com/manuelbieh/react-ssr-setup/blob/chores-jan-21/config/webpack.config.ts/loaders.ts#L22"><code class="notranslate">babel-plugin-named-asset-import</code></a> + browserslist. I've recently upgraded Webpack to v5 and all Babel related packages as well as Babel itself to their most recent versions. Now my Webpack build now fails as soon as I try to import an SVG as React component (e.g. <code class="notranslate">import { ReactComponent as ReactLogo } from './assets/react.svg';</code>) with the following error as soon as I add anything other than <code class="notranslate">defaults</code> to my <code class="notranslate">.browserslistrc</code> file:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\helper-compilation-targets\lib\utils.js:62
  const result = plugin[environment];
                       ^
Error: Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
TypeError: [BABEL] unknown: Cannot read property 'edge' of undefined (While processing: &quot;programmatic item&quot;)
    at getLowestImplementedVersion (C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\helper-compilation-targets\lib\utils.js:62:24)
    at C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\helper-compilation-targets\lib\filter-items.js:26:77
    at Array.filter (&lt;anonymous&gt;)
    at targetsSupported (C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\helper-compilation-targets\lib\filter-items.js:25:54)
    at isRequired (C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\helper-compilation-targets\lib\filter-items.js:58:11)
    at C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\preset-env\lib\index.js:267:201
    at C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\helper-plugin-utils\lib\index.js:19:12
    at C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\core\lib\config\full.js:211:14
    at Generator.next (&lt;anonymous&gt;)
    at Function.&lt;anonymous&gt; (C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\core\lib\gensync-utils\async.js:26:3)
    at Generator.next (&lt;anonymous&gt;)
    at step (C:\htdocs\_git\react-ssr-setup\node_modules\gensync\index.js:254:32)
    at evaluateAsync (C:\htdocs\_git\react-ssr-setup\node_modules\gensync\index.js:284:5)
    at Function.errback (C:\htdocs\_git\react-ssr-setup\node_modules\gensync\index.js:108:7)
    at errback (C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\core\lib\gensync-utils\async.js:70:18)
    at async (C:\htdocs\_git\react-ssr-setup\node_modules\gensync\index.js:183:31)
    at eval (webpack://react-ssr-setup/./src/shared/assets/react.svg?./node_modules/@svgr/webpack/lib/index.js?-svgo,+titleProp,+ref:1:7)
    at Object../node_modules/@svgr/webpack/lib/index.js?-svgo,+titleProp,+ref!./src/shared/assets/react.svg (C:\htdocs\_git\react-ssr-setup\build\server\server.js:18:1)
    at __webpack_require__ (C:\htdocs\_git\react-ssr-setup\build\server\server.js:4582:32)
    at fn (C:\htdocs\_git\react-ssr-setup\build\server\server.js:4728:21)
    at eval (webpack://react-ssr-setup/./src/shared/App.tsx?:15:107)
    at Module../src/shared/App.tsx (C:\htdocs\_git\react-ssr-setup\build\server\server.js:128:1)
    at __webpack_require__ (C:\htdocs\_git\react-ssr-setup\build\server\server.js:4582:32)
    at fn (C:\htdocs\_git\react-ssr-setup\build\server\server.js:4728:21)
    at eval (webpack://react-ssr-setup/./src/server/middleware/serverRenderer.tsx?:16:69)
    at Module../src/server/middleware/serverRenderer.tsx (C:\htdocs\_git\react-ssr-setup\build\server\server.js:106:1)"><pre class="notranslate"><code class="notranslate">C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\helper-compilation-targets\lib\utils.js:62
  const result = plugin[environment];
                       ^
Error: Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
TypeError: [BABEL] unknown: Cannot read property 'edge' of undefined (While processing: "programmatic item")
    at getLowestImplementedVersion (C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\helper-compilation-targets\lib\utils.js:62:24)
    at C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\helper-compilation-targets\lib\filter-items.js:26:77
    at Array.filter (&lt;anonymous&gt;)
    at targetsSupported (C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\helper-compilation-targets\lib\filter-items.js:25:54)
    at isRequired (C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\helper-compilation-targets\lib\filter-items.js:58:11)
    at C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\preset-env\lib\index.js:267:201
    at C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\helper-plugin-utils\lib\index.js:19:12
    at C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\core\lib\config\full.js:211:14
    at Generator.next (&lt;anonymous&gt;)
    at Function.&lt;anonymous&gt; (C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\core\lib\gensync-utils\async.js:26:3)
    at Generator.next (&lt;anonymous&gt;)
    at step (C:\htdocs\_git\react-ssr-setup\node_modules\gensync\index.js:254:32)
    at evaluateAsync (C:\htdocs\_git\react-ssr-setup\node_modules\gensync\index.js:284:5)
    at Function.errback (C:\htdocs\_git\react-ssr-setup\node_modules\gensync\index.js:108:7)
    at errback (C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\core\lib\gensync-utils\async.js:70:18)
    at async (C:\htdocs\_git\react-ssr-setup\node_modules\gensync\index.js:183:31)
    at eval (webpack://react-ssr-setup/./src/shared/assets/react.svg?./node_modules/@svgr/webpack/lib/index.js?-svgo,+titleProp,+ref:1:7)
    at Object../node_modules/@svgr/webpack/lib/index.js?-svgo,+titleProp,+ref!./src/shared/assets/react.svg (C:\htdocs\_git\react-ssr-setup\build\server\server.js:18:1)
    at __webpack_require__ (C:\htdocs\_git\react-ssr-setup\build\server\server.js:4582:32)
    at fn (C:\htdocs\_git\react-ssr-setup\build\server\server.js:4728:21)
    at eval (webpack://react-ssr-setup/./src/shared/App.tsx?:15:107)
    at Module../src/shared/App.tsx (C:\htdocs\_git\react-ssr-setup\build\server\server.js:128:1)
    at __webpack_require__ (C:\htdocs\_git\react-ssr-setup\build\server\server.js:4582:32)
    at fn (C:\htdocs\_git\react-ssr-setup\build\server\server.js:4728:21)
    at eval (webpack://react-ssr-setup/./src/server/middleware/serverRenderer.tsx?:16:69)
    at Module../src/server/middleware/serverRenderer.tsx (C:\htdocs\_git\react-ssr-setup\build\server\server.js:106:1)
</code></pre></div>
<p dir="auto">In the example above the property <code class="notranslate">edge</code> of undefined cannot be read. In other cases I also had <code class="notranslate">android</code> as property that cannot be read too. I took a look at <a href="https://github.com/babel/babel/blob/master/packages/babel-helper-compilation-targets/src/utils.js#L58"><code class="notranslate">@babel\helper-compilation-targets\lib\utils.js:L58</code></a> and when I replace the line with</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const result = plugin &amp;&amp; plugin[environment];"><pre class="notranslate"><code class="notranslate">const result = plugin &amp;&amp; plugin[environment];
</code></pre></div>
<p dir="auto">it works but I don't know what consequences this will have as the function will then return <code class="notranslate">undefined</code>.</p>
<p dir="auto">This behavior can be tested on this branch:<br>
<a href="https://github.com/manuelbieh/react-ssr-setup/tree/chores-jan-21">https://github.com/manuelbieh/react-ssr-setup/tree/chores-jan-21</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="git clone git@github.com:manuelbieh/react-ssr-setup.git
cd react-ssr-setup
git checkout -b chores-jan-21
yarn install
yarn start"><pre class="notranslate"><code class="notranslate">git clone git@github.com:manuelbieh/react-ssr-setup.git
cd react-ssr-setup
git checkout -b chores-jan-21
yarn install
yarn start
</code></pre></div>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">Well, in the first place I'd expect the <code class="notranslate">named-asset-import</code> plugin to work as it did before I updated my 100 babel + webpack dependencies 😉</p>
<p dir="auto"><strong>Babel Configuration</strong></p>
<p dir="auto">Can also be found in the repo I linked above:<br>
<a href="https://github.com/manuelbieh/react-ssr-setup/blob/chores-jan-21/babel.config.js">https://github.com/manuelbieh/react-ssr-setup/blob/chores-jan-21/babel.config.js</a></p>
<p dir="auto"><strong>Environment</strong></p>

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$ npx envinfo --preset babel

  System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 14.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - C:\Program Files\nodejs\yarn.CMD
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    @babel/cli: ^7.12.10 =&gt; 7.12.10
    @babel/core: ^7.12.10 =&gt; 7.12.10
    @babel/plugin-proposal-class-properties: ^7.12.1 =&gt; 7.12.1
    @babel/plugin-proposal-object-rest-spread: ^7.12.1 =&gt; 7.12.1
    @babel/plugin-proposal-optional-chaining: ^7.12.7 =&gt; 7.12.7
    @babel/plugin-syntax-dynamic-import: ^7.8.3 =&gt; 7.8.3
    @babel/plugin-transform-modules-commonjs: ^7.12.1 =&gt; 7.12.1
    @babel/plugin-transform-runtime: ^7.12.10 =&gt; 7.12.10
    @babel/preset-env: ^7.12.11 =&gt; 7.12.11
    @babel/preset-react: ^7.12.10 =&gt; 7.12.10
    @babel/preset-typescript: ^7.12.7 =&gt; 7.12.7
    @babel/register: ^7.12.10 =&gt; 7.12.10
    babel-eslint: ^10.1.0 =&gt; 10.1.0
    babel-jest: ^26.6.3 =&gt; 26.6.3
    babel-loader: ^8.2.2 =&gt; 8.2.2
    babel-plugin-macros: ^3.0.1 =&gt; 3.0.1
    babel-plugin-named-asset-import: ^0.3.7 =&gt; 0.3.7
    babel-plugin-transform-es2015-modules-commonjs: ^6.26.2 =&gt; 6.26.2
    babel-plugin-transform-runtime-file-extensions: ^2.0.0 =&gt; 2.0.0
    eslint: ^7.19.0 =&gt; 7.19.0
    eslint-plugin-babel: ^5.3.1 =&gt; 5.3.1
    jest: ^26.6.3 =&gt; 26.6.3
    webpack: ^5.19.0 =&gt; 5.19.0"><pre class="notranslate"><code class="notranslate">$ npx envinfo --preset babel

  System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 14.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - C:\Program Files\nodejs\yarn.CMD
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    @babel/cli: ^7.12.10 =&gt; 7.12.10
    @babel/core: ^7.12.10 =&gt; 7.12.10
    @babel/plugin-proposal-class-properties: ^7.12.1 =&gt; 7.12.1
    @babel/plugin-proposal-object-rest-spread: ^7.12.1 =&gt; 7.12.1
    @babel/plugin-proposal-optional-chaining: ^7.12.7 =&gt; 7.12.7
    @babel/plugin-syntax-dynamic-import: ^7.8.3 =&gt; 7.8.3
    @babel/plugin-transform-modules-commonjs: ^7.12.1 =&gt; 7.12.1
    @babel/plugin-transform-runtime: ^7.12.10 =&gt; 7.12.10
    @babel/preset-env: ^7.12.11 =&gt; 7.12.11
    @babel/preset-react: ^7.12.10 =&gt; 7.12.10
    @babel/preset-typescript: ^7.12.7 =&gt; 7.12.7
    @babel/register: ^7.12.10 =&gt; 7.12.10
    babel-eslint: ^10.1.0 =&gt; 10.1.0
    babel-jest: ^26.6.3 =&gt; 26.6.3
    babel-loader: ^8.2.2 =&gt; 8.2.2
    babel-plugin-macros: ^3.0.1 =&gt; 3.0.1
    babel-plugin-named-asset-import: ^0.3.7 =&gt; 0.3.7
    babel-plugin-transform-es2015-modules-commonjs: ^6.26.2 =&gt; 6.26.2
    babel-plugin-transform-runtime-file-extensions: ^2.0.0 =&gt; 2.0.0
    eslint: ^7.19.0 =&gt; 7.19.0
    eslint-plugin-babel: ^5.3.1 =&gt; 5.3.1
    jest: ^26.6.3 =&gt; 26.6.3
    webpack: ^5.19.0 =&gt; 5.19.0
</code></pre></div>
<p dir="auto"><strong>Possible Solution</strong></p>
<p dir="auto">Replace this line:<br>
<a href="https://github.com/babel/babel/blob/master/packages/babel-helper-compilation-targets/src/utils.js#L58">https://github.com/babel/babel/blob/master/packages/babel-helper-compilation-targets/src/utils.js#L58</a><br>
with:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const result = plugin &amp;&amp; plugin[environment];"><pre class="notranslate"><code class="notranslate">const result = plugin &amp;&amp; plugin[environment];
</code></pre></div>
<p dir="auto">prevents the error from happening but I'm not deep enough into Babel to know what the possible implications are.</p>
<h2 dir="auto">Bug Report</h2>

<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> I would like to work on a fix!</li>
</ul>

<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">When a nested optional chaining expression is found inside a parameter position (a parameter default value, or default value inside an object or array destructuring), a <code class="notranslate">var</code> declaration is added to the function body. That variable declaration is not in effect when evaluating parameter default values and causes a <code class="notranslate">ReferenceError</code> in strict mode when the function is called.</p>
<ul dir="auto">
<li><a href="https://babeljs.io/repl#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&amp;build=&amp;builtIns=false&amp;spec=false&amp;loose=false&amp;code_lz=OQVwzgpgBGAuBOBLAxrYAoZB7AdnKWARgFZQC8UA3gL6a74BmWW5UAFAA4CG8XAtqyLEAdB3hYOARgD8o8RwBMASnIA-KuihRseLABsIwvVgDmnHvyXpaTLGyVA&amp;debug=false&amp;forceAllTransforms=false&amp;shippedProposals=false&amp;circleciRepo=&amp;evaluate=false&amp;fileSize=false&amp;timeTravel=false&amp;sourceType=module&amp;lineWrap=true&amp;presets=env%2Creact%2Cstage-2%2Cenv&amp;prettier=false&amp;targets=&amp;version=7.11.5&amp;externalPlugins=" rel="nofollow">REPL</a></li>
</ul>
<p dir="auto">To repro, you can use the Babel CLI to compile the code below and run it with Node: <code class="notranslate">babel test.js | node</code>. Error output:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const foo = (param = (_obj$prop = obj.prop1) === null || _obj$prop === void 0 ? void 0 : _obj$prop.prop2) =&gt; {
                                ^

ReferenceError: _obj$prop is not defined
    at foo ([stdin]:5:33)
    at [stdin]:11:1
    at Script.runInThisContext (vm.js:132:18)
    at Object.runInThisContext (vm.js:315:38)
    at Object.&lt;anonymous&gt; ([stdin]-wrapper:10:26)
    at Module._compile (internal/modules/cjs/loader.js:1256:30)
    at evalScript (internal/process/execution.js:98:25)
    at internal/main/eval_stdin.js:29:5
    at Socket.&lt;anonymous&gt; (internal/process/execution.js:211:5)
    at Socket.emit (events.js:326:22)"><pre class="notranslate"><code class="notranslate">const foo = (param = (_obj$prop = obj.prop1) === null || _obj$prop === void 0 ? void 0 : _obj$prop.prop2) =&gt; {
                                ^

ReferenceError: _obj$prop is not defined
    at foo ([stdin]:5:33)
    at [stdin]:11:1
    at Script.runInThisContext (vm.js:132:18)
    at Object.runInThisContext (vm.js:315:38)
    at Object.&lt;anonymous&gt; ([stdin]-wrapper:10:26)
    at Module._compile (internal/modules/cjs/loader.js:1256:30)
    at evalScript (internal/process/execution.js:98:25)
    at internal/main/eval_stdin.js:29:5
    at Socket.&lt;anonymous&gt; (internal/process/execution.js:211:5)
    at Socket.emit (events.js:326:22)
</code></pre></div>
<p dir="auto"><strong>Input Code</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="'use strict'
const obj = {}
const foo = (param = obj.prop1?.prop2) =&gt; {
  console.log(param)
}
foo()"><pre class="notranslate"><span class="pl-s">'use strict'</span>
<span class="pl-k">const</span> <span class="pl-s1">obj</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span>
<span class="pl-k">const</span> <span class="pl-en">foo</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">param</span> <span class="pl-c1">=</span> <span class="pl-s1">obj</span><span class="pl-kos">.</span><span class="pl-c1">prop1</span><span class="pl-kos">?.</span><span class="pl-c1">prop2</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">param</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span>
<span class="pl-en">foo</span><span class="pl-kos">(</span><span class="pl-kos">)</span></pre></div>
<p dir="auto"><strong>Output Code</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="'use strict';

const obj = {};

const foo = (param = (_obj$prop = obj.prop1) === null || _obj$prop === void 0 ? void 0 : _obj$prop.prop2) =&gt; {
  var _obj$prop;

  console.log(param);
};

foo();"><pre class="notranslate"><span class="pl-s">'use strict'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">obj</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-en">foo</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">param</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">_obj$prop</span> <span class="pl-c1">=</span> <span class="pl-s1">obj</span><span class="pl-kos">.</span><span class="pl-c1">prop1</span><span class="pl-kos">)</span> <span class="pl-c1">===</span> <span class="pl-c1">null</span> <span class="pl-c1">||</span> <span class="pl-s1">_obj$prop</span> <span class="pl-c1">===</span> <span class="pl-k">void</span> <span class="pl-c1">0</span> ? <span class="pl-k">void</span> <span class="pl-c1">0</span> : <span class="pl-s1">_obj$prop</span><span class="pl-kos">.</span><span class="pl-c1">prop2</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">var</span> <span class="pl-s1">_obj$prop</span><span class="pl-kos">;</span>

  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">param</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-en">foo</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Expected behavior</strong><br>
Should not throw a <code class="notranslate">ReferenceError</code>, should log <code class="notranslate">undefined</code> to the console.</p>
<p dir="auto"><strong>Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)</strong></p>
<ul dir="auto">
<li>Filename: <code class="notranslate">babel.config.js</code></li>
</ul>
<p dir="auto">See REPL link above, or just add the <code class="notranslate">plugin-proposal-optional-chaining</code> (doesn't matter whether loose or not, happens in both modes)</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;plugings&quot;: [
    &quot;@babel/plugin-proposal-optional-chaining&quot;
  ]
}"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-s">"plugings"</span>: <span class="pl-kos">[</span>
    <span class="pl-s">"@babel/plugin-proposal-optional-chaining"</span>
  <span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>Environment</strong></p>
<ul dir="auto">
<li>Babel version(s): 7.11.5</li>
<li>Node/npm version: v14.7.0</li>
<li>OS: macOS</li>
<li>Monorepo: [e.g. yes/no/Lerna]</li>
<li>How you are using Babel: CLI for repro</li>
</ul>