Create-react-app: Absolute imports with CRA

Created on 13 Oct 2019  ยท  1Comment  ยท  Source: facebook/create-react-app

I created a Typescript-enabled React app bootstrapped from create-react-app. After enabling baseUrl: "." for easier absolute imports, my Jest tests broke.

How to repro:

  1. With a src folder in your root directory, add baseUrl: "." to your tsconfig.json under compilerOptions.
  2. Create a Jest test file with the following code:
import { isValidAddress } from 'orbit-db';

it('doesnt fail to resolve import', () => {
    isValidAddress("asdf");
});
  1. Run npm install orbit-db ipfs and then npm run test. You should end up with something similar to the following error:
 FAIL  src/components/Random.test.tsx
  โ— Test suite failed to run

    Configuration error:

    Could not locate module multicodec/src/base-table mapped as:
    path/to/my/repo/src/base-table.

    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/src\/(.*)$/": "path/to/my/repo/src/$1"
      },
      "resolver": null
    }

      at createNoMappedModuleFoundError (node_modules/jest-resolve/build/index.js:501:17)
      at Object.<anonymous> (node_modules/cids/src/index.js:6:16)

According to my understand of CRA, the moduleNameMapper regex is generated when the CRA script sees the baseUrl field in tsconfig.json. However, this regex also seems to wrongly capture some of the imports in files from node_modules.

bug

Most helpful comment

This should be fixed in the next version.

>All comments

This should be fixed in the next version.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

xgqfrms-GitHub picture xgqfrms-GitHub  ยท  3Comments

JimmyLv picture JimmyLv  ยท  3Comments

rdamian3 picture rdamian3  ยท  3Comments

wereHamster picture wereHamster  ยท  3Comments

Evan-GK picture Evan-GK  ยท  3Comments