Не удается найти модуль React при добавлении локальной зависимости npm

#reactjs #react-native

#reactjs #react-native

Вопрос:

Мой локальный пользовательский модуль внутри node_modules не имеет доступа к react пакету, который есть у его родителя.

У меня есть следующий код:

 // SomeComponent.js
import React, { Component } from 'react'
import {
  View
} from 'react-native'
import CustomComponent from 'react-native-my-super-components'

export default SomeComponent extends Component {
  render() {
    return (
      <View>
        <CustomComponent />
      </View>
    )
  }
}
  

У меня есть каталог, который был npm link отредактирован и вызывается react-native-my-super-components .

 // index.js of 'react-native-my-super-components'
import React, { Component } from 'react'
import {
  Text,
  View,
} from 'react-native'

export default SomeComponent extends Component {
  render() {
    return (
      <View>
        <Text>SomeComponent</Text>
      </View>
    )
  }
}
  

Я вызвал npm link react-native-my-super-component в своем проекте, содержащем SomeComponent.js .

Это package.json выглядит следующим образом:

 {
  "name": "react-native-my-super-component",
  "version": "0.0.1",
  "description": "My Super Component",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" amp;amp; exit 1"
  },
  "author": "Naoto Ida",
  "license": "MIT",
  "peerDependencies": {
    "react": ">=15.3.2",
    "react-native": ">=0.35.0"
  }
}
  

Я не вижу никаких различий по сравнению с другими node_modules . Что может быть причиной этого?

Ответ №1:

При разрешении react из react-native-my-super-component node будет выполнять поиск в node_modules из react-native-my-super-component папки или у react-native-my-super-component родителей.

Вы не можете заставить систему разрешения модулей работать таким же образом при использовании npm link .

Таким образом, вы можете:

  • установите требуемую отсутствующую зависимость как ‘dev dependency’ в react-native-my-super-component папку
  • для React, который должен быть синглтоном, вы должны создать псевдоним в вашем конфигурационном файле webpack, чтобы разрешить ‘react’ из каждого связанного модуля одинаково.

например, в вашем конфигурационном файле webpack добавьте в режиме разработки:

     {
        resolve: {
            alias: [
                'react': path.join(process.cwd(), 'node_modules/react')
            ]
        }
    }
  

Для этого решения требуется ‘path’ модуля для создания абсолютного пути к вашему модулю react: ( import path from 'path'; ) но в вы можете сначала попробовать статический путь.

Комментарии:

1. Спасибо за ответ. Итак, если я могу отправить свой react-native-my-super-component в удаленное репозиторий, должен ли я просто сделать это и npm install ? Я уже использовал webpack раньше для переноса с ES6 на старый JS, но не так часто с такого рода проектами.

2. ДА. Используйте npm link , чтобы иметь возможность работать с вашим основным проектом react-native-my-super-component , когда в нем запущен собственный процесс разработки. Затем в prod или при react-native-my-super-component отправке в удаленное репозиторий просто используйте npm install react-native-my-super-component .