Issue 1:
Bug Report

Current behavior

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.

I'm using Webpack + babel-plugin-named-asset-import + 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. import { ReactComponent as ReactLogo } from './assets/react.svg';) with the following error as soon as I add anything other than defaults to my .browserslistrc file:

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 (<anonymous>)
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 (<anonymous>)
at Function.<anonymous> (C:\htdocs\_git\react-ssr-setup\node_modules\@svgr\webpack\node_modules\@babel\core\lib\gensync-utils\async.js:26:3)
at Generator.next (<anonymous>)
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)

In the example above the property edge of undefined cannot be read. In other cases I also had android as property that cannot be read too. I took a look at @babel\helper-compilation-targets\lib\utils.js:L58 and when I replace the line with

const result = plugin && plugin[environment];

it works but I don't know what consequences this will have as the function will then return undefined.

This behavior can be tested on this branch:

https://github.com/manuelbieh/react-ssr-setup/tree/chores-jan-21

git clone git@github.com:manuelbieh/react-ssr-setup.git
cd react-ssr-setup
git checkout -b chores-jan-21
yarn install
yarn start

Expected behavior

Well, in the first place I'd expect the named-asset-import plugin to work as it did before I updated my 100 babel + webpack dependencies 😉

Babel Configuration

Can also be found in the repo I linked above:

https://github.com/manuelbieh/react-ssr-setup/blob/chores-jan-21/babel.config.js

Environment

$ 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 => 7.12.10
@babel/core: ^7.12.10 => 7.12.10
@babel/plugin-proposal-class-properties: ^7.12.1 => 7.12.1
@babel/plugin-proposal-object-rest-spread: ^7.12.1 => 7.12.1
@babel/plugin-proposal-optional-chaining: ^7.12.7 => 7.12.7
@babel/plugin-syntax-dynamic-import: ^7.8.3 => 7.8.3
@babel/plugin-transform-modules-commonjs: ^7.12.1 => 7.12.1
@babel/plugin-transform-runtime: ^7.12.10 => 7.12.10
@babel/preset-env: ^7.12.11 => 7.12.11
@babel/preset-react: ^7.12.10 => 7.12.10
@babel/preset-typescript: ^7.12.7 => 7.12.7
@babel/register: ^7.12.10 => 7.12.10
babel-eslint: ^10.1.0 => 10.1.0
babel-jest: ^26.6.3 => 26.6.3
babel-loader: ^8.2.2 => 8.2.2
babel-plugin-macros: ^3.0.1 => 3.0.1
babel-plugin-named-asset-import: ^0.3.7 => 0.3.7
babel-plugin-transform-es2015-modules-commonjs: ^6.26.2 => 6.26.2
babel-plugin-transform-runtime-file-extensions: ^2.0.0 => 2.0.0
eslint: ^7.19.0 => 7.19.0
eslint-plugin-babel: ^5.3.1 => 5.3.1
jest: ^26.6.3 => 26.6.3
webpack: ^5.19.0 => 5.19.0

Possible Solution

Replace this line:

https://github.com/babel/babel/blob/master/packages/babel-helper-compilation-targets/src/utils.js#L58

with:

const result = plugin && plugin[environment];

prevents the error from happening but I'm not deep enough into Babel to know what the possible implications are.

Issue 2:
Bug Report

I would like to work on a fix!

Current behavior

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 var declaration is added to the function body. That variable declaration is not in effect when evaluating parameter default values and causes a ReferenceError in strict mode when the function is called.

REPL

To repro, you can use the Babel CLI to compile the code below and run it with Node: babel test.js | node. Error output:

const foo = (param = (_obj$prop = obj.prop1) === null || _obj$prop === void 0 ? void 0 : _obj$prop.prop2) => {
^

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.<anonymous> ([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.<anonymous> (internal/process/execution.js:211:5)
at Socket.emit (events.js:326:22)

Input Code

'use strict'
const obj = {}
const foo = (param = obj.prop1?.prop2) => {
console.log(param)
}
foo()

Output Code

'use strict';

const obj = {};

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

console.log(param);
};

foo();

Expected behavior

Should not throw a ReferenceError, should log undefined to the console.

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

Filename: babel.config.js

See REPL link above, or just add the plugin-proposal-optional-chaining (doesn't matter whether loose or not, happens in both modes)

{
"plugings": [
"@babel/plugin-proposal-optional-chaining"
]
}

Environment

Babel version(s): 7.11.5

Node/npm version: v14.7.0

OS: macOS

Monorepo: [e.g. yes/no/Lerna]

How you are using Babel: CLI for repro