@babel/preset-env not including classProperties

Bug Report

• I would like to work on a fix!

Current behavior According to https://github.com/babel/babel/blob/master/packages/babel-compat-data/scripts/data/plugin-features.js, it looks like @babel/plugin-proposal-class-properties is no longer needed and included in preset-env, please correct me if I’m wrong here because that would nullify this whole issue. That being said, without including it, I’m getting the following error:

{ SyntaxError: /Users/mattp/Work/SpotHero/fe-ui/src/AutoSuggestInput/AutoSuggestInput.jsx: Support for the experimental syntax 'classProperties' isn't currently enabled (13:22):

  11 |
  12 | export default class AutoSuggestInput extends Component {
> 13 |     static propTypes = {
     |                      ^
  14 |         ...TextInputPropTypes,
  15 |         /** Whether or not to highlight the first suggestion in the list when suggestions are presented. */
  16 |         autoActivateFirstSuggest: PropTypes.bool,

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-class-properties (https://git.io/vb4yQ) to the 'plugins' section to enable parsing.
    at Object._raise (/Users/mattp/Work/SpotHero/fe-ui/node_modules/@babel/parser/lib/index.js:757:17)
    at Object.raiseWithData (/Users/mattp/Work/SpotHero/fe-ui/node_modules/@babel/parser/lib/index.js:750:17)
    at Object.expectPlugin (/Users/mattp/Work/SpotHero/fe-ui/node_modules/@babel/parser/lib/index.js:8839:18)
    at Object.parseClassProperty (/Users/mattp/Work/SpotHero/fe-ui/node_modules/@babel/parser/lib/index.js:12232:12)
    at Object.pushClassProperty (/Users/mattp/Work/SpotHero/fe-ui/node_modules/@babel/parser/lib/index.js:12192:30)
    at Object.parseClassMemberWithIsStatic (/Users/mattp/Work/SpotHero/fe-ui/node_modules/@babel/parser/lib/index.js:12125:14)
    at Object.parseClassMember (/Users/mattp/Work/SpotHero/fe-ui/node_modules/@babel/parser/lib/index.js:12062:10)
    at withTopicForbiddingContext (/Users/mattp/Work/SpotHero/fe-ui/node_modules/@babel/parser/lib/index.js:12007:14)
    at Object.withTopicForbiddingContext (/Users/mattp/Work/SpotHero/fe-ui/node_modules/@babel/parser/lib/index.js:11078:14)
    at Object.parseClassBody (/Users/mattp/Work/SpotHero/fe-ui/node_modules/@babel/parser/lib/index.js:11984:10)
  loc: Position { line: 13, column: 21 },
  pos: 523,
  missingPlugin: [ 'classProperties' ],
  code: 'BABEL_PARSE_ERROR' }

Input Code

...see below

Expected behavior The cli will run through the code and not produce any errors.

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

• Filename:

"babel": {
    "presets": [
      "@spothero/spothero"
    ]
  }

I have a preset I created that handles babel configuration.

// preset-env included plugins: https://github.com/babel/babel/blob/master/packages/babel-compat-data/scripts/data/plugin-features.js
module.exports = () => ({
    presets: [
        [
            require('@babel/preset-env', {
                useBuiltIns: 'entry',
                corejs: 3,
            }),
        ],
        require('@babel/preset-react'),
    ],
    plugins: [
        [require('@babel/plugin-transform-runtime', {corejs: 3})],

        // Stage 1
        require('@babel/plugin-proposal-export-default-from'),

        // Stage 3
        require('@babel/plugin-proposal-logical-assignment-operators'),
        require('@babel/plugin-syntax-dynamic-import'),

        // Stage 4
        require('@babel/plugin-proposal-export-namespace-from'),
    ],
    env: {
        development: {
            plugins: [require('react-hot-loader/babel')],
        },
        production: {
            plugins: [
                [
                    require('babel-plugin-transform-react-remove-prop-types', {
                        removeImport: true,
                        ignoreFilenames: ['node_modules'],
                    }),
                ],
            ],
        },
    },
});

Environment

System: OS: macOS 10.15.3 Binaries: Node: 10.3.0 - ~/.nvm/versions/node/v10.3.0/bin/node npm: 6.1.0 - ~/.nvm/versions/node/v10.3.0/bin/npm npmPackages: @babel/core: 7.10.4 => 7.10.4 @babel/runtime-corejs3: 7.10.4 => 7.10.4 babel-loader: 8.1.0 => 8.1.0

• Monorepo: no
• How you are using Babel: cli

Possible Solution Adding [require('@babel/plugin-proposal-class-properties', {loose: true})], as the last plugin entry in the config fixes the issue.

Additional context If I misunderstood what is included in preset-env and the plugins in the linked file above are not actually included, please let me know. This will beg the question, where can I find all the plugins included with preset-env, however?

[reintroducing]

OK, that did the trick, final looks like this (for historical context if anyone is an idiot like me):

[
    require('@babel/preset-env'),
    {
        useBuiltIns: 'entry',
        corejs: 3,
        shippedProposals: true,
    },
],

@JLHwung This is actually a new preset I created when extracting the babel config out of a project so we can re-use it across the board and the issues I’m seeing are coming from my first try at implementing it and running babel with this preset.

Anyway, thank you guys for the help in looking at this, really appreciate it. Babel configuration can be very confusing sometimes (I still don’t know if I have the optimal config in this, but its a start at least), even though this wasn’t as much a Babel config as just me not watching details of where I’m putting options. Great eye @JLHwung!

[reintroducing]

oh, i see my error now and what you guys are saying, i forgot to close the require and pass the options after it. my apologies, i again misread the docs on creating presets. let me try to fix that first before anything :\