1

I'm working on a ReactJS application, which is failing to start for me with auto-generated package-lock.json. However, it's running fine on production and also locally for my colleague. The error I'm getting when running npm start:

./node_modules/react-datepicker/es/index.js
8297:8-17 'react-popper' does not contain an export named 'Reference'.

package-lock.json:

...
"react-datepicker": {
    "version": "2.1.0",
    "resolved": "http://packages.je-labs.com/npm/private-npm/react-datepicker/-/react-datepicker-2.1.0.tgz",
    "integrity": "sha512-zsPqierShVc0NN+JCyJO18jMFDTbGNSgmekQm+Zr5JYH/aZShsjOBGQmjNiQmIw7nJNQDRzh1oQUND3TY/9Swg==",
    "requires": {
        "classnames": "^2.2.5",
        "date-fns": "^2.0.0-alpha.23",
        "prop-types": "^15.6.0",
        "react-onclickoutside": "^6.7.1",
        "react-popper": "^1.0.2"
    },
    "dependencies": {
        "react-popper": {
            "version": "1.3.3",
            "resolved": "http://packages.je-labs.com/npm/private-npm/react-popper/-/react-popper-1.3.3.tgz",
            "integrity": "sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==",
            "requires": {
                "@babel/runtime": "^7.1.2",
                "create-react-context": "<=0.2.2",
                "popper.js": "^1.14.4",
                "prop-types": "^15.6.1",
                "typed-styles": "^0.0.7",
                "warning": "^4.0.2"
            }
        }
    }
},
"reactstrap": {
    "version": "6.5.0",
    "resolved": "http://packages.je-labs.com/npm/private-npm/reactstrap/-/reactstrap-6.5.0.tgz",
    "integrity": "sha1-umVeMmRuJiGCn2H6oDPmB+xmJOU=",
    "requires": {
        "classnames": "^2.2.3",
        "lodash.isfunction": "^3.0.9",
        "lodash.isobject": "^3.0.2",
        "lodash.tonumber": "^4.0.3",
        "prop-types": "^15.5.8",
        "react-lifecycles-compat": "^3.0.4",
        "react-popper": "^0.10.4",
        "react-transition-group": "^2.3.1"
    }
},
"react-popper": {
    "version": "0.10.4",
    "resolved": "http://packages.je-labs.com/npm/private-npm/react-popper/-/react-popper-0.10.4.tgz",
    "integrity": "sha1-rypBXqIike3VBGeNev2opu4ylao=",
    "requires": {
        "popper.js": "^1.14.1",
        "prop-types": "^15.6.1"
    }
}
...

I believe the error above is caused by the fact that react-datepicker instead of using react-popper@1.3.3 as per its sub-dependencies, uses react-popper@0.10.4 defined at the root level. After updating package-lock.json as below, the error is gone (note that root react-popper@0.10.4 is moved to reactstrap sub-dependencies)

...
"reactstrap": {
    "version": "6.5.0",
    "resolved": "http://packages.je-labs.com/npm/private-npm/reactstrap/-/reactstrap-6.5.0.tgz",
    "integrity": "sha1-umVeMmRuJiGCn2H6oDPmB+xmJOU=",
    "requires": {
        "classnames": "^2.2.3",
        "lodash.isfunction": "^3.0.9",
        "lodash.isobject": "^3.0.2",
        "lodash.tonumber": "^4.0.3",
        "prop-types": "^15.5.8",
        "react-lifecycles-compat": "^3.0.4",
        "react-popper": "^0.10.4",
        "react-transition-group": "^2.3.1"
    },
    "dependencies": {
        "react-popper": {
            "version": "0.10.4",
            "resolved": "http://packages.je-labs.com/npm/private-npm/react-popper/-/react-popper-0.10.4.tgz",
            "integrity": "sha1-rypBXqIike3VBGeNev2opu4ylao=",
            "requires": {
                "popper.js": "^1.14.1",
                "prop-types": "^15.6.1"
            }
        }
    }
},
"react-datepicker": {
    "version": "2.1.0",
    "resolved": "http://packages.je-labs.com/npm/private-npm/react-datepicker/-/react-datepicker-2.1.0.tgz",
    "integrity": "sha512-zsPqierShVc0NN+JCyJO18jMFDTbGNSgmekQm+Zr5JYH/aZShsjOBGQmjNiQmIw7nJNQDRzh1oQUND3TY/9Swg==",
    "requires": {
        "classnames": "^2.2.5",
        "date-fns": "^2.0.0-alpha.23",
        "prop-types": "^15.6.0",
        "react-onclickoutside": "^6.7.1",
        "react-popper": "^1.0.2"
    },
    "dependencies": {
        "react-popper": {
            "version": "1.3.3",
            "resolved": "http://packages.je-labs.com/npm/private-npm/react-popper/-/react-popper-1.3.3.tgz",
            "integrity": "sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==",
            "requires": {
                "@babel/runtime": "^7.1.2",
                "create-react-context": "<=0.2.2",
                "popper.js": "^1.14.4",
                "prop-types": "^15.6.1",
                "typed-styles": "^0.0.7",
                "warning": "^4.0.2"
            }
        }
    }
}

...

From what I understand about npm packages resolution, dependencies are resolved started from the bottom of the tree so the initial 'package-lock.json' should be perfectly fine. Tried running it with node v10, v11, and v12, and in all cases got the same error. As it's running fine for my colleague and also on production, I'm assuming this must be related to my local environment but can't figure out the root cause of the error.

85rainbow
  • 11
  • 1
  • 2
  • [Update `npm`](https://stackoverflow.com/q/6237295/1218980) or use the same version as your colleagues, then, delete `node_modules` from your project and install again. If that doesn't work, look into [cleaning the npm packages cache](https://docs.npmjs.com/cli/v6/commands/npm-cache) to make sure it's not a corrupted cache on your computer. – Emile Bergeron Feb 01 '21 at 16:41
  • 1
    Did that multiple times, installed the same node and npm versions, deleted node_modules, and cleaned cache and still got the same error. I don't think installing modules is the problem as the tree structure looks correct, for some reason npm chooses the root module over the one in `react-datepicker` folder when serving the app – 85rainbow Feb 01 '21 at 16:56

0 Answers0