search

import-js / eslint-plugin-import

ESLint plugin with rules that help validate proper imports.
MIT License
5.48k stars 1.56k forks source link

"View not found in react-native" #1754

Open jchook opened 4 years ago

jchook commented 4 years ago

Some modules do not resolve with eslint-plugin-import that DO resolve in react-native.

See https://github.com/facebook/react-native/issues/28549

I noticed that this also happens with react-native-screens.

Unable to resolve path to module 'react-native-screens'.

When I look at node_modules/react-native/index.js, I can see some pretty "non-standard" commonJS exports, which I suspect could contribute to the issue, but otherwise I don't see why it would fail on these modules in particular.

module.exports = {
  // Components
  get AccessibilityInfo(): AccessibilityInfo {
    return require('./Libraries/Components/AccessibilityInfo/AccessibilityInfo');
  },
  get ActivityIndicator(): ActivityIndicator {
    return require('./Libraries/Components/ActivityIndicator/ActivityIndicator');
  },
  get Button(): Button {
    return require('./Libraries/Components/Button');
  },
...

For react-native-screens, it appears to use the (rarely used?) files directive in package.json.

Code that produces the false positive linter error:

import { enableScreens } from 'react-native-screens' // error
import { View } from 'react-native' // error
ljharb commented 4 years ago

Indeed, using a getter on module.exports is both slow and causes all sorts of subtle issues - and also makes any linter plugin unable to statically resolve imports.

I'd suggest filing issues on react-native to stop using dynamically loaded exports. I'm not sure how else any linter could support it (and notably, native ESM in node absolutely doesn't).