How to use it?

[grundmanise]

Hi, thanks for this plugin.

But how can I use it?

Consider this project setup:

//package.json
{
  "name": "src",
   ...
}

//eslintrc.js
module.exports = {
  'settings': {
    'import/resolver': 'reactnative',
  },
  ...
}

and for example importing (Project/src/foo/foo.js) like this import Foo from 'src/foo/foo;` -> gives me the following error:

'Unable to resolve path to module 'src/foo/foo'. (import/no-unresolved)'

[guzart]

Hi @grundmanise,

That configuration should be working, it might just be a typo on your comment, but does your eslintrc file starts with a dot ".", e.g. .eslintrc.js

[guzart]

While reviewing your configuration, I think I found the issue. The way to use import files from the path is using the following pattern {packageName}/{pathToFile}.

Since your project name (package.json name) is src, the path to a file located in Project/src/foo/bar.js, will be src/src/foo/bar.js.

I completely forgot about that logic in the plugin, I'll update the Readme immediately, thank you for bringing that to my attention.

[grundmanise]

Hi @guzart ,

Yes, it starts with the dot as per http://eslint.org/docs/user-guide/configuring#configuration-file-formats.

Very strange.. but today 'Unable to resolve path to module 'src/foo/foo'. (import/no-unresolved)' message disappeared. Hope it won't appear anymore 😆 .

Thanks.

[grundmanise]

Oh, I've confused you, sorry.
The //package.json is located inside <rootDir>/src folder. I've got another one in the root dir.
I am following this solution: https://medium.com/@davidjwoody/how-to-use-absolute-paths-in-react-native-6b06ae3f65d1. So I have 2 package.json: fake - in <rootDir>/src and regular in the root dir.

[guzart]

Oh! that's a really neat trick, I am totally going to start using it.

Just by reading at the source code (of this plugin) I couldn't find any reason why it shouldn't be working 🤷‍♂️.

Let me know if you get this error again.

[simonbuerger]

@guzart Thanks for the plugin! We're using a lot of different package.json files in a lot of directories with different names throughout our app.

eg.

import React, { Component } from 'react'
import { View, Image, StyleSheet, TouchableOpacity, StatusBar, ScrollView } from 'react-native'
import { PRIMARY_WHITE } from '@theme/colours'
import adjustSize from '@lib/adjustSize'

Where @theme and @lib are directories with package.json files in them with those names (the @ is just a stylistic differentiation to prevent clashes with real packages).

Anyway, trying to add eslint and came across your plugin and it works for root directory imports, but not the other (eg. @theme and @lib ) directories. Any help would be appreciated.

[gusgard]

@simonbuerger nice approach

add this rules to .eslintrc.js

"import/extensions": [2, "never"],
"import/no-unresolved": [2, { ignore: ['@'] }],
"import/no-extraneous-dependencies": ["error", {"packageDir": './'}]

BTW: @guzart thanks for the plugin, is awesome :)

[guzart]

Thanks guys!

@gusgard That's a good stopgap solution, thank you!

I've been pretty busy at work, but I promised myself I would take a deep dive into this issue tomorrow.

@simonbuerger I wonder if this could be a clash with npm's scoped packages naming convention.
Could you try it out without the @ symbol? Thx.

[lucasmotta]

Hey @simonbuerger - we have been doing the exact same thing for a current project and we could not get this plugin to work as well. Did you find a solution in the end?

Btw, I tried removing the @ to see if it could be a problem with npm scoped packages, but it does not seem to make a difference.

[simonbuerger]

@lucasmotta sorry, no. I just switched off the no-unresolved rule :(

The unfortunate fact is that the react-native packagers (metro bundler) behaviour in this regard is not standards compliant or consistent with how any other module bundlers work. So the node resolver this plugin utilises simply won't work. An eslint plugin that uses metros own resolver would be required. See https://github.com/facebook/metro/blob/master/packages/metro-resolver/src/resolve.js

[lakhman]

I also tried this plugin hoping to resolve files in my src/components directory.
I have 2 package.json's - a root one and one inside a src directory for easy import.
I've uninstalled the plugin for now and switched off the no-unresolved rule (hopefully temporarily), i'll retry if anyone can find a fix for ESLint.

Great plugin, very well needed, hopefully the owner can fix this bug.

👍