react-dates version e.g. [email protected]

Describe the bug I'm trying to build an application with esbuild that has react-dates as dependency but I come out with a runtime error related to a dep of the library. I also notice that in order to build I need to add @babel/runtime as dep.

I create a test project to reproduce it.

Source code (including props configuration) Steps to reproduce the behavior:

src/index.tsx

import { useState } from 'react';
import { render } from 'react-dom';
import 'react-dates/initialize';
import { DateRangePicker, FocusedInputShape } from 'react-dates';
import moment, { Moment } from 'moment';

const App = () => {
  const [startDate, setStartDate] = useState<Moment>(moment());
  const [endDate, setEndDate] = useState<Moment>(moment());
  const [focus, setFocus] = useState<FocusedInputShape | null>(null);
  return (
    <section>
      <header>
        <DateRangePicker
          startDate={startDate}
          startDateId="start-date"
          endDate={endDate}
          endDateId="end-date"
          onDatesChange={({ startDate, endDate }) => {
            if (startDate) setStartDate(startDate);
            if (endDate) setEndDate(endDate);
          }}
          focusedInput={focus}
          onFocusChange={(focusedInput) => setFocus(focusedInput)}
        />
        <h2>This is a test</h2>
      </header>
      <main></main>
    </section>
  );
};

render(<App />, document.querySelector('main'));

esbuild.config.js

const { pnpPlugin } = require('@yarnpkg/esbuild-plugin-pnp');
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: {
    index: 'src/index.tsx',
    'index.html': 'src/index.html',
  },
  assetNames: '[name]',
  inject: ['./react-shim.js'],
  bundle: true,
  outdir: 'build',
  loader: {
    '.html': 'file',
  },
  plugins: [pnpPlugin()],
});

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "lib": ["esnext", "dom"],
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "outDir": "build/",
    "preserveConstEnums": true,
    "resolveJsonModule": true,
    "removeComments": false,
    "skipLibCheck": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "target": "esnext",
    "forceConsistentCasingInFileNames": false
  },
  "include": ["src"]
}

react-shim.js

import * as React from 'react';
export { React };

package.json

{
  "name": "test-react-dates",
  "sideEffects": false,
  "main": "build/index.js",
  "files": [
    "build"
  ],
  "scripts": {
    "build": "rm -rf build && yarn node esbuild.config.js"
  },
  "devDependencies": {
    "@babel/runtime": "^7.14.8",
    "@types/react": "^17.0.13",
    "@types/react-dates": "^17.1.5",
    "@types/react-dom": "^17",
    "@yarnpkg/esbuild-plugin-pnp": "^1.0.0-rc.13",
    "esbuild": "^0.12.16"
  },
  "dependencies": {
    "moment": "^2.29.1",
    "react": "^17.0.2",
    "react-dates": "^21.8.0",
    "react-dom": "^17.0.2"
  }
}

Screenshots/Gifs

Desktop (please complete the following information):

• OS: [e.g. MacOS]
• Browser [e.g. firefox, chrome]

I didn't know about that because I think it isn't mentioned in the documentation. Thanks a lot to share that with me I will try to use aliasing to see if works.

I’m a bit confused; the title of the issue claims a runtime error.

It is an incredibly large bit of work to add node-native ESM, and it is a breaking change, and the value is quite tiny - deep imports make treeshaking unnecessary (and do a better job of keeping the bundle small than treeshaking possibly can)

However, react-dates/esm already exists.

I never said is not working, we are using it from a long time and it's working. What I'm saying that doesn't support the module feature and so the tree shacking and bundle it in ESM won't behave correctly. I don't think would be difficult to make it work and there would be a lot of benefit to have that.