webpack doesn't resolve relative to resolve.root

[seekshiva]

webpack lets us define a value for resolve.root, and we can import modules relative to the root directly.

Eg:

File: webpack.config.js

resolve: {
  root: path.resolve('./jsx')
}

File: /jsx/components/Button.jsx

import React, { Component } from 'react'
export default class Button extends Component {
  render() {
    return <button {...this.props} />
  }
}

File: /jsx/Some/Deep/Nested/Dir/Component.jsx

import '../../../../components/Button'

can be written as

File: /jsx/Some/Deep/Nested/Dir/Component.jsx

import 'components/Button'

---

Since webpack config has defined a value for resolve.root, I can directly import from 'components/Button' rather than from '../../../../components/Button'. This syntax is super helpful when dealing with deep nested directory structures. It would be great if the webpack resolver package could support it.

Thanks!

[benmosher]

This situation is actually why I wrote the Webpack resolver. It works for me.

Can you provide more details about what exactly isn't working? Or a toy test case that fails? Some info that might be helpful:

• Webpack config file location
• your eslintrc
• the CWD where you ran ESLint from
• the exact error you got that you didn't expect (or the error you didn't get that you did expect)

(BTW: if you're using Sublime, see the end of the README.)

[benmosher]

For reference, here are the existing resolve.root tests: https://github.com/benmosher/eslint-plugin-import/blob/master/resolvers/webpack/test/root.js

If you could write a failing test, that would be fantastic. 😄

[benmosher]

closing for now, if you can provide a failing test case we can reopen?

[chyzwar]

ok, I have similar problem,

First I tried to add in .eslintrc

    "settings": {
      "import/resolver": {
        "webpack": {
          "config": "./scripts/configs/serverDev.js"
        }
      }
    },

and in my serverDev.js I have:

resolve: {
    extensions: ['', '.js', '.jsx'],
    root: path.join(__dirname, '../../src'),
  },

Since first approach was still producing lint errors I tried:

    "settings": {
      "resolve.root": "src"
    },

In both cases I get "Unable to resolve path to module"
https://github.com/Chyzwar/eslint-test

I made this repo to illustrate problem. linting src/test2/index shoudl not produce error since src is root

[benmosher]

Thanks for the test repo, will make identifying the issue a lot simpler. I'll take a look!

[ravasthi]

I'm also seeing this problem. Details from my setup follow, in case they help.

From .eslintrc.json:

  "plugins": [
    "babel",
    "import",
    "react"
  ],
  "settings" : {
    "import/resolver": {
      "webpack": {
        "config": "webpack.config.js"
      }
    }
  },

Then webpack.config.js, as well as karma.conf.js have this:

    resolve: {
        root: [
            path.resolve(__dirname),
        ],
        alias: {
            charts: 'public/charts',
            components: 'public/components',
            jquery: 'jquery/dist/jquery.slim',
            uikit: 'uikit/js/uikit',
        },
        modulesDirectories: [
            'bower_components',
            'node_modules',
            'web_modules',
        ],
    },

This enables me in my tests to do something like this:

import PrimaryNavigation from 'components/common/PrimaryNavigation';

The tests run properly, which suggests that the webpack config is correct.

Please let me know if there is any other information I can provide to help.

Thanks!

[benmosher]

@chyzwar what is compiling your webpack.js?

If the config is set to exports.default, that might explain why it isn't working. If you're using Babel 5, it might be fine. Not obvious to me from the package, though.

@ravasthi; can you paste your full Webpack config in a gist and link it? I'm curious if something similar is going on.

[ravasthi]

@benmosher Here's a gist with my .eslintrc.json, webpack.config.js, as well as an abbreviated package.json with versions of all the applicable libraries.

[moduval]

I have the same bug. Here is a gist of my webpack.config.js:
https://gist.github.com/moduv5/a58c27756a04724529867c4098c28f4e

[ravasthi]

@moduv5, following @benmosher's comment on my Gist—which I tried and had work—you'll have to do a single module.exports assignment to export your webpack config. ES6 default and custom export structures won't work because, presumably, the import resolver is looking for yourConfig.resolve.root or yourConfig.resolve.alias. So in your case I think you might want to split out your server and client configs into two files, with, e.g., module.exports = clientConfig at the end.

[ravasthi]

Also, @benmosher, it looks like this issue can be solved by updating the documentation with an ES6 example containing the explicit module.exports assignment at the end? I'd be happy to take a crack at this if you like.

[chyzwar]

I am using babel-node, I try will change syntax in webpack.js to es5.

2016-05-03 2:08 GMT+01:00 Richa Avasthi [email protected]:

@benmosher https://github.com/benmosher Here's a gist
https://gist.github.com/ravasthi/abcfee465411fc45a8bc28decb9d8e5e with
my .eslintrc.json, webpack.config.js, as well as an abbreviated
package.json with versions of all the applicable libraries.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#238 (comment)

[ravasthi]

I don't think you have to change the syntax of the whole file; just change the export line to be the ES5 style.

Richa

On May 3, 2016, at 11:37 PM, Marcin K [email protected] wrote:

I am using babel-node, I try will change syntax in webpack.js to es5.

2016-05-03 2:08 GMT+01:00 Richa Avasthi [email protected]:

@benmosher https://github.com/benmosher Here's a gist
https://gist.github.com/ravasthi/abcfee465411fc45a8bc28decb9d8e5e with
my .eslintrc.json, webpack.config.js, as well as an abbreviated
package.json with versions of all the applicable libraries.

―
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#238 (comment)

―
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub

[tmax898]

@ravasthi I've reviewed your gist and the suggestions following it, but still no dice. Here's my gist: https://gist.github.com/tmax898/2dcc6b3d51dec76f80a604b607be88c0

I have /public/js in my root, so i would expect to be able to reference files from there on. Thanks in advanced for the help.

[ravasthi]

@tmax898 here are a few things I noticed (bear with me, I'm not a webpack expert):

• I don't think you need path.resolve('./node_modules') under resolve.root, since resolve.modulesDirectories already includes node_modules by default.
• I just proved the following through experimentation:
  • In order for the eslint webpack resolver to work properly, you must have a resolve.root entry.
  • Anything in resolve.alias is resolved with respect to resolve.root (if the latter is present), so you should remove the public/js part of your alias. I think as it is, the components alias has webpack looking for things in public/js/public/js/components.
• Also keep in mind that if you set resolve.root to public/js, you may run into problems resolving imports in your tests, if they are not also children of public/js. In my case, I had tests under ./tests and components under ./public/components, so in order to make everything work when I run the server, run eslint, or run the tests, I had to set my resolve.root to path.resove(__dirname).

[benmosher]

@ravasthi very interesting. I didn't realize the resolver required resolve.root. Sounds like a bug!

[ravasthi]

@benmosher I probably shouldn't have said that so definitely, but I do know from my experimentation that if I took the resolve.root setting out, things stopped working with the rest of my setup. Previously I had just added resolve.alias, and that didn't work.

Richa

On May 7, 2016, at 11:12 AM, Ben Mosher [email protected] wrote:

@ravasthi very interesting. I didn't realize the resolver required resolve.root. Sounds like a bug!

―
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub

[chyzwar]

@ravasthi After changing export to commonjs style, plugin correctly pick up root. I think that plugin should check if it can read resolve part. At the moment plugin check only if file exists.

I want to use es modules only, How can I specify root in .eslintrc instead?

[tmax898]

@ravasthi i went through and followed alll your recommendations, but now webpack is not able to find any of the files by alias. I updated my gist if you want to review the syntax i used. I started by following your syntax very closely, but comparing it to the documentation from webpack, i'm am surprised your's builds. I'm not saying your wrong by any means. Just curious how you use your aliases in you code. Thanks again for your help.

[ravasthi]

@tmax898:

• I don't think test 2 or 3 could work at all, because I'm pretty sure that by adding the leading slash, you force webpack to think that the alias is for an absolute path, meaning webpack will be looking for a public folder at the root level of your hard drive and not resolving against resolve.root.
• I would expect test 1 to work, providing you don't overwrite the alias setting by putting the line containing test 2 in the same file.

Do you have a minimal project illustrating the problem?

As for how it works for me, my webpack config is exactly as in the gist I posted earlier, and I use aliases by doing, e.g.:

import PrimaryNavigation from 'components/common/PrimaryNavigation';

from tests/client/components/common/PrimaryNavigation.test.js, where components is an alias for public/components.

[benmosher]

I'm going to close this as the initial issue seems to be resolved. I will gladly review any improved documentation PRs you all would be up to submit. 😄

[gsabran]

What was the conclusion? I'm running into the same issue. My webpack config is (it's not used directly by webpack, but by a wrapper arounf webpack, and this might cause the issue)

// ./webpack.json
{
  "root": "src",
  "devServer": {
    "host": "localhost"
  }
}

and my sublime config is

{
    "folders": [
        {
            "path": "."
        }
    ],
  "SublimeLinter": {
    "linters":
    {
      "eslint":
      {
         "chdir": "${project}"
      }
    }
  }
}

I tried a mix of

"settings" : {
  "resolve.root": "src",
},

"settings" : {
  "import/resolver": {
      "resolve.root": "src",
    },
},

"settings" : {
  "import/resolver": {
      "webpack": {
        "config": "webpack.json",
      },
    },
},

but none worked

[benmosher]

@gsabran the config needs to have "root" as a subkey of "resolve", i.e.

{ "resolve": { "root": "src" } }

The Webpack resolver currently expects the config to match Webpack 1.x's format. See the Webpack docs for more details.

[tmax898]

@ravasthi @benmosher i forgot to thank you guys for the help and the solutions did work.