reactjs 无法解析模块@chatscope/chat-ui-kit-styles/dist/default/styles.min.css

我正在尝试将ChatGPT放入我的react原生应用程序中，该应用程序的更多信息：

System:
    OS: macOS High Sierra 10.13.6
    CPU: (2) x64 Intel(R) Core(TM)2 Duo CPU     P8600  @ 2.40GHz
    Memory: 22.93 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 16.17.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.15.0 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7935034
    Xcode: 10.1/10B61 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.18 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.68.2 => 0.68.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

错误的详细信息：

Error: Unable to resolve module @chatscope/chat-ui-kit-styles/dist/default/styles.min.css from /Users/milan/Dev/cogit/App.js: @chatscope/chat-ui-kit-styles/dist/default/styles.min.css could not be found within the project or in these directories:
  node_modules
  11 | import {NavigationContainer} from '@react-navigation/native';
  12 | import {createNativeStackNavigator} from '@react-navigation/native-stack';
> 13 | import styles from '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
     |                     ^
  14 | import { MainContainer, ChatContainer, MessageList, Message, MessageInput } from '@chatscope/chat-ui-kit-react';
  15 |
  16 | import GetStarted from "./src/components/GetStarted.js"
    at ModuleResolver.resolveDependency (/Users/milan/Dev/cogit/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:158:15)
    at DependencyGraph.resolveDependency (/Users/milan/Dev/cogit/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at Object.resolve (/Users/milan/Dev/cogit/node_modules/metro/src/lib/transformHelpers.js:129:24)
    at resolve (/Users/milan/Dev/cogit/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
    at /Users/milan/Dev/cogit/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26
    at Array.reduce (<anonymous>)
    at resolveDependencies (/Users/milan/Dev/cogit/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33)
    at processModule (/Users/milan/Dev/cogit/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31)
    at async traverseDependenciesForSingleFile (/Users/milan/Dev/cogit/node_modules/metro/src/DeltaBundler/traverseDependencies.js:131:3)
    at async traverseDependencies (/Users/milan/Dev/cogit/node_modules/metro/src/DeltaBundler/traverseDependencies.js:60:7)
    at async DeltaCalculator._getChangedDependencies (/Users/milan/Dev/cogit/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:204:42)
    at async DeltaCalculator.getDelta (/Users/milan/Dev/cogit/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:94:16)
    at async DeltaBundler.getDelta (/Users/milan/Dev/cogit/node_modules/metro/src/DeltaBundler.js:68:12)
    at async IncrementalBundler.updateGraph (/Users/milan/Dev/cogit/node_modules/metro/src/IncrementalBundler.js:227:19)
    at async HmrServer._prepareMessage (/Users/milan/Dev/cogit/node_modules/metro/src/HmrServer.js:289:35)
    at async HmrServer._handleFileChange (/Users/milan/Dev/cogit/node_modules/metro/src/HmrServer.js:260:21)
    at async execute (/Users/milan/Dev/cogit/node_modules/metro/src/lib/debounceAsyncQueue.js:23:17)
    at async Timeout._onTimeout (/Users/milan/Dev/cogit/node_modules/metro/src/lib/debounceAsyncQueue.js:45:11)

与此同时，我已经寻找了文件styles.min.css，它就在那里。
来人啊！
要无错误运行，我应该做什么

您似乎正在尝试从React Native应用中的@chatscope/chat-ui-kit-styles包导入CSS文件。但是，React Native不支持直接导入CSS文件。
要在React Native应用中使用@chatscope/chat-ui-kit-styles包，您应导入包含样式的JavaScript文件，并直接在组件中使用它们。例如：

import { defaultStyles } from '@chatscope/chat-ui-kit-styles/dist/default';

// Use the styles in your component
const styles = {
  container: {
    ...defaultStyles.container,
    backgroundColor: '#FFFFFF'
  },
  // more styles here
};

也可以使用react-native包中的StyleSheet.create()方法创建样式：

import { StyleSheet } from 'react-native';
import { defaultStyles } from '@chatscope/chat-ui-kit-styles/dist/default';

const styles = StyleSheet.create({
  container: {
    ...defaultStyles.container,
    backgroundColor: '#FFFFFF'
  },
  // more styles here
});

确保删除导入CSS文件的行，并使用JavaScript对象。
如果仍然遇到错误，请尝试运行npm instal或yarn install，以确保所有程序包都已正确安装。此外，请检查正在使用的@chatscope/chat-ui-kit-styles版本是否与已安装的react-native版本兼容。

reactjs 无法解析模块@chatscope/chat-ui-kit-styles/dist/default/styles.min.css

1条答案

相关问题

热门标签

最新问答