Skip to content

How do I use cheerio in react native? #1058

Closed
@Lizhooh

Description

@Lizhooh

I like the cheerio library. I want to use cheerio in react native, but it didn't work

import cio from 'cheerio';
Loading dependency graph, done.
error: bundling: UnableToResolveError: Unable to resolve module `events` from `G:\React-Native\test\node_modules\htmlparser2\lib\Parser.js`: Module dop or in these directories:

Activity

niocncn

niocncn commented on Jul 24, 2017

@niocncn

Same issue

vvo

vvo commented on Jul 25, 2017

@vvo

Can you try to:

npm install events

I know this seems counter intuitive, in Node.js this is available by default, maybe not in react native?

niocncn

niocncn commented on Jul 25, 2017

@niocncn

Not work for me, next error appear: Unable to resolve module 'stream' =((

vvo

vvo commented on Jul 25, 2017

@vvo

Seems like a recurrent issue in the react-native repository, ask the question here and provide a reproduction repository. This is not specific to cheerio.

Lizhooh

Lizhooh commented on Jul 25, 2017

@Lizhooh
Author

I found the problem.
htmlparser2 useing nodejs API.
cause to be unable to work on react native.

fb55/htmlparser2#199
https://github.com/oyyd/htmlparser2-without-node-native

niocncn

niocncn commented on Jul 27, 2017

@niocncn

after installing 'react-native-fence-html' problem disappear, it seems to me it includes all required dependencies )

Lizhooh

Lizhooh commented on Jul 27, 2017

@Lizhooh
Author

@niocncn One of the libraries helped me, look https://github.com/oyyd/cheerio-without-node-native

No errors, can correctly parse.

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import cio from 'cheerio-without-node-native';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.$ = cio.load('<p class="hello" style="color: red">Hello world</p>');
    }
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>{this.$('.hello').text()}</Text>
                <Text style={styles.text}>{this.$('.hello').attr('style')}</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    text: {
        fontSize: 30
    }
});
fb55

fb55 commented on Jul 28, 2017

@fb55
Member

You can install the missing packages from npm (events, stream and utils afaict) and they will be automatically picked up.

I would not recommend the usage of a fork as it will make it difficult to track down issues and will delay, if not prevent, patches for bugs.

ghost

ghost commented on Jul 29, 2017

@ghost

What about net and url that are required by tough-cookie?

dantman

dantman commented on Sep 9, 2017

@dantman

@fb55 The hack of requiring stream (a 2 year old abandoned hack) doesn't work with the new parse5 dependency in 1.0.0-rc.2.

Noitidart

Noitidart commented on Sep 1, 2018

@Noitidart

Thanks very much for this topic. I had the same issue it was great to see solution right away on search.

czy0729

czy0729 commented on Jun 30, 2019

@czy0729

@Lizhooh 世界上最远的距离就是我不知道轮子的存在

2 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @dantman@vvo@fb55@niocncn@LeoAso

        Issue actions

          How do I use `cheerio` in `react native`? · Issue #1058 · cheeriojs/cheerio