Storybook: @storybook/addon-knobs 4.0.0-alpha.20 Throw Error

[mhauens]

Bug or support request summary

Module not found: Error: Can't resolve 'moment' in '/node_modules/react-datetime'
 @ ./node_modules/react-datetime/DateTime.js 6:10-27
 @ ./node_modules/@storybook/addon-knobs/dist/components/types/Date/index.js
 @ ./node_modules/@storybook/addon-knobs/dist/components/types/index.js
 @ ./node_modules/@storybook/addon-knobs/dist/components/Panel.js
 @ ./node_modules/@storybook/addon-knobs/dist/register.js
 @ ./node_modules/@storybook/addon-knobs/register.js
 @ ./.storybook/addons.js
 @ multi ./.storybook/addons.js ./node_modules/@storybook/react/node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/react/node_modules/@storybook/core/dist/client/manager/index.js

ERROR in ./node_modules/react-datetime/src/DaysView.js
Module not found: Error: Can't resolve 'moment' in '/node_modules/react-datetime/src'
 @ ./node_modules/react-datetime/src/DaysView.js 5:10-27
 @ ./node_modules/react-datetime/src/CalendarContainer.js
 @ ./node_modules/react-datetime/DateTime.js
 @ ./node_modules/@storybook/addon-knobs/dist/components/types/Date/index.js
 @ ./node_modules/@storybook/addon-knobs/dist/components/types/index.js
 @ ./node_modules/@storybook/addon-knobs/dist/components/Panel.js
 @ ./node_modules/@storybook/addon-knobs/dist/register.js
 @ ./node_modules/@storybook/addon-knobs/register.js
 @ ./.storybook/addons.js
 @ multi ./.storybook/addons.js ./node_modules/@storybook/react/node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/react/node_modules/@storybook/core/dist/client/manager/index.js

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react 4.0.0-alpha.20
• @storybook/addon-knobs 4.0.0-alpha.20

    "peerDependencies": {
        "react": "^16.5.0",
        "react-dom": "^16.5.0"
    },
    "devDependencies": {
        "@storybook/addon-a11y": "^4.0.0-alpha.20",
        "@storybook/addon-actions": "^4.0.0-alpha.20",
        "@storybook/addon-backgrounds": "^4.0.0-alpha.20",
        "@storybook/addon-info": "^4.0.0-alpha.20",
        "@storybook/addon-jest": "^4.0.0-alpha.20",
        "@storybook/addon-knobs": "^4.0.0-alpha.20",
        "@storybook/addon-notes": "^4.0.0-alpha.20",
        "@storybook/addon-options": "^4.0.0-alpha.20",
        "@storybook/addon-viewport": "^4.0.0-alpha.20",
        "@storybook/react": "^4.0.0-alpha.20",
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.3",
        "babel-preset-env": "^1.7.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "css-loader": "^1.0.0",
        "enzyme": "^3.6.0",
        "enzyme-adapter-react-16": "^1.5.0",
        "file-loader": "^1.1.11",
        "html-webpack-plugin": "^3.2.0",
        "iso-morphic-style-loader": "^2.0.1",
        "jest-cli": "^23.5.0",
        "less-loader": "^4.1.0",
        "lesshint": "^5.1.0",
        "lesshint-webpack-plugin": "^0.0.4",
        "lessmore": "^1.0.3",
        "postcss-loader": "^3.0.0",
        "prop-types": "^15.6.2",
        "react-svg-loader": "^2.1.0",
        "storybook-addon-smart-knobs": "^3.3.1",
        "style-loader": "^0.22.1",
        "stylelint": "^9.5.0",
        "url-loader": "^1.1.1",
        "webpack": "^4.17.2",
        "webpack-bundle-analyzer": "^2.13.1",
        "webpack-dev-server": "^3.1.8"
    },
    "dependencies": {
        "@babel/core": "^7.0.0-rc.1",
        "@babel/preset-env": "^7.0.0-rc.1",
        "@babel/preset-react": "^7.0.0-rc.1",
        "babel-loader": "^7.1.5",
        "classnames": "^2.2.6",
        "less": "^3.8.1",
        "normalize.css": "^8.0.0",
        "npm-font-open-sans": "^1.1.0",
        "prettier": "^1.14.2",
        "react": "^16.5.0",
        "react-dom": "^16.5.0",
        "typescript": "^3.0.3",
        "webpack-cli": "^3.1.0",
        "webpack-node-externals": "^1.7.2"
    }

[mhauens]

Had to include moment seperately.

[ndelangen]

Error is coming from react-datetime

We should open an ticket there.

