Cannot read property 'createLTR' of undefined #137

ngankt2 · 2018-04-17T03:42:18Z

Ussing: https://github.com/airbnb/react-dates

server render

Cannot read property 'createLTR' of undefined
TypeError: Cannot read property 'createLTR' of undefined
at Object.createLTR (/usr/src/app/node_modules/react-with-styles/lib/ThemedStyleSheet.js:23:47)
at createStyles (/usr/src/app/node_modules/react-with-styles/lib/withStyles.js:105:59)
at WithStyles.maybeCreateStyles (/usr/src/app/node_modules/react-with-styles/lib/withStyles.js:200:22)
at WithStyles.componentWillMount (/usr/src/app/node_modules/react-with-styles/lib/withStyles.js:134:20)
at u.performInitialMount (/usr/src/app/server.bundle.js:15:553194)
at u.mountComponent (/usr/src/app/server.bundle.js:15:552366)
at Object.mountComponent (/usr/src/app/server.bundle.js:1:96042)
at X.mountChildren (/usr/src/app/server.bundle.js:15:559600)
at X._createContentMarkup (/usr/src/app/server.bundle.js:15:591579)
at X.mountComponent (/usr/src/app/server.bundle.js:15:590247)
at Object.mountComponent (/usr/src/app/server.bundle.js:1:96042)
at X.mountChildren (/usr/src/app/server.bundle.js:15:559600)
at X._createContentMarkup (/usr/src/app/server.bundle.js:15:591579)
at X.mountComponent (/usr/src/app/server.bundle.js:15:590247)
at Object.mountComponent (/usr/src/app/server.bundle.js:1:96042)
at X.mountChildren (/usr/src/app/server.bundle.js:15:559600)
at X._createContentMarkup (/usr/src/app/server.bundle.js:15:591579)
at X.mountComponent (/usr/src/app/server.bundle.js:15:590247)
at Object.mountComponent (/usr/src/app/server.bundle.js:1:96042)
at X.mountChildren (/usr/src/app/server.bundle.js:15:559600)
at X._createContentMarkup (/usr/src/app/server.bundle.js:15:591579)
at X.mountComponent (/usr/src/app/server.bundle.js:15:590247)

alexmcmillan · 2018-05-23T23:16:37Z

I had the same problem; turns out it was a RTFM issue.

From the react-dates readme:

Initialize

import 'react-dates/initialize';

As of v13.0.0 of react-dates, this project relies on react-with-styles. If you want to continue using CSS stylesheets and classes, there is a little bit of extra set-up required to get things going. As such, you need to import react-dates/initialize to set up class names on our components. This import should go at the top of your application as you won't be able to import any react-dates components without it.

RayBowman2017b · 2018-10-25T17:21:48Z

Same problem here.

This did not work:
import 'react-dates/initialize';

Downgrading to 12.7.0, as @kakadiadarpan mentioned, solved this.

The code is there:
https://github.com/RayBowman2017b/react-course-2-r-17-10

SaiKrishnaMohan7 · 2018-10-25T23:54:21Z

@RayBowman2017b encountered the same issue. Working on the same app! I have downgraded as well! Thank you for posting this here.

josholiver · 2018-11-28T16:59:16Z

@alexmcmillan Thanks. It worked.

Adam-Burke · 2018-12-01T01:21:40Z

So you have to downgrade 6 major releases to fix this bug?

ljharb · 2018-12-01T01:29:46Z

That shouldn’t be necessary. Using the latest version with importing the initialize entry point should work.

cptiwari20 · 2018-12-02T15:56:06Z

Yes, i had the same issue. But after importing the initialize entry point it has been solve.

import 'react-dates/initialize'; // necessary for latest version import { SingleDatePicker } from 'react-dates'; import 'react-dates/lib/css/_datepicker.css';

darieldejesus · 2018-12-06T04:40:48Z

As @alexmcmillan said, this is required by default because of the dependency with react-with-styled. And as the solution he linked, you just need to import the initializer at the beginning of the app (could be located in the index.js file or you can include it at the beginning of the component file).

On the other hand, I had the error when trying to run the tests using Jest. I just had to import the initializer at the beginning of the test file and that fixed the issue.

Note ⚠️ : if you decide to include the initializer ("react-dates/initialize") in the component file, you don't need to include it here.

File: SingleDatePicket.test.tsx

import * as React from "react";
import "jest-styled-components";
import renderer from 'react-test-renderer';
import "react-dates/initialize"; //<===========================================

import MySingleDatePicker from "../MySingleDatePicker";
...
describe("MySingleDatePicker", () => {
  it("Should render correctly", () => {
    const component = renderer.create(
      <MySingleDatePicker
        value={null}
      />
    ).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

odama626 · 2018-12-12T17:49:49Z

I am bundling a component that wraps react-dates into a component library that transpiles to cjs with rollup. The library is consumed by an isomorphic react project.

Using import 'react-dates/initialize' in the wrapping component no longer works

ljharb · 2018-12-12T17:57:08Z

It’s possible rollup is incorrectly removing code; it wouldn’t be the first time. Can you reproduce it with browserify or webpack?

IkwhanChang · 2019-01-25T22:49:15Z

Using import 'react-dates/initialize' is working for me.

gazgump · 2019-02-22T17:17:04Z

I was struggling for a minute there - you need to add the css link too -

import 'react-dates/lib/css/_datepicker.css';

Doh!

ljharb · 2019-02-22T18:11:08Z

Closing; this seems answered.

tstirrat15 · 2019-06-13T21:45:21Z

I'm running into the same problem. I've got the initializer at the top of the component file, and I'm getting this error:

react_1          | TypeError: Cannot read property 'createLTR' of undefined
react_1          |     at Object.createLTR (/usr/src/app/node_modules/react-with-styles/lib/ThemedStyleSheet.js:23:47)
react_1          |     at getStyleDef (/usr/src/app/node_modules/react-with-styles/lib/withStyles.js:129:61)
react_1          |     at getState (/usr/src/app/node_modules/react-with-styles/lib/withStyles.js:147:17)
react_1          |     at new WithStyles (/usr/src/app/node_modules/react-with-styles/lib/withStyles.js:168:25)
react_1          |     at processChild (/usr/src/app/build/webpack:/node_modules/react-dom/cjs/react-dom-server.node.development.js:2098:1)
react_1          |     at resolve (/usr/src/app/build/webpack:/node_modules/react-dom/cjs/react-dom-server.node.development.js:2064:1)
react_1          |     at ReactDOMServerRenderer.render (/usr/src/app/build/webpack:/node_modules/react-dom/cjs/react-dom-server.node.development.js:2383:1)
react_1          |     at ReactDOMServerRenderer.read (/usr/src/app/build/webpack:/node_modules/react-dom/cjs/react-dom-server.node.development.js:2357:1)
react_1          |     at renderToString (/usr/src/app/build/webpack:/node_modules/react-dom/cjs/react-dom-server.node.development.js:2729:1)
react_1          |     at /usr/src/app/build/webpack:/render.js:103:1
react_1          |     at process._tickCallback (internal/process/next_tick.js:68:7)

This is in a server-side rendered application. Is there anything that would prevent either react-dates or react-with-styles from working in a server context?

Relevant versions of things:

React(-dom): 16.4.2
webpack: 4.30.0
react-dates: 20.2.2

This is in the dev environment, so it's unlikely to be a tree-shaking issue.

matthlavacka · 2020-01-04T13:10:51Z

@tstirrat15 Have you managed to figure this out? Same issue here

tstirrat15 · 2020-01-07T14:07:16Z

@matthlavacka We're no longer experiencing the issue, but I can't figure out exactly what fixed it - we ran in to this issue, tabled the upgrade for a few months, and when I came back to it, it Just Worked^tm somehow.

We're on react 16.10 now, and we're using webpack-node-externals for externalization, though neither react or react-dom is externalized.

One thing to check is that you're only pulling one copy of react into your project - duplicate-package-checker-webpack-plugin can help with that.

matthlavacka · 2020-01-13T22:00:00Z

thanks for your reply @tstirrat15, I decided to use different package to not waste time.

picozzimichele · 2020-06-04T07:19:10Z

this worked for me

import 'react-dates/initialize'

yashdeora · 2020-08-11T09:18:35Z

I have the same problem that but the code is exactly the same. am using react programming.
https://www.programmingoneonone.com/

akshayjai1 · 2020-08-12T11:24:06Z

Yes, i had the same issue. But after importing the initialize entry point it has been solve.

import 'react-dates/initialize'; // necessary for latest version import { SingleDatePicker } from 'react-dates'; import 'react-dates/lib/css/_datepicker.css';

Worked!

omer-jan · 2020-10-01T18:17:16Z

Same problem here.

This did not work:
import 'react-dates/initialize';

Downgrading to 12.7.0, as @kakadiadarpan mentioned, solved this.

The code is there:
https://github.com/RayBowman2017b/react-course-2-r-17-10

thanks it is work for me

jagtarsinghwork · 2021-05-17T06:16:08Z

Nothing need just import thiese 2 lines where you date import above this import these
or Another way
in main.js or index js paste these line

import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import { SingleDatePicker } from "react-dates";

MohammadSamirAskan · 2021-06-07T12:56:25Z

it's working thank you.

gecko25 · 2021-11-14T18:26:53Z

I had to remove my node modules and reinstall them.

carlosaflach · 2023-03-06T19:49:29Z

I had the same problem here, apparently remove node modules and reinstall them worked.

bippi mentioned this issue Jan 14, 2019

Not able to use react-dates ueno-llc/starter-kit-universally#109

Open

ljharb closed this as completed Feb 22, 2019

gabsn mentioned this issue Mar 31, 2020

As a user, I can filter trials by registration date inato/inato-anticovid#117

Closed

This comment has been minimized.

Sign in to view

luucvanderzee mentioned this issue May 12, 2023

Fix DateInput bug CitizenLabDotCo/citizenlab#4874

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot read property 'createLTR' of undefined #137

Cannot read property 'createLTR' of undefined #137

ngankt2 commented Apr 17, 2018 •

edited

alexmcmillan commented May 23, 2018 •

edited

RayBowman2017b commented Oct 25, 2018

SaiKrishnaMohan7 commented Oct 25, 2018

josholiver commented Nov 28, 2018

Adam-Burke commented Dec 1, 2018

ljharb commented Dec 1, 2018

cptiwari20 commented Dec 2, 2018

darieldejesus commented Dec 6, 2018 •

edited

odama626 commented Dec 12, 2018 •

edited

ljharb commented Dec 12, 2018

IkwhanChang commented Jan 25, 2019

gazgump commented Feb 22, 2019

ljharb commented Feb 22, 2019

tstirrat15 commented Jun 13, 2019 •

edited

matthlavacka commented Jan 4, 2020

tstirrat15 commented Jan 7, 2020

matthlavacka commented Jan 13, 2020

This comment has been minimized.

picozzimichele commented Jun 4, 2020

yashdeora commented Aug 11, 2020 •

edited

akshayjai1 commented Aug 12, 2020

omer-jan commented Oct 1, 2020

jagtarsinghwork commented May 17, 2021

MohammadSamirAskan commented Jun 7, 2021

gecko25 commented Nov 14, 2021

carlosaflach commented Mar 6, 2023

Cannot read property 'createLTR' of undefined #137

Cannot read property 'createLTR' of undefined #137

Comments

ngankt2 commented Apr 17, 2018 • edited

alexmcmillan commented May 23, 2018 • edited

RayBowman2017b commented Oct 25, 2018

SaiKrishnaMohan7 commented Oct 25, 2018

josholiver commented Nov 28, 2018

Adam-Burke commented Dec 1, 2018

ljharb commented Dec 1, 2018

cptiwari20 commented Dec 2, 2018

darieldejesus commented Dec 6, 2018 • edited

odama626 commented Dec 12, 2018 • edited

ljharb commented Dec 12, 2018

IkwhanChang commented Jan 25, 2019

gazgump commented Feb 22, 2019

ljharb commented Feb 22, 2019

tstirrat15 commented Jun 13, 2019 • edited

matthlavacka commented Jan 4, 2020

tstirrat15 commented Jan 7, 2020

matthlavacka commented Jan 13, 2020

This comment has been minimized.

picozzimichele commented Jun 4, 2020

yashdeora commented Aug 11, 2020 • edited

akshayjai1 commented Aug 12, 2020

omer-jan commented Oct 1, 2020

jagtarsinghwork commented May 17, 2021

MohammadSamirAskan commented Jun 7, 2021

gecko25 commented Nov 14, 2021

carlosaflach commented Mar 6, 2023

ngankt2 commented Apr 17, 2018 •

edited

alexmcmillan commented May 23, 2018 •

edited

darieldejesus commented Dec 6, 2018 •

edited

odama626 commented Dec 12, 2018 •

edited

tstirrat15 commented Jun 13, 2019 •

edited

yashdeora commented Aug 11, 2020 •

edited