Material-ui-pickers: Module not found: Can't resolve '@babel/runtime/helpers/objectWithoutPropertiesLoose' in 'C:\Users\alexa\apf2\node_modules\material-ui-pickers\DatePicker

[barbalex]

Environment

| Tech | Version |
|---------------------|---------|
| material-ui-pickers | 1.0.0-rc.12 |
| material-ui | 1.4.2 and 1.4.1 |
| React | 16.4.1 |
| Browser | Chrome 67.0.3396.99 |
| Platform | Windows 10 |

Steps to reproduce

1. Update from 1.0.0-rc.11 to 1.0.0-rc.12 in my project

Expected behavior

No error

Actual behavior

./node_modules/material-ui-pickers/DatePicker/DatePickerWrapper.js
Module not found: Can't resolve '@babel/runtime/helpers/objectWithoutPropertiesLoose' in 'C:\Users\alexa\apf2\node_modules\material-ui-pickers\DatePicker'

Live example

Tried but got different error: https://codesandbox.io/s/y2rv56yrl9

[TrySound]

@barbalex check node_modules. There should be this module. If not, try to remove node_modules and install dependencies again.

[barbalex]

I have removed node_modules and reinstalled dependencies multiple times with multiple versions of material-ui-pickers. Since I updated to v1.0.0-rc.12 this error persists.

I have also tried running yarn cache clean, without success.

The weird thing is that objectWithoutPropertiesLoose is exactly where it is supposed to be. And the file looks perfectly o.k. from what I can tell when opening it.

But it does look like this would probably be more of an yarn issue than material-ui-pickers?

[barbalex]

Same error happens if I use npm start instead of yarn start

[TrySound]

Do you have next.js installed?

[barbalex]

No, haven't used it yet

[TrySound]

Which bundler do you use? Do you have node_modules inside material-ui-pickers folder?

[TrySound]

Make sure that you don't have @babel/runtime resolution in package.json

[barbalex]

I am using create-react-app. So the bundler would be webpack.

I only use a resolution for graphql, because of conflicts in the apollo tools.

Yes, there is a node_modules folder inside node_modules/material-ui-pickers. But it also contains objectWithoutPropertiesLoose and that looks o.k. also.

[TrySound]

Don't have an idea to be honest. Your example is errored because of missing utils provider. Everything works perfect with it.
https://codesandbox.io/s/ll4ozy6pl7

[barbalex]

Well, thanks a lot for having tried!

[barbalex]

...and thanks for this great tool

[Ethorsen]

Exact same error after upgrading this morning.

Using CRA w/ react-scripts 2.x

Will keep current versions til this is figured out

[barbalex]

I use cra v2 too... ?

[barbalex]

This is continuing to haunt me every time I update an npm dependency. Even though I have reverted to v1.0.0-rc.11. No idea what is going on.

[barbalex]

I now tried using resolutions to force v1.0.0-rc.11:

  "resolutions": {
    "material-ui-pickers": "1.0.0-rc.11"
  }

but still get the error

[barbalex]

I even get it when reverting to 1.0.0-rc.10 now.

What completely baffles me: After running

yarn cache clean
del yarn.lock
rmdir /s node_modules
yarn

...with 1.0.0-rc.10 set in package.json, when I run:

> yarn list --pattern material-ui-pickers
yarn list v1.9.2
warning Resolution field "[email protected]" is incompatible with requested version "graphql@>=0.6 <0.13"
└─ [email protected]

...it seems that 1.0.0-rc.12 is installed. Which explains why I still get the errors.

This even happens if I set resolutions to v1.0.0-rc.10.

I now have no idea how I will ever get this project to work again :-)

[barbalex]

I _think_ I solved the problem now.

I believe the reason why this happens is that > yarn list --pattern @babel lists a whole bunch of different versions of @babel used by different dependencies.

And some of them do not yet have the objectWithoutPropertiesLoose helper, as this was a recent addition.

So I tried to make sure a version of @babel containing the objectWithoutPropertiesLoose helper is used by adding to package.json:

  "resolutions": {
    "@babel/runtime": "7.0.0-beta.55"
  },

