CODEWITHSUNDEEP
javascriptreactjsbabeljseslintnext.js
user6147554
user6147554

Reputation:

Eslint error when I use babel alias on nextjs

I added the module-resolver plugin to .babelrc to be able to use aliases in my nextjs project. 

"plugins": [
    [
        "module-resolver",
        {
             "root": [
             "./"
             ],
             "alias": {
                "components": "./app/components",
                "pages": "./app/pages",
                "themes": "./app/themes"
             }
        }
    ]
]

Everything work well but since I added this configuration, my eslint configuration generate import/no-unresolved errors.

[eslint] Unable to resolve path to module 'components/HOC'. [import/no-unresolved]

To fix that, I tried to update my .eslintrc.json settings like that:

"settings": {
    "import/resolver": {
      "components": "./app/components",
      "pages": "./app/pages",
      "themes": "./app/themes"
    }  
},

However, this new configuration have no effect. I want to clear this problem properly, do you have an idea to properly fix that problem?

Thanks!

Upvotes: 0

Views: 1726

Answers (1)

John Wilfred
John Wilfred

Reputation: 169

Add this setting on your jsconfig.json (tsconfig.json for TypeScript) reference: https://github.com/tleunen/babel-plugin-module-resolver#editors-autocompletion

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "components": ["./app/components"],
      "pages": ["./app/pages"],
      "themes": ["./app/themes"]
    }
  }
}

Upvotes: 0

Related Questions