Trouble with aliases

[fleonard]

I'm having some trouble with aliases after migrating to CRA5 and Craco 7 and using your plugin since the one I was using before has been deprecated. I was wondering if you might help understanding what I've set up wrong since I followed your example and I still having some issues both when running dev and also when running tests.

This is my tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "api/*": ["src/api/*"],
      "app/*": ["src/app/*"],
      "assets/*": ["src/assets/*"],
      "components/*": ["src/components/*"],
      "env": ["src/env"],
      "options/*": ["src/options/*"],
      "services": ["src/services"],
      "test/*": ["src/test/*"],
      "utils": ["src/utils"],
      "utils/*": ["src/utils/*"],
      "globalStyle": ["src/globalStyle.ts"],
      "types": ["src/types"],
      "logging": ["src/utils/logging"],
      "directFlow/*": ["src/direct-flow/*"]
    }
  }
}

This is my craco config

const path = require('path')
const { CracoAliasPlugin } = require('react-app-alias')
const SentryPlugin = require('@sentry/webpack-plugin')

module.exports = {
  plugins: [
    {
      plugin: CracoAliasPlugin,
      options: {},
    },
  ],
  babel: {
    plugins: [
      [
        'babel-plugin-styled-components',
        {
          ssr: false,
          displayName: process.env.REACT_APP_NODE_ENV !== 'production',
          pure: true,
        },
      ],
    ],
  },
  jest: {
    configure: {
      setupFilesAfterEnv: ['./src/test/setupTests.ts'],
      moduleDirectories: [
        'node_modules',
        path.join(__dirname, 'src'),
        path.join(__dirname, 'utils'),
        '!src/utils/**/*.{ts,tsx}',
        '!src/env/*.ts',
      ],
      collectCoverage: true,
      coverageDirectory: 'coverage',
      collectCoverageFrom: [
        'src/**/*.{ts,tsx}',

        // Ignore test coverage for the following files:
        '!src/utils/**/*.{ts,tsx}',
        '!src/env/*.ts',
      ],
      resetMocks: true,
      testURL: 'http://localhost/,
    },
  },
  webpack: {
    plugins: {
      add:
        process.env.REACT_APP_NODE_ENV !== 'local'
          ? [
              new SentryPlugin({
                release: process.env.REACT_APP_VERSION,
                dist: process.env.REACT_APP_VERSION,
                include: './build/static/js',
                ignore: ['node_modules'],
              }),
            ]
          : [],
    },
  },
  eslint: {
    enable: process.env.REACT_APP_NODE_ENV !== 'local',
  },
}

And I've also added like in your example a config-overrides.js like the following

const { aliasWebpack, aliasJest } = require('react-app-alias')

const options = {
  autoscan: 'src',
}

module.exports = aliasWebpack(options)
module.exports = aliasJest(options)

But I'm still having trouble around some imports, any idea? seems like these 2 are clashing and Webpack is not able to resolve the correct one but only in certain instances

"utils": ["src/utils"],
"utils/*": ["src/utils/*"]

[oklas]

Have you read the discussion since this post btw? Perhaps this is relevant.

You quoted so many good configs here. What exactly is happening and what the problem is would be clear on a working example. May be create a repo and put configs there? Then it will be visible, what exactly is going on.

[fleonard]

Ended up migrating to Vite so close this one