React-dates: TypeError: (0 , _arrayFlatten.from) is not a function

[Areaxe]

I meet an error in a react project, the project used css-module and i rewrite the css

index.js:55 Uncaught (in promise) TypeError: (0 , _arrayFlatten.from) is not a function
    at Object.resolve (index.js:55)
    at resolve (ThemedStyleSheet.js:62)
    at DateRangePicker.render (DateRangePicker.js:587)
    at ReactCompositeComponent.js:793
    at measureLifeCyclePerf (ReactCompositeComponent.js:73)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:792)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:819)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:359)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
    at Object.mountComponent (ReactReconciler.js:43)

there is my code

import "../styles/components/_date_range.scss";
import 'react-dates/initialize';
import { DateRangePicker } from 'react-dates';
import moment from 'moment';

getValidDate(day) {  //  startTime or a year ago
    let startDateLimit = this.state.startDateLimit;
    let date = new Date(day).getTime();
    let { saletime={} } = this.props;
    let { start_time, end_time } = saletime;
    let inStart = true, inEnd = true;
    if(start_time)
      inStart = date > new Date(start_time).getTime()-60 * 60 * 12 *1000;
    if(end_time)
      inEnd = date < new Date(end_time).getTime()+60 * 60 * 12 *1000
    if(startDateLimit){
      return !(inStart&&date > startDateLimit-60 * 60 * 24 *1000 && inEnd&&date <= startDateLimit + 60 * 60 * 24 * 31 * 1000);  // 31 day
    }
    return !(inStart&&date>new Date().getTime()-60*60*24*365*1000 && inEnd);  //  a year
  }

render(){
  return <DateRangePicker
                  startDate={this.state.startDate}
                  endDate={this.state.endDate}
                  focusedInput={this.state.focusedInput}
                  isOutsideRange={(day) => this.getValidDate(day)}
                  onFocusChange={focusedInput=>{
                     if(focusedInput=="endDate"){
                        this.setState({ startDateLimit: new Date(startDate).getTime()})
                      } else{
                        this.setState({startDateLimit:""})
                      }
                      this.setState({ focusedInput })
                    } 
                  }
                  onDatesChange={({ startDate,endDate }) => this.changeDate(startDate,endDate)}
                  hideKeyboardShortcutsPanel
                  readOnly={true}
                />
}

css code

:global{
  .SingleDatePicker {
    position: relative;
    display: inline-block;
  }
// Original style
...
}

my environment： node :7.5 "react-dates": "^15.0.0", "react": "^15.6.2",

[Areaxe]

I am sorry about that, it is my environmental problem. I used yarn 0.19 before and now I have upgraded to 1.3.1

[Pixelatex]

I'm getting this error still.. not using yarn so would appreciate some help on this. (using the single date picker)

[selfcontained]

Also seeing this while trying to upgrade from 11.0.1 in a react 16 upgrade.

[Pixelatex]

it doesn't need initialize... it has it already but no matter what I try, it still breaks.

[ljharb]

The error seems to be coming from https://unpkg.com/[email protected]/array-flatten.js, but that has .from, so I'm not sure what the issue is.

[selfcontained]

Yah, digging in more, npm ls array-flatten shows:

├─┬ [email protected]
│ └── [email protected]
└─┬ [email protected]
  └─┬ [email protected]
    └── [email protected]

...but when looking at the output that webpack is bundling it seems like it's grabbing 1.1.1 from the express dep, which seems wrong. I can't find anything related to react-dates that would be causing this, but not sure why webpack is bundling that version. NPM is installing [email protected] inside the react-with-styles-interface-css correctly.

By adding [email protected] as a local dep to my project - npm i array-flatten@latest, it forces that version at the root of node_modules, and pushes 1.1.1 inside the express/node_modules folder - which then causes webpack to grab 2.1.1 for react-with-styles-interface-css, which fixes this issue for me. No idea what this is happening in the first place, but doesn't seem like an issue with react-dates.

¯\_(ツ)_/¯

[amkoehler]

Late to the party, but thanks for sharing the info @selfcontained. We had the same issue and resolved it by deliberately specifying array-flatten@^2.1.1 as a project dep. FWIW we use yarn and not npm.