debugging: issues with webpack resolver

[pke]

While my webpack config works just fine, I am getting a lot of linter errors with the same config:

  resolve: {
    extensions: ["", ".js", ".jsx"],
    modulesDirectories: [
      VENDOR_DIR,
      SRC_DIR,
      path.join(__dirname, "node_modules"),
    ],
    alias: {
      vendor: VENDOR_DIR,
    },
  },

eslint prints erros for each of my files:

   1:19  error  Unable to resolve path to module 'react'                    import/no-unresolved
   2:24  error  Unable to resolve path to module 'inline-style-prefix-all'  import/no-unresolved
   7:18  error  Unable to resolve path to module 'components/Link'          import/no-unresolved
   8:30  error  Unable to resolve path to module 'styles/colors'            import/no-unresolved
  10:21  error  Unable to resolve path to module 'components/Divider'       import/no-unresolved
  11:17  error  Unable to resolve path to module 'components/Div'           import/no-unresolved

my .eslintrc looks like this:

settings:
  react:
    version: "0.14.8"
  import/resolver:
    webpack:
      config: "webpack.config.js"

But also import/resolver: webpack reports the same errors

[benmosher]

What version of Webpack + Webpack resolver are you using?

And where are they installed relative to each other?

[pke]

I am using
webpack 1.13.1
eslint-import-resolver-webpack 0.2.4
eslint 2.3.0

They are all installed in my apps node_modules folder, not globally.

[benmosher]

That is a fairly old version of the Webpack resolver. Can you try with v0.5.1?

[pke]

I have upgraded to 0.5.1 and it works from npm test now. I can verify its loading my webpack config since I do console output in it.
However it does not run well when used as preloader, also not in Atom.

module: {
    preLoaders: [
      {
        test: /\.jsx?$/,
        loader: "eslint",
        exclude: /node_modules/,
      },
    ],

[benmosher]

Ah, yes. eslint-loader has some known issues when running Webpack in watch mode. There is a create-react-app issue open to improve some of the dependency relationships between linted files that result from using certain rules from this plugin, which eslint-loader does not currently understand. (which is appropriate, most lint rules only depend on the linted file)

Does this capture what you mean by

does not run well when used as preLoader

?

And could you elaborate on

also not in Atom

?

[pke]

Hmm ok. So I guess I'd have to disable linting in preloader for now then?

In atom I get all the same entries underlined like the preloader dumps to the console.

[benmosher]

I'm not sure what the problem is. how are VENDOR_DIR and SRC_DIR defined?

[pke]

const VENDOR_DIR = path.join(__dirname, "products", process.env.APP_VENDOR)
const VENDOR_SRC_DIR = path.join(VENDOR_DIR, "src")
const DEFAULT_DIR = path.join(__dirname, "products", "default")

...

modulesDirectories: [
     VENDOR_DIR,
     DEFAULT_DIR,
     VENDOR_SRC_DIR,
     SRC_DIR,
     "node_modules",
 ],

[IanVS]

FYI: AtomLinter/linter-eslint#610 is the issue in the atom eslint plugin. I'm about to start using webpack on my project, so I might have a lot of motivation real soon to look into the problem. :)

[pke]

aha! Very good, a little motivation is always good:)

Eat your own dogfood(tm)

[tommiv]

I'm not sure if this is the same issue a mine, but if I use this webpack config entry

resolve: {
   modulesDirectories: ['node_modules', './src'],
 },

and this linter config

import/extensions:
    - error
    - always
    -
      js: never

and trying to import something like

import {mapToSearchParams} from 'tools/http';
OR
import {mapToSearchParams} from 'tools/http.js';

I'm getting an error in BOTH cases. http.js is located in src/tools/http.js. Is this related or I should create another ticket?

P.S. Screenshots are from Atom, but issue remains in CLI run.