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 (4,946 stars) (1,540 forks)batch import
help wanted

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

Tech stack
javascriptnodejs
Domain
developer experience
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Understanding of JavaScript module resolutionFamiliarity with webpack configBasic knowledge of ESLint plugin architecture
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
The error indicates that the eslint import resolver webpack is incorrectly resolving the webpack config path as part of the module path for date fns. The issue likely lies in the resolver's resolve function, specifically how it handles the config file path. Investigate the code in index.js around line 66, and check if the resolver incorrectly appends the config path to the module request. Look at comments or linked issues for potential fixes or workarounds.