linting broken when adding resolve.alias to webpack

I added resolve.alias:

// webpack.config.base.js
resolve: {
  extensions: ['.js', '.jsx', '.json'],
  modules: [
    path.join(__dirname, 'app'),
    'node_modules',
  ],
  alias: {
    '@fortawesome': path.join(__dirname, 'app', 'vendor', '@fortawesome'),
  },
},

The alias is working, and app is working fine, but the eslint is broken:

$ npm run lint

> @zen/zen-wallet@0.2.15 lint /Users/goldy/apps/zenwallet
> cross-env NODE_ENV=development eslint --cache --format=node_modules/eslint-formatter-pretty .

Cannot find module '/Users/goldy/apps/zenwallet/app/webpack.config.eslint.js'
Error: Cannot find module '/Users/goldy/apps/zenwallet/app/webpack.config.eslint.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:548:15)
    at Function.Module._load (internal/modules/cjs/loader.js:475:25)
    at Module.require (internal/modules/cjs/loader.js:598:17)
    at require (internal/modules/cjs/helpers.js:11:18)
    at Object.exports.resolve (/Users/goldy/apps/zenwallet/node_modules/eslint-import-resolver-webpack/index.js:68:25)
    at v2 (/Users/goldy/apps/zenwallet/node_modules/eslint-module-utils/resolve.js:94:23)
    at withResolver (/Users/goldy/apps/zenwallet/node_modules/eslint-module-utils/resolve.js:99:16)
    at fullResolve (/Users/goldy/apps/zenwallet/node_modules/eslint-module-utils/resolve.js:116:22)
    at Function.relative (/Users/goldy/apps/zenwallet/node_modules/eslint-module-utils/resolve.js:61:10)
    at remotePath (/Users/goldy/apps/zenwallet/node_modules/eslint-plugin-import/lib/ExportMap.js:379:30)

on Atom, linting on files that import ‘@fortawesome’ are broken as well.

Any ideas why is that happening, and how can I fix that? Do you have an example of a project that uses this boilerplate and has resolve.alias in webpack.config.base.js?

[Mati365]

If you use .eslintrc or .eslintrc.yml please rename it to .eslintrc.js and change webpack resolve function to something like it: webpack: { config: resolve('./webpack.config.eslint.js'), }, In my case it fixed the problem

[goldylucks]

@Slapbox really appreciate your time on this!

I prefer to explicitly import it wherever I’m using it, and not have <FontAwesomeIcon /> out of nowhere in my app.

Thank you for the attempt, I suspected it might be a weback or eslint thing, and not related to this boilerplate.

So if this is the case, do we have a use in .eslintrc for settings.import/resolver.webpack.config.webpack.config.eslint.js ?

this is the sole reason of it being there right?

I had to comment it out, and add the following as well:

    "import/no-unresolved": [ "error", { "ignore": [ '@fortawesome/' ] } ], # hack until resolving import properly
    "import/extensions": [ "error", { "ignore": [ '@fortawesome/' ] } ], # hack until resolving import properly