React Native - 无法在前端导入猫鼬(但它可以从后端工作)

Posted

技术标签:

【中文标题】React Native - 无法在前端导入猫鼬(但它可以从后端工作)【英文标题】:React Native - can't import mongoose on the front end(but it works from the backend) 【发布时间】:2018-06-11 17:42:57 【问题描述】:

我不能在前端导入猫鼬,但它在后端可以工作。

我有一个单独的后端目录。我有一些代码可以将几个用户添加到我的数据库中。在这里.....

import mongoose from 'mongoose';
import User from './models/user';

const users = [
  
    id: 1,
    username: 'Matthew',
    password: 'Smith',
  ,
  
    id: 2,
    username: 'Deborah',
    password: 'Smith',
  ,

];

// Connect to MongoDB
mongoose.connect('mongodb://localhost/users');

// Go through each movie
users.map(data => 
  // Initialize a model with movie data
  const user = new User(data);
  // and save it into the database
  user.save();
);

上面的代码有效。

现在我希望我的登录屏幕接受用户名和密码并将其发送到数据库。我被卡住了,因为我什至不能导入猫鼬(你会在下面看到我把它注释掉了)。

我得到的错误是: 'TransformError: [我的项目的目录路径]/node_modules/mongoose/lib/drivers/index.js: require() 必须有一个字符串文字参数:[我的项目的目录路径]/mongoose/lib/drivers/index. js:7'

登录界面代码:

import React from 'react';
import  StyleSheet, Text, View,Navigator,TextInput, KeyboardAvoidingView,TouchableOpacity,
AsyncStorage,
  from 'react-native';


//import mongoose from 'mongoose';



import 
  StackNavigator,
 from 'react-navigation';



export default class Login extends React.Component 


    //check to see if user has logged in already
    componentDidMount()
        this._loadInitialState().done();
    

    //get info from async storage
    _loadInitialState = async () => 
        var value = await  AsyncStorage.getItem('user');

        if(value != null)   //if the user is already logged in
            this.props.navigation.navigate('Profile');      //**profile page that we will create later
        
    

    constructor(props)
        super(props);
        this.state = 
            username: '',
            password: '',
        
    

  render() 
    return (
      //<View style=styles.container>

        <KeyboardAvoidingView behavior = 'padding' style = styles.wrapper>
            <View style = styles.container>
                <Text style=styles.header> - LOGIN - </Text>
                <TextInput
                    style=styles.textInput placeholder='Username'
                    onChangeText=(username) => this.setState(username)
                />
                <TextInput
                    style=styles.textInput placeholder='Password'
                    onChangeText=(password) => this.setState(password)
                />
            </View>


            <TouchableOpacity
                style=styles.btn
                onPress = this.login>
                <Text>Log in</Text>
            </TouchableOpacity>

        </KeyboardAvoidingView>


     // </View>
    );
  

  login = () => 
      alert('test');

      //send to server
      fetch('http://1.1.1.1/3000/users', 
          method: 'POST',
          headers: 
              'Accept': 'application/json',
              'Content-Type': 'application/json',
          ,
          body: JSON.stringify(
              username: this.state.username,
              password: this.state.password,
          )
      )

      //handle response
      .then((response) => response.json())
      .then((res) => 

            //if user and pass exists, then log them in
            // res: result
            if(res.sucess === true)
                AysncStorage.setItem('user',res.user);
                this.props.navigation.navigate('Profile'); //navigate user to profile page
            
            //else, tell the user they dont exist in the database
            else
                alert(res.message);
            
      )
      .done();
  




const styles = StyleSheet.create(

    wrapper: 
      flex: 1,
    ,

  container: 
    flex: 1,
    backgroundColor: '#2896d3',
    alignItems: 'center',
    justifyContent: 'center',
    paddingLeft: 40,
    paddingRight: 40,
  ,

  header: 
    fontSize: 24,
    marginBottom: 60,
    color: '#fff',
    justifyContent: 'center',
    paddingLeft: 40,
    paddingRight: 40,
  ,

  textInput: 
    alignSelf: 'stretch',
    paddingLeft: 16,
    marginBottom: 20,
    backgroundColor: '#fff',
  ,

  btn: 
      alignSelf: 'stretch',
      padding: 20,
      marginBottom: 20,
      backgroundColor: '#01c853',
      alignItems: 'center',
  ,
);

为什么我不能导入?

【问题讨论】:

您的前端没有运行 Node,而是在浏览器中运行。 Mongoose 不能在前端工作,因为它依赖于 Node 的功能,而浏览器 JS 实现中不存在这些功能。您不能将 Mongoose 导入前端代码。 这是不正确的,但被广泛使用。 Mongoose 带有一个内置的浏览器版本,您可以在其中公开。有关详细信息,请参阅下面的答案。 【参考方案1】:

Mongoose's browser library 不支持mongoose.connect()。它仅支持模式和文档验证,目前无法实际连接到 MongoDB 或保存文档。

【讨论】:

【参考方案2】:

就在今天,我在尝试为您解决类似问题时发现了 Mongoose's browser module。这是 Mongoose 的一个非常有限的版本,但可以让您对模式进行验证,例如,在前端。抱歉,我是在您发帖后 6 个月才发现这个的。

【讨论】:

以上是关于React Native - 无法在前端导入猫鼬(但它可以从后端工作)的主要内容,如果未能解决你的问题,请参考以下文章

当我尝试导入猫鼬模型时,Webpack 无法编译

React Native 导入错误:无法使用 .bin 解析模块(如何导入某种类型的文件?)

我在设置我的 jest 配置时遇到问题 react native 无法导入组件

无法使用 React Native Expo 导入 Firebase JS SDK

React Native 调试器无法导入捆绑脚本?

React-Native无法导入库