Cant find path from alias

[IncredibleMrTim]

Hey

So i followed the migration instructions you gave to migrate from cra-alias to croco-alias. unfortunately i now get the following errors when i try to run craco start using npm start

./src/index.js
Module not found: Can't resolve '@components/App' in '/Users/xxx/Documents/Projects/react/xxx/xxx-ui/src'

jsconfig.json

{
    "compilerOptions": {
        "baseUrl": "src",
        "paths": {
            "@components": ["./components"],
            "@constants": ["./constants"],
            "@context": ["./context"],
            "@features": ["./features"],
            "@hooks": ["./hooks"],
            "@i18n": ["./i18n"],
            "@theme": ["./modules/theme"],
            "@reducers": ["./context/reducers"],
            "@actions": ["./context/actions"],
            "@services": ["./services/api"],
            "@utils": ["./utils"]
        }
    }
}

craco.config.js

const CracoAlias = require('craco-alias')

module.exports = {
  plugins:
  {
    plugin: CracoAlias,
    options: {
      source: 'jsconfig'
    }
  }
}

I have also tried to configure the craco.config.js file in manuale mode useing src: 'options'

Versions

"@craco/craco": "^5.4.0",
"craco-alias": "^1.0.4",

Thanks

[risen228]

Sorry for the late reply.

Your craco config is incorrect, plugins should be an array of objects:

const CracoAlias = require('craco-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'jsconfig'
      }
    }
  ]
};

Also, I recommend you to use /* for directory aliases in jsconfig, even despite that craco-alias understands the incorrect paths:

"@components/*": ["./components/*"]

It is more correct for IDEs and vscode.

[IncredibleMrTim]

Hi

After making the changes you suggested i get the following errors...

internal/validators.js:125
    throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
    at validateString (internal/validators.js:125:11)
    at Object.basename (path.js:1289:5)
    at checkConfig (/Users/ME/Documents/Projects/react/XXX/xxx-ui/node_modules/craco-alias/plugin/pre-check/check-config.js:9:31)
    at preCheck (/Users/ME/Documents/Projects/react/XXX/xxx-ui/node_modules/craco-alias/plugin/pre-check/index.js:18:5)
    at Object.cracoOptions [as overrideWebpackConfig] (/Users/ME/Documents/Projects/react/XXX/xxx-ui/node_modules/craco-alias/plugin/create-overrider.js:6:3)
    at overrideWebpack (/Users/ME/Documents/Projects/react/XXX/xxx-ui/node_modules/@craco/craco/lib/features/plugins.js:42:40)
    at cracoConfig.plugins.forEach.x (/Users/ME/Documents/Projects/react/XXX/xxx-ui/node_modules/@craco/craco/lib/features/plugins.js:64:29)
    at Array.forEach (<anonymous>)
    at applyWebpackConfigPlugins (/Users/ME/Documents/Projects/react/XXX/xxx-ui/node_modules/@craco/craco/lib/features/plugins.js:63:29)
    at mergeWebpackConfig (/Users/ME/Documents/Projects/react/XXX/xxx-ui/node_modules/@craco/craco/lib/features/webpack/merge-webpack-config.js:67:30)
    at overrideWebpackDev (/Users/ME/Documents/Projects/react/XXX/xxx-ui/node_modules/@craco/craco/lib/features/webpack/override.js:11:36)
    at Object.<anonymous> (/Users/ME/Documents/Projects/react/XXX/xxx-ui/node_modules/@craco/craco/scripts/start.js:19:1)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)

[smeijer]

Are there any other preconditions to make this work? I'm still unable to use aliases.

note: Working on Windows, in case that's relevant also worth mentioning, @generated/graphql should point to ./src/generated/graphql.tsx

λ npm run start
> craco start

Cannot find module '@generated/graphql'.  TS2307

    1 | import React from 'react';
  > 2 | import { UserConnection } from '@generated/graphql';

// λ cat craco.config.js
const CracoAlias = require("craco-alias");

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "tsconfig",
        tsConfigPath: "tsconfig.paths.json"
      }
    }
  ]
};

// λ cat tsconfig.paths.json               
{                                       
  "compilerOptions": {                  
    "baseUrl": "src",                   
    "paths": {                          
      "@generated/*": ["./generated/*"]                              
    }                                   
  }                                     
}                                       

[AurelianSpodarec]

Anyone? Craco has lots of issues. I think it's dead. I can't make it work, every tutorial out there about this is broken.

Craco RIP.

[mthahzan]

Guys, make sure you go through the installation guide of CRACO all the way up to changing the npm scripts on your package.json.

I was stuck on this for a while until I realised I completely glossed over that step.