Module not found: Error: Can't resolve 'promise' in '

[pyprism]

When I try to run npm , it throws this error :

ERROR in ./node_modules/react-stepzilla/dist/main.js
Module not found: Error: Can't resolve 'promise' in '/home/../node_modules/react-stepzilla/dist'
 @ ./node_modules/react-stepzilla/dist/main.js 12:38-56
 @ ./bunny/components/product_add.js

Here is package.json :

{
 .....
  "scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
 ....
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^12.4.0",
    "@ckeditor/ckeditor5-react": "^1.1.3",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-select": "^3.0.4",
    "react-stepzilla": "^6.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.0.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^3.0.0",
    "webpack": "^4.40.2",
    "webpack-bundle-tracker": "^0.4.2-beta",
    "webpack-cli": "^3.3.9"
  }
}

Root component:

import React from "react";
import ReactDOM from "react-dom";
import StepOne from "../partials/steps/step_one.js";
import Select from 'react-select';
import StepZilla from "react-stepzilla";

const steps =     [
      {name: 'Step One', component: <StepOne/>},
      {name: 'Step Two', component: <StepOne/>},
];


class ProductAdd extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            categories: '',
            colors: ''
        };
    }
    loadCategory() {
        $.ajax(window.location.href, {
            success: function (data) {
                console.log(data["category"]);
                this.setState({categories: data['categories']});
                this.setState({colors: data['colors']});
            }.bind(this),
            error: function (error) {
                console.error(error);
            }
        });
    }

    getData(key, value) {
        let val = {};
        val[key] = value;
        console.log(val);
    }

    componentDidMount() {
        this.loadCategory();
    }

    render() {
        return <StepZilla steps={steps}/>
    }
}

ReactDOM.render(<ProductAdd />, document.getElementById("product_add"));

and step component:

import React from "react";


export default class StepOne extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            name_bn: '',
            ranking: 0,
            available: true,
            hide: false
        };
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e) {
        this.setState({[e.target.name]: e.target.value});
    }

    render() {
        return (
            <React.Fragment>
                <div className="form-group">
                    <label><strong>Name *</strong></label>
                    <input type="text" name="name" className="form-control form-control-lg"
                           placeholder="Enter product name" value={this.state.name} onChange={this.handleChange} required/>
                </div>
                <div className="form-group">
                    <label><strong>Name Bengali *</strong></label>
                    <input type="text" name="name_bn" className="form-control form-control-lg"
                           placeholder="Enter product name in bengali" value={this.state.name_bn} onChange={this.handleChange} required/>
                </div>
                <div className="form-group">
                    <label><strong>Ranking in category page *</strong></label>
                    <input type="number" min="0" name="ranking" value={this.state.ranking} onChange={this.handleChange} className="form-control form-control-lg"
                           placeholder="Enter product ranking example: 2" required/>
                </div>
                <div className="form-group">
                    <label><strong>Available (In Stock) </strong></label>
                    <select name="available" value={this.state.available}
                            onChange={this.handleChange} style={{'height': '50px'}} className="form-control form-control-lg">
                        <option value="true">Yes</option>
                        <option value="false">No</option>
                    </select>
                </div>
                <div className="form-group">
                    <label><strong>Hide </strong></label>
                    <select name="hide" value={this.state.hide} style={{'height': '50px'}}      
                            onChange={this.handleChange} className="form-control form-control-lg">
                        <option value="true">Yes</option>
                        <option value="false">No</option>
                    </select>
                </div>
            </React.Fragment>
        )
    }
}

[marijnbent]

Just to here to say I experienced this problem as well. Fixable by adding the 'promise' package.