React reporting Cannot find module: 'react-gender-input'. Make sure this package is installed.

[drwonky]

With the following package.json dependencies, React refuses to load react-gender-input:

  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "async-mutex": "^0.2.4",
    "bootstrap": "^4.5.0",
    "formik": "^2.1.5",
    "react": "^16.13.1",
    "react-bootstrap": "^1.3.0",
    "react-cookies": "^0.1.1",
    "react-dom": "^16.13.1",
    "react-feather": "^2.0.8",
    "react-gender-input": "git+https://github.com/aimee-gm/react-gender-input.git",
    "react-identicons": "^1.2.4",
    "react-localization": "^1.0.15",
    "react-openapi-client": "^0.1.5",
    "react-phone-input-2": "^2.13.8",
    "react-script-tag": "^1.1.2",
    "react-scripts": "^3.4.3",
    "yup": "^0.29.3"
  },

As you can see, I tried the github repo because it's slightly ahead of the npm release, still no dice.

I'm wondering if there is some compatibility issue between the version of react and react-gender-input? I'm accustomed to verbose error messages from C compilers and Python, so the useless debugging output from npm has me at a disadvantage.

I nuked the node_modules directory and ran npm install to reinstall all packages, so that's not the issue.

Thanks!

[drwonky]

I figured out the issue, the 'main' in package.json is pointing to a file that does not exist: dist/index.js.

I removed the git tree and reinstalled the npm package, then copied index.ts from the root of the npm package to dist/index.js and that fixed the problem.

The demo works because it includes the component directly with this include:

import { GenderInputProps, GenderInput } from '../../../lib/gender-input';

[drwonky]

So I ran into this issue again and I suspect there are 2 things happening.

• the dist/index.js is a reference to compiled TS source The other TS files are compiled to JS, but dist/index.js was not compiled from index.ts, this seems like an omission in the package creation process.

• When trying to run this, webpack chokes because TS is not setup in CRA

  ./node_modules/react-gender-input/lib/gender-input.tsx 4:7
  Module parse failed: Unexpected token (4:7)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  | import { genderOptions } from 'gender-options';
  | 
  > export interface GenderInputProps {
  |   required?: boolean;
  |   preferNotToSay?: boolean;

I think the solution is to get TS working with CRA, however simply installing typescript and ts-loader doesn't solve that issue. It seems that webpack must be configured to work with tsx files to be sent to ts-loader.

Any assistance in getting TS working to grok these files with CRA would be appreciated.