Does not work with ESM builds

[milesj]

When modules: false is used in Babel, the prop types arent injected at all.

[velohomme]

Works great for me. Both my cjs and esm modules get injected proptypes. My .babelrc:

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react",
        "@babel/preset-typescript",
        [
            "@emotion/babel-preset-css-prop",
            {
                "autoLabel": true
            }
        ]
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-object-rest-spread",
        "babel-plugin-typescript-to-proptypes"
    ],
    "comments": false,
    "env": {
        "modules": {
            "plugins": [
                [
                    "@babel/plugin-transform-runtime",
                    {
                        "useESModules": true,
                        "corejs": 2
                    }
                ]
            ],
            "presets": [
                [
                    "@babel/preset-env",
                    {
                        "corejs": 2,
                        "modules": false,
                        "useBuiltIns": "usage"
                    }
                ]
            ]
        }
    }
}

[marcohamersma]

I cannot get it to work with my webpack config either. It's mostly the one generated by @rails/webpacker, but indeed the modules is set to false. Here's mine for reference:

module.exports = function(api) {
  var validEnv = ['development', 'test', 'production']
  var currentEnv = api.env()
  var isDevelopmentEnv = api.env('development')
  var isProductionEnv = api.env('production')
  var isTestEnv = api.env('test')

  return {
    presets: [
      (isProductionEnv || isDevelopmentEnv) && [
        require('@babel/preset-env').default,
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ],
      [
        require('@babel/preset-react').default,
        {
          development: isDevelopmentEnv || isTestEnv,
          useBuiltIns: true
        }
      ]
    ].filter(Boolean),
    plugins: [
      isDevelopmentEnv && require('babel-plugin-typescript-to-proptypes').default,
      require('babel-plugin-macros'),
      require('@babel/plugin-syntax-dynamic-import').default,
      isTestEnv && require('babel-plugin-dynamic-import-node'),
      require('@babel/plugin-transform-destructuring').default,
      [
        require('@babel/plugin-proposal-class-properties').default,
        {
          loose: true
        }
      ],
      [
        require('@babel/plugin-proposal-object-rest-spread').default,
        {
          useBuiltIns: true
        }
      ],
      [
        require('@babel/plugin-transform-runtime').default,
        {
          helpers: false,
          regenerator: true
        }
      ],
      [
        require('@babel/plugin-transform-regenerator').default,
        {
          async: false
        }
      ],
    ].filter(Boolean)
  }
}

Hope we can find a workaround or a fix at some point!

[milesj]

According to my tests, this works for ESM and CJS.