import-js/eslint-plugin-import

Webpack resolver vs date-fns

Open

#1,511 opened on Oct 22, 2019

View on GitHub
 (5 comments) (0 reactions) (0 assignees)JavaScript (1,540 forks)batch import
help wanted

Repository metrics

Stars
 (4,946 stars)
PR merge metrics
 (Avg merge 138d 22h) (3 merged PRs in 30d)

Description

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.

Contributor guide