This seems to work. Now I can even use v1.0.0-rc.12 of material-ui-pickers.

[TrySound]

Usually it's resolved fine if babel runtime has strict version without ^. I guess the problem is create-react-app which somehow changes this. Same problem I had with next.js.

[barbalex]

So this is not a material-ui-pickers issue. Will close.

Unfortunately I can't make up my mind if this is a cra or babel issue. Anyone else feel free to open a new issue at the appropriate place.

[strangewolf]

i found the same error objectWithoutPropertiesLoose

./node_modules/material-ui-pickers/DatePicker/DatePickerWrapper.js
Module not found: Can't resolve '@babel/runtime/helpers/objectWithoutPropertiesLoose'

after i install the material-ui-picker.

package.json

"dependencies":{
    "@material-ui/core": "^1.4.3",
    "babel-runtime": "^6.26.0",
    "date-fns": "^1.29.0",
}

@barbalex

[barbalex]

@strangewolf: did you try resolutions for @babel/runtime?

[strangewolf]

@barbalex yeah i did.. but after that i faced a lot of errors like component failed to load..
component missing render function (even it is there) something likeinstance.render error.. i dont know what it is.

[barbalex]

:-(

[TrySound]

@strangewolf Do you use next.js ?

[strangewolf]

TypeError: instance.render is not a function
finishClassComponent
internal:///Users/ankit/reactor/node_modules/react-dom/cjs/react-dom.development.js:13194

Package.json

  "dependencies": {
    "@babel/polyfill": "^7.0.0-beta.36",
    "@material-ui/core": "^1.4.3",
    "@material-ui/icons": "^2.0.1",
    "babel-runtime": "^6.26.0",
    "react": "^16.2.0",
    "react-container-query": "^0.9.1",
    "react-cookie": "^2.2.0",
    "react-document-title": "^2.0.3",
    "react-dom": "^16.2.0",
    ...rest dependencies
 },
  "resolutions": {
    "@babel/runtime": "7.0.0-beta.55"
  },

@barbalex Compiled Successfully! but throws errors at Runtime .... any suggestions?

[TrySound]

@strangewolf The problem is an older version of babel runtime which handles inheritance differently. I wouldn't recommend resolution of babel runtime here.

I think it's because of older react-event-listener version. Could you remove material-ui-pickers and add it back with npm? This should update transitive dependency.

Also try to add to resolutions recompose ^0.28.2.

[strangewolf]

@TrySound
I think it's because of older react-event-listener version. Could you remove material-ui-pickers and add it back with npm? This should update transitive dependency.

• Did this before.. but will do it again.

Also try to add to resolutions recompose ^0.28.2.

• Sorry i am still learning react and i didn't get you.. sorry again.

[TrySound]

It's also dependency of material-ui-pickers

  "resolutions": {
    "recompose": "^0.28.2"
  },

[strangewolf]

@TrySound
I am using DVA react not Next.js

[strangewolf]

@TrySound

• Removed material-ui-pickers from package.json
• Added resolutions recompose ^0.28.2 to package.json
  "resolutions": { "recompose": "^0.28.2" },
• Delete Node modules folder and yarn.lock
• yarn cache clean && yarn
• yarn add material-ui-pickers
• yarn add [email protected]
• yarn start

output

[TrySound]

Did you remove resolution for babel/runtime?

[strangewolf]

@TrySound yes

[TrySound]

Show babel config please

[strangewolf]

@TrySound there is no babel.config.js file present ..

but .webpackrc.js looks like:

const path = require('path');

export default {
  entry: 'src/index.js',
  extraBabelPlugins: [
    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
  ],
  env: {
    development: {
      extraBabelPlugins: ['dva-hmr'],
    },
  },
  alias: {
    'components': path.resolve(__dirname, 'src/components/'),
  },
  ignoreMomentLocale: true,
  theme: './src/theme.js',
  html: {
    template: './src/index.ejs',
  },
  disableDynamicImport: true,
  publicPath: '/',
  hash: true,
};

package.json

{
  "name": "Billeasy",
  "version": "1.1.0",
  "description": "Say Hello to Digital Receipts, Ab Bill phone par!",
  "private": true,
  "scripts": {
    "precommit": "npm run lint-staged",
    "start": "cross-env ESLINT=none roadhog dev",
    "start:no-proxy": "cross-env NO_PROXY=true ESLINT=none roadhog dev",
    "build": "cross-env ESLINT=none roadhog build",
    "site": "roadhog-api-doc static && gh-pages -d dist",
    "analyze": "cross-env ANALYZE=true roadhog build",
    "lint:style": "stylelint \"src/**/*.less\" --syntax less",
    "lint": "eslint --ext .js src mock tests && npm run lint:style",
    "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js",
    "test": "roadhog test",
    "test:component": "roadhog test ./src/components",
    "test:all": "node ./tests/run-tests.js"
  },
  "dependencies": {
    "@antv/data-set": "^0.8.0",
    "@babel/polyfill": "^7.0.0-beta.36",
    "@material-ui/core": "^1.4.3",
    "@material-ui/icons": "^2.0.1",
    "antd": "^3.3.0",
    "babel-runtime": "^6.26.0",
    "bizcharts": "^3.1.3-beta.1",
    "bizcharts-plugin-slider": "^2.0.1",
    "classnames": "^2.2.5",
    "cookie-storage": "^3.1.0",
    "date-fns": "2.0.0-alpha.7",
    "dva": "^2.1.0",
    "dva-loading": "^1.0.4",
    "enquire-js": "^0.1.1",
    "formsy-react": "^1.1.4",
    "jquery": "^3.3.1",
    "lodash": "^4.17.10",
    "lodash-decorators": "^4.4.1",
    "material-ui-pickers": "^1.0.0-rc.12",
    "moment": "^2.19.1",
    "numeral": "^2.0.6",
    "omit.js": "^1.0.0",
    "path-to-regexp": "^2.1.0",
    "prismjs": "1.14.0",
    "prop-types": "^15.5.10",
    "qs": "^6.5.0",
    "raw-loader": "^0.5.1",
    "rc-drawer-menu": "^0.5.0",
    "react": "^16.2.0",
    "react-container-query": "^0.9.1",
    "react-cookie": "^2.2.0",
    "react-document-title": "^2.0.3",
    "react-dom": "^16.2.0",
    "react-fittext": "^1.0.0",
    "rollbar": "^2.3.4",
    "url-polyfill": "^1.0.10"
  },
  "devDependencies": {
    "babel-eslint": "^8.1.2",
    "babel-plugin-dva-hmr": "^0.4.1",
    "babel-plugin-import": "^1.6.7",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "cross-env": "^5.1.1",
    "cross-port-killer": "^1.0.1",
    "enzyme": "^3.1.0",
    "eslint": "^4.14.0",
    "eslint-config-airbnb": "^16.0.0",
    "eslint-plugin-babel": "^4.0.0",
    "eslint-plugin-compat": "^2.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-markdown": "^1.0.0-beta.6",
    "eslint-plugin-react": "^7.0.1",
    "gh-pages": "^1.0.0",
    "husky": "^0.14.3",
    "lint-staged": "^6.0.0",
    "mockjs": "^1.0.1-beta3",
    "pro-download": "^1.0.1",
    "redbox-react": "^1.5.0",
    "regenerator-runtime": "^0.11.1",
    "roadhog": "^2.3.0",
    "roadhog-api-doc": "^0.3.4",
    "stylelint": "^8.4.0",
    "stylelint-config-standard": "^18.0.0"
  },
  "resolutions": {
    "recompose": "^0.28.2"
  },
  "optionalDependencies": {
    "puppeteer": "^1.1.1"
  },
  "lint-staged": {
    "**/*.{js,jsx}": "lint-staged:js",
    "**/*.less": "stylelint --syntax less"
  },
  "engines": {
    "node": ">=8.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ]
}

[strangewolf]

@TrySound do you have any solutions?..

[TrySound]

Try to upgrade material-ui

[strangewolf]

@TrySound sorry i upgraded it.. but still facing this error.