import-js / eslint-plugin-import

ESLint plugin with rules that help validate proper imports.
MIT License
5.48k stars 1.57k forks source link

Webpack resolver vs date-fns #1511

Open hbarcelos opened 4 years ago

hbarcelos commented 4 years ago

In my .eslintrc, I have:

{
  //...
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "build/webpack.base.conf.js"
      }
    }
  }
}

In build/webpack.base.conf.js, I have:

  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.vue', '.json'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '@': path.resolve('src'),
    },
  },

My code import is like:

import differenceInCalendarDays from 'date-fns/differenceInCalendarDays'

Looks like for some reason this plugin is interfering with date-fns module resolution. When I try to run eslint on the repository, I get he following error:

Error resolving webpackConfig { Error: Cannot find module '<package>/packages/dapp/node_modules/date-fns/esm/differenceInCalendarDays/build/webpack.base.conf.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:668:15)
    at Function.Module._load (internal/modules/cjs/loader.js:591:27)
    at Module.require (internal/modules/cjs/loader.js:723:19)
    at require (<package>/node_modules/eslint/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.exports.resolve (<package>/node_modules/eslint-import-resolver-webpack/index.js:66:27)
    at v2 (<package>/node_modules/eslint-module-utils/resolve.js:94:23)
    at withResolver (<package>/node_modules/eslint-module-utils/resolve.js:99:16)
    at fullResolve (<package>/node_modules/eslint-module-utils/resolve.js:116:22)
    at Function.relative (<package>/node_modules/eslint-module-utils/resolve.js:61:10)
    at remotePath (<package>/node_modules/eslint-plugin-import/lib/ExportMap.js:401:30) code: 'MODULE_NOT_FOUND' }
Error: Cannot find module '<package>/packages/dapp/node_modules/date-fns/esm/differenceInCalendarDays/build/webpack.base.conf.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:668:15)
    at Function.Module._load (internal/modules/cjs/loader.js:591:27)
    at Module.require (internal/modules/cjs/loader.js:723:19)
    at require (<package>/node_modules/eslint/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.exports.resolve (<package>/node_modules/eslint-import-resolver-webpack/index.js:66:27)
    at v2 (<package>/node_modules/eslint-module-utils/resolve.js:94:23)
    at withResolver (<package>/node_modules/eslint-module-utils/resolve.js:99:16)
    at fullResolve (<package>/node_modules/eslint-module-utils/resolve.js:116:22)
    at Function.relative (<package>/node_modules/eslint-module-utils/resolve.js:61:10)
    at remotePath (<package>/node_modules/eslint-plugin-import/lib/ExportMap.js:401:30)

Problem still persists if I import the named function from the main package:

import { differenceInCalendarDays } from 'date-fns'

Webpack build works normally as expected.

ljharb commented 4 years ago

Your config is in config, but it’s pointed at build. If that’s correct, do you need to run your build process first?

hbarcelos commented 4 years ago

I'm sorry, I was typing by hand and got it wrong. The file is in the build directory. Fixed the description.

No, I don't need to run my build process before eslint.

ljharb commented 4 years ago

Can you include your webpack config? Something in it is silently adding the esm, for example, so it's possible that the "module" field is interfering somehow.

hbarcelos commented 4 years ago

My configuration file is quite large, don't want you to waste your time looking through it. I'll try to extract a subset of it and see if I can reproduce the error.

hbarcelos commented 4 years ago

Sorry for the delay, but I managed to create a minimal repo to reproduce the problem:

https://github.com/hbarcelos/webpack-resolver-issue

Steps to reproduce are in the README.