Would you care to do so @mhauens ?

Our code does not directly depend on moment. (well except for app/riot, investigating that, since it doesn't seem to be used at all).

[ndelangen]

I'm confused seems moment is a peerDep for react-datetime, but we do not have supply it...

Might be a bug with us then still..

So strange this has gone unnoticed for so long...

[ndelangen]

I'm wondering how much bundlesize and all we'd safe by just using the native datepicker provided by browsers...

[jhoffmcd]

Experiencing this today on version 4.0.0-alpha.21

[stephenway]

Same here on alpha.21

ERROR in ./node_modules/react-datetime/DateTime.js
Module not found: Error: Can't resolve 'moment' in '/Users/Stephen/projects/guest-chat-ui/node_modules/react-datetime'
 @ ./node_modules/react-datetime/DateTime.js 6:10-27
 @ ./node_modules/@storybook/addon-knobs/dist/components/types/Date/index.js
 @ ./node_modules/@storybook/addon-knobs/dist/components/types/index.js
 @ ./node_modules/@storybook/addon-knobs/dist/components/Panel.js
 @ ./node_modules/@storybook/addon-knobs/dist/register.js
 @ ./node_modules/@storybook/addon-knobs/register.js
 @ ./.storybook/addons.js
 @ multi ./.storybook/addons.js ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/client/manager/index.js

ERROR in ./node_modules/react-datetime/src/DaysView.js
Module not found: Error: Can't resolve 'moment' in '/Users/Stephen/projects/guest-chat-ui/node_modules/react-datetime/src'
 @ ./node_modules/react-datetime/src/DaysView.js 5:10-27
 @ ./node_modules/react-datetime/src/CalendarContainer.js
 @ ./node_modules/react-datetime/DateTime.js
 @ ./node_modules/@storybook/addon-knobs/dist/components/types/Date/index.js
 @ ./node_modules/@storybook/addon-knobs/dist/components/types/index.js
 @ ./node_modules/@storybook/addon-knobs/dist/components/Panel.js
 @ ./node_modules/@storybook/addon-knobs/dist/register.js
 @ ./node_modules/@storybook/addon-knobs/register.js
 @ ./.storybook/addons.js
 @ multi ./.storybook/addons.js ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/client/manager/index.js

Patch for me was installing moment as a devDep using npm i --save-dev moment

[liangtongzhuo]

How to solve？
npm i --save-dev moment

[stephenway]

@liangtongzhuo That's correct.

[ndelangen]

Who'd vote in favor of just using the browser native datepicker?

[grncdr]

Just ran into this upgrading an older project to v4.0.0-alpha.22. I'm totally happy with the native picker, but I think it's would be good to add the dependency here until somebody has the time to remove react-datetime

[ndelangen]

Ok, let's remove react-datetime!

[ndelangen]

Anyone want to review the PR I made?
@mhauens @jhoffmcd @stephenway @liangtongzhuo @grncdr

Link to working example:
https://5bad25d0dd28ef0d35c0ebbc--storybooks-official.netlify.com/?knob-Name=Storyteller&knob-Years%20in%20NY=9&knob-Age=70&knob-Items%5B0%5D=Laptop&knob-Items%5B1%5D=Book&knob-Items%5B2%5D=Whiskey&knob-Color=%23ffff00&knob-Other%20Fruit=lime&knob-Account%20Balance=12.5&knob-Birthday=1484870400000&knob-Nice=true&knob-Styles=%7B%22border%22%3A%223px%20solid%20%23ff00ff%22%2C%22padding%22%3A%2210px%22%7D&knob-Fruit=apple&selectedKind=Addons%7CKnobs.withKnobs&selectedStory=tweaks%20static%20values%20organized%20in%20groups&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs

[ndelangen]

I will do a similar PR for master, this one is for 3.4

[jhoffmcd]

@ndelangen on your example, changing the date field through up/down arrow keys seems to work great. What is the expected behavior for when a user tries to type number directly into the dd/mm/yyyy entries? It seems to be a bit hit or miss, especially in that yyyy.

[ndelangen]

The behavior is whatever the browser makes of it.

In chrome it seems to allow a user to type most numbers, even ones that would result in invalid dates. It will not allow 99-99-9999 but it will allow 31-02-9999.

I get the new value from the input field and parse it into a Date object.
If it's a valid date, I pass it along to the story. If it's not valid I add a "invalid" message along the input.

I do not know what other browsers do.

I also do not know why at least chrome will now allow negative years or years above 999999 and will only display the last 4 digits of the year when the year is longer.

[ndelangen]

Fix is on master now