Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@babel/plugin-transform-react-constant-elements not found #232

Closed
smashercosmo opened this issue Nov 14, 2018 · 3 comments
Closed

@babel/plugin-transform-react-constant-elements not found #232

smashercosmo opened this issue Nov 14, 2018 · 3 comments
Labels

Comments

@smashercosmo
Copy link

🐛 Bug Report

I'm having the same issue, that was described here #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
Copy link
Author

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
Copy link

vxna commented Nov 17, 2018

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
Copy link
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants