Why create-react-app alias is not able to find index.js from folder?

Question

I am stuck up with a weird issue while creating alias for my app. I am trying to create the alias adding jsconfig.json what looks like

{
    "compilerOptions": {
        "lib": [
            "dom",
            "es2015",
            "es2016",
            "es6",
            "es2017"
        ],
        "target": "es2017",
        "module": "es6",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "paths": {
            "actions/*": ["src/actions/*"],
            "public/*": ["public/*"],
            "components/*": ["src/components/*"],
            "containers/*": ["src/containers/*"],
            "constants/*": ["src/constants/*"],
            "config/*": ["config/*"],
            "helpers/*": ["src/helpers/*"],
            "stores/*": ["src/stores/*"],
            "styles/*": ["src/styles/*"]
        }
    },
    "exclude": ["node_modules", "**/node_modules/*"]
}

in this case its not able to find any of the component alias.

I changed the json file to

{
    "compilerOptions": {
        "lib": [
            "dom",
            "es2015",
            "es2016",
            "es6",
            "es2017"
        ],
        "target": "es2017",
        "module": "es6",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./src/",
        "paths": {
            "actions/*": ["actions/*"],
            "public/*": ["public/*"],
            "components/*": ["components/*"],
            "containers/*": ["containers/*"],
            "constants/*": ["constants/*"],
            "config/*": ["config/*"],
            "helpers/*": ["helpers/*"],
            "stores/*": ["stores/*"],
            "styles/*": ["styles/*"]
        }
    },
    "exclude": ["node_modules", "**/node_modules/*"]
}

It able to get the component alias however throwing error Cannot find file: 'index.js' does not match the corresponding name on disk: './src/components/Checkbox/CheckBox'. while I am trying to import it as import Checkbox from 'components/Checkbox';. And my folder structure looks like

mainDir/
      config/
      public/
      src/
        component/
          Checkbox/
            index.js
      jsconfig.json
      package.json

How do I fix this issue? Is there any other way I can create alias with create-react-app?

Oluwafemi Sule · Accepted Answer · 2019-10-04 18:52:44Z

3

In create-react-app project, source files outside of src folder are not transpiled. [1]

Directly importing from es6 modules that use JSX syntax outside of src folder fail for this reason.

Common practice is to create symlinks in src folder for modules outside it and set up aliases to resolve from the src folder. e.g.

        "baseUrl": "src",
        "paths": {
            "actions": ["actions/*"],
            "public": ["public/*"],
            "components": ["components/*"],
            "containers": ["containers/*"],
            "constants": ["constants/*"],
            "config": ["config/*"],
            "helpers": ["helpers/*"],
            "stores": ["stores/*"],
            "styles": ["styles/*"]
        }

Symlink external modules

ln -s ../config/ ./src/
ln -s ../public/ ./src/

answered Oct 4, 2019 at 18:52

Oluwafemi Sule

39.3k1 gold badge63 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Subhendu Kundu Over a year ago

Gussed so. Thanks for clarify that. Tho I still have the issue for Cannot find file: 'index.js' does not match the corresponding name on disk: './src/components/Checkbox/CheckBox'. Any suggestion how to fix that?

Oluwafemi Sule Over a year ago

The folder name in the alias ["components/"] but that in the project tree you shared is component. You should check that and be sure what folder is present on disk to inform the path that is alias.

Subhendu Kundu Over a year ago

So I figured out the issue, Checkbox/CheckBox this where its wrong, naming style. In a place, I had it Checkbox and other place CheckBox. Fixed it now. Thank you so much. If I may, I have one more question, it seems fair jsconfig wouldn't let me use alias for scss files. Is there a way I could use alias for scss files as well with this kinda config on create-react-app?

Oluwafemi Sule Over a year ago

I don't know. Usually CSS-in-JS is the way to go with SPA built in React. You can check if this documentation helps: create-react-app.dev/docs/adding-a-sass-stylesheet

oklas · Accepted Answer · 2022-03-05 11:31:07Z

0

The alias solution for craco or rewired create-react-app is react-app-alias for systems as: craco, react-app-rewired, customize-cra

According docs of mentioned systems replace react-scripts with craco in package.json and configure next:

// craco.config.js
const {CracoAliasPlugin} = require('react-app-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAliasPlugin,
      options: {}
    }
  ]
}

Configure aliases in json like this:

// tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "example/*": ["example/src/*"],
      "@library/*": ["library/src/*"]
    }
  }
}

And add this file in extends section of main typescript config file:

// tsconfig.json
{
  "extends": "./tsconfig.paths.json",
  // ...
}

edited Mar 5, 2022 at 11:31

answered Mar 13, 2020 at 5:55

oklas

8,2702 gold badges31 silver badges42 bronze badges

Collectives™ on Stack Overflow

Why create-react-app alias is not able to find index.js from folder?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related