Webpacker: Upgrading from 1.0 to 1.2 caused a bunch of lint warnings

[RobinClowers]

We are using eslint with the eslint-import-resolver-webpack package, and everything was working great until we upgraded webpacker. After running webpacker:install to update the config files, we started getting lots of strange eslint warnings like this:

  1:1   error  Resolve error: Cannot read property 'host' of undefined                                           import/no-unresolved
  1:1   error  Resolve error: Cannot read property 'host' of undefined                                           import/no-extraneous-dependencies
  1:1   error  Resolve error: Cannot read property 'host' of undefined                                           import/no-duplicates
  1:1   error  Resolve error: Cannot read property 'host' of undefined                                           import/extensions
  1:1   error  Resolve error: Cannot read property 'host' of undefined                                           import/no-absolute-path
  1:1   error  Resolve error: Cannot read property 'host' of undefined                                           import/no-named-as-default
  1:1   error  Resolve error: Cannot read property 'host' of undefined                                           import/no-named-as-default-member
  2:1   error  'components' should be listed in the project's dependencies. Run 'npm i -S components' to add it  import/no-extraneous-dependencies

We eventually figured out that all these errors were caused by using absolute imports for files in our projects (e.g. import foo from 'components/foo'). My hunch is that this is related to the way the webpack config loads yaml files, but I'm not sure how to fix it.

[gauravtiwari]

@RobinClowers Seems like a configuration problem with eslint and not particularly related to Webpacker. You can ignore webpack folder in eslint config.

[RobinClowers]

@gauravtiwari you're right, it is an eslint configuration issue. I was able the work around this by not using absolute imports, but that was working fine before I upgraded webpacker. :man_shrugging:

[RobinClowers]

Also, ignoring the webpack config would not work, these errors were coming from code in app/javascript.

[gauravtiwari]

Cool, thanks for sharing 👍 Perhaps one of the dependencies got bumped up when you did upgrade earlier from 1.1 to 1.2.

[RobinClowers]

@gauravtiwari I had another chance to look at this, and it turns out the problem is that the generated webpack/configration.js assumes NODE_ENV is set, which isn't always the case. Would you accept a PR that defaults it to development?

[gauravtiwari]

@RobinClowers Are you running the server/compiler scripts through yarn instead of binstubs provided?

[RobinClowers]

Right, I'm running eslint through yarn, which seems like a pretty normal thing. eslint-import-resolver-webpack automatically invokes webpack, I don't know that I have control over how it does that.

[gauravtiwari]

@RobinClowers Could you try this please NODE_ENV=development yarn lint since this is special case?

[RobinClowers]

Indeed, that does fix my issue. Still, it doesn't seem like I should have to specify the env every time?

[gauravtiwari]

May be something like this would save some typing ;)

"scripts": {
  "lint": "NODE_ENV=development eslint app/javascript/packs"
}

Actually, I made this change in another PR, but that's still in review so lets keep it as is for now.

[RobinClowers]

You made the change to default the env? I just want to help other people avoid this sharp edge. Also, thanks for being so responsive on this issue. ❤️

[gauravtiwari]

Yepp, but that PR is a big change so, would probably take some time - https://github.com/rails/webpacker/pull/264/files#diff-9f42d25c3b13e34aaf7b3d5837bd3d39R4 👍 No worries ❤️