Svgr: @babel/plugin-transform-react-constant-elements not found

[smashercosmo]

🐛 Bug Report

I'm having the same issue, that was described here https://github.com/smooth-code/svgr/issues/116. I'm having it only when I'm using my webpack config to run https://github.com/styleguidist/react-styleguidist. It could be an issue with react-styleguidist itself, but since this issue came up before, I decided to start with svgr repo first.

To Reproduce

I just fed my webpack config to react-styleguidist, which has this section

{
  test: /\.svg$/,
  issuer: {
    test: /\.js$/,
  },
  include: path.resolve(ROOT_DIR, 'client-src'),
  loader: '@svgr/webpack',
}

Expected behavior

There shouldn't be errors like

Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
Error: Cannot find module '@babel/plugin-transform-react-constant-elements' from '/Users/smashercosmo/Documents/projects/netcycler'
    at Function.module.exports [as sync] (/Users/smashercosmo/Documents/projects/netcycler/node_modules/resolve/lib/sync.js:43:15)
    at resolveStandardizedName (/Users/smashercosmo/Documents/projects/netcycler/node_modules/@svgr/webpack/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePlugin (/Users/smashercosmo/Documents/projects/netcycler/node_modules/@svgr/webpack/node_modules/@babel/core/lib/config/files/plugins.js:54:10)
    at loadPlugin (/Users/smashercosmo/Documents/projects/netcycler/node_modules/@svgr/webpack/node_modules/@babel/core/lib/config/files/plugins.js:62:20)
    at createDescriptor (/Users/smashercosmo/Documents/projects/netcycler/node_modules/@svgr/webpack/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at items.map (/Users/smashercosmo/Documents/projects/netcycler/node_modules/@svgr/webpack/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/smashercosmo/Documents/projects/netcycler/node_modules/@svgr/webpack/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPluginDescriptors (/Users/smashercosmo/Documents/projects/netcycler/node_modules/@svgr/webpack/node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
    at alias (/Users/smashercosmo/Documents/projects/netcycler/node_modules/@svgr/webpack/node_modules/@babel/core/lib/config/config-descriptors.js:63:49)
    at cachedFunction (/Users/smashercosmo/Documents/projects/netcycler/node_modules/@svgr/webpack/node_modules/@babel/core/lib/config/caching.js:33:19)
    at plugins.plugins (/Users/smashercosmo/Documents/projects/netcycler/node_modules/@svgr/webpack/node_modules/@babel/core/lib/config/config-descriptors.js:28:77)
    at mergeChainOpts (/Users/smashercosmo/Documents/projects/netcycler/node_modules/@svgr/webpack/node_modules/@babel/core/lib/config/config-chain.js:319:26)
    at /Users/smashercosmo/Documents/projects/netcycler/node_modules/@svgr/webpack/node_modules/@babel/core/lib/config/config-chain.js:283:7
    at buildRootChain (/Users/smashercosmo/Documents/projects/netcycler/node_modules/@svgr/webpack/node_modules/@babel/core/lib/config/config-chain.js:68:29)
    at loadPrivatePartialConfig (/Users/smashercosmo/Documents/projects/netcycler/node_modules/@svgr/webpack/node_modules/@babel/core/lib/config/partial.js:85:55)

Link to repl or repo (highly encouraged)

I will provide demo in case nothing immediately comes to your mind)

Run npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS Sierra 10.12.6
 - CPU: (4) x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
 - Memory: 584.66 MB / 16.00 GB
 - Shell: 5.2 - /bin/zsh
## Binaries:
 - Node: 10.12.0 - /usr/local/bin/node
 - Yarn: 1.12.1 - ~/Documents/projects/netcycler/node_modules/.bin/yarn
 - npm: 6.4.1 - /usr/local/bin/npm
## npmPackages:
 - @svgr/webpack: 4.0.3 => 4.0.3 

P. S. Thank you for the awesome tool)

[smashercosmo]

I investigated it a bit more and found out that this is happening only with @babel/[email protected]. With @babel/[email protected] installed error goes away.

[vxna]

Can confirm, it would always happen if userland version of babel is higher than one svgr is using.

Not sure if it's the best way, but it could be fixed with just replacing each string for babel preset/plugin with require('').default in svgr config, the same way as babel-preset-react-app does it.

What is so special about this plugin if it's not being used anymore in CRA itself? From my view, it seems safe to just use babel-preset-react-app and rely on the same configuration.

[gregberge]

Oh yes, I think the declaration is not good. We will fix it.

This plugin is a safe optimisation in our case. So it is important to keep it.