Cheerio: How do I use `cheerio` in `react native`?

[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:

[niocncn]

Same issue

[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]

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

[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]

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

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

[niocncn]

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

[Lizhooh]

@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]

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.

[mhsjlw]

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

[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]

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

[czy0729]

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

[vnadai]

try:
npm install react-native-cheerio

[LeoAso]

You can install react-native-cheerio but pretend that it's cheerio.

yarn add cheerio@npm:react-native-cheerio && yarn add --dev @types/cheerio

If you are using NPM instead of Yarn, I think newer versions of NPM also support this.