0

I have set up webpack aliases with react-app-rewired (using addWebpackAlias from customize-cra) but it only appears to work if the filename has the format filename.tsx or filename.ts.

We use the typical naming convention:

  • components eg: mycomponent.component.tsx
  • redux slices as in the redux docs eg: configuration.slice.ts

etc...

Without using webpack aliases, referencing the files works fine, however when adding the aliases, only the files without the .description.ts resolve correctly. VS Code resolves the files correctly, it's only webpack that's not working.

As an example:

import { Home } from '@pages' works fine.

import { Home } from '@pages/home/home.component' I get a Resolve error.

Ralph W
  • 145
  • 6

1 Answers1

0

I ended up adding adding to the moduleFileExtensions configuration the webpack config

paths.moduleFileExtensions = [...paths.moduleFileExtensions, 'component.tsx', 'slice.ts', 'api.ts'];
Ralph W
  • 145
  • 6