Incompatibility with create-react-app

[JDWong-wag]

trafficstars

How does one use Globalize and the DateTimePicker from react-widgets with create-react-app?

From an empty project:

npx create-react-app

my package.json

{
  "name": "test-globalize",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "cldr-data": "latest",
    "globalize": "^1.3.0",
    "iana-tz-data": ">=2017.0.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.1",
    "react-widgets-globalize": "^5.0.0"
  },
  "cldr-data-urls-filter": "(core|dates|numbers|units)",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Globalize from 'globalize';
import globalizeLocalizer from 'react-widgets-globalize';

import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

Globalize.locale('en');

globalizeLocalizer();


ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Produces the errror:

Failed to compile.

./node_modules/globalize/dist/globalize.js
Module not found: Can't resolve 'cldr' in '/Users/jd/sandbox/test-globalize/node_modules/globalize/dist'

For some reason globalize will not compile, and index.js doesn't get run. Is there a fix without ejecting?

[swyxio]

nope. https://github.com/globalizejs/globalize/issues/603

[timarney]

FYI - For create-react-app you might try https://github.com/timarney/react-app-rewired let's you mod the webpack config without ejecting (might do the trick).

[metaclass-nl]

Maybe https://github.com/metaclass-nl/switch-language-example-globalize could be interesting for this. But i did not yet look at https://github.com/timarney/react-app-rewired, thanks @timarney!