React-modal: Couldn't find preset "stage-2" relative to directory "..\\react-modal"

[Muhammad-Zaryaab-Shahbaz]

After running the command:
npm install react-modal

It prompt me with:

• react-modal @2.2.1

When i imported it in one of my file by:
import ReactModal from 'react-modal';

I got errors:
ERROR in ./~/react-modal/lib/index.js
Module build failed: Error: Couldn't find preset "stage-2" relative to directory "\react-modal"
at *node_modulesbabel-corelibtransformationfileoptionsoption-manager.js:293:19
at Array.map (native)
at OptionManager.resolvePresets (node_modulesbabel-corelibtransformationfileoptionsoption-manager.js:275:20)
at OptionManager.mergePresets (node_modulesbabel-corelibtransformationfileoptionsoption-manager.js:264:10)
at OptionManager.mergeOptions (node_modulesbabel-corelibtransformationfileoptionsoption-manager.js:249:14)
at OptionManager.init (node_modulesbabel-corelibtransformationfileoptionsoption-manager.js:368:12)
at File.initOptions (node_modulesbabel-corelibtransformationfileindex.js:212:65)
at new File (node_modulesbabel-corelibtransformationfileindex.js:135:24)
at Pipeline.transform (node_modulesbabel-corelibtransformationpipeline.js:46:16)
at transpile (node_modulesbabel-loaderlibindex.js:46:20)
@ ./src/conatainers/App.js 11:18-40
** is starting path that i have replaced.

[diasbruno]

Hi @MZShahbaz, sometimes I got this, because I'm forget if I'm using yarn or npm. :)
stage-2 should not be required, because [email protected] is compiled to es2015 before send to npm.

[Muhammad-Zaryaab-Shahbaz]

Thanks @diasbruno but my problem persists...
In my package.json file, I have;
"babel": {
"presets": [
"es2015",
"react"
]
}
as es2015 is available for babel, why am i getting this error?
how may i fix it?

[diasbruno]

Probably adding "stage-2" to your list of presets and npm install --save-dev babe-preset-stage-2 or yarn add --dev babe-preset-stage-2.

[Muhammad-Zaryaab-Shahbaz]

Thanks a lot @diasbruno , this has fixed my error...
No words to thank you (Y)

[diasbruno]

Great! This a little bit weird. Maybe later I'll try to reproduce this issue (since react-modal should not require stage-2).
Thank you!

[uhef]

I had the same problem as well.

This should probably be fixed within react-modal as it seems awkward to have to pollute the babel preset list of the consuming project to fix this...

[uhef]

Actually, downgrading to 1.9.7 seems to solve the problem as this is introduced in 2.0.0:

https://github.com/reactjs/react-modal/blob/v2.0.0/.babelrc#L2

[diasbruno]

@uhef please check if babel-preset-stage-2 is on package.json. It should not be a problem unless you have an old fork of react-modal and missed to npm install (or yarn).

[uhef]

Adding babel-preset-stage-2 as a dev dependency in the host project package.json fixes the issue. If this is how it should be fixed I suppose react-modal should list babel-preset-stage-2 as a peer dependency.

[diasbruno]

I don't know, probably there is something wrong on the build process to publish to npm.

[diasbruno]

@uhef Did you try to update react-modal (on a project) or started a new project?

[diasbruno]

Released v3.1.7.