Typescript-react-starter: Cannot find name 'Cheerio'.

Created on 12 Dec 2017  Â·  12Comments  Â·  Source: microsoft/TypeScript-React-Starter

I did the following steps -

1.downloaded zip folder
2.npm install
3.npm run start

showing "Cannot find name 'Cheerio." in browser

Most helpful comment

use ’yarn upgrade --latest‘ solve my problem @B-Tushar

All 12 comments

I also cloned the repo, ran npm install ... that went ok, but once I ran npm run build...

Creating an optimized production build...
ts-loader: Using [email protected] and /Users/username/Desktop/react-ts/tsconfig.json
Failed to compile.

Error in /Users/username/Desktop/react-ts/node_modules/@types/enzyme/index.d.ts
(368,15): error TS2304: Cannot find name 'Cheerio'.

365 |     /**
366 |      * Renders the component to static markup and returns a Cheerio wrapper around the result.
367 |      */
368 |     render(): Cheerio;
-------------------^
369 |
370 |     /**
371 |      * Returns the type of the current node of this wrapper. If it's a composite component, this will be the
372 |      * component constructor. If it's native DOM node, it will be a string of the tag name.

Error in /Users/username/Desktop/react-ts/node_modules/@types/enzyme/index.d.ts
(640,69): error TS2304: Cannot find name 'Cheerio'.

637 |  * @param node
638 |  * @param [options]
639 |  */
640 | export function render<P, S>(<span class="hljs-params">node: ReactElement<P>, options?: any</span>): Cheerio;
-------------------------------------------------------------------------^
641 |
642 | // See https://github.com/airbnb/enzyme/blob/v3.1.0/packages/enzyme/src/EnzymeAdapter.js
643 | export class EnzymeAdapter {
644 | }

Error in /Users/username/Desktop/react-ts/node_modules/@types/enzyme/index.d.ts
(13,23): error TS2688: Cannot find type definition file for 'cheerio'.

10 | // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
11 | // TypeScript Version: 2.3
12 |
13 | /// <reference types="cheerio" />
---------------------------^
14 | import { ReactElement, Component, AllHTMLAttributes as ReactHTMLAttributes, SVGAttributes as ReactSVGAttributes } from "react";
15 |
16 | export type HTMLAttributes = ReactHTMLAttributes<{}> & ReactSVGAttributes<{}>;
17 |

Error in /Users/username/Desktop/react-ts/src/components/Hello.test.tsx
(5,1): error TS2304: Cannot find name 'it'.

2 | import * as enzyme from 'enzyme';
3 | import Hello from './Hello';
4 |
5 | it('renders the correct text when no enthusiasm level is given', <span class="hljs-function">() =></span> {
-----^
6 |   const hello = enzyme.shallow(<Hello name="Daniel" />);
7 |   expect(hello.find('.greeting').text()).toEqual('Hello Daniel!');
8 | });
9 |

Error in /Users/username/Desktop/react-ts/src/components/Hello.test.tsx
(7,3): error TS2304: Cannot find name 'expect'.

 4 |
 5 | it('renders the correct text when no enthusiasm level is given', <span class="hljs-function">() =></span> {
 6 |   const hello = enzyme.shallow(<Hello name="Daniel" />);
 7 |   expect(hello.find('.greeting').text()).toEqual('Hello Daniel!');
-------^
 8 | });
 9 |
10 | it('renders the correct text with an explicit enthusiasm of 1', <span class="hljs-function">() =></span> {
11 |   const hello = enzyme.shallow(<Hello name="Daniel" enthusiasmLevel={1}/>);

Error in /Users/username/Desktop/react-ts/src/components/Hello.test.tsx
(10,1): error TS2304: Cannot find name 'it'.

 7 |   expect(hello.find('.greeting').text()).toEqual('Hello Daniel!');
 8 | });
 9 |
10 | it('renders the correct text with an explicit enthusiasm of 1', <span class="hljs-function">() =></span> {
-----^
11 |   const hello = enzyme.shallow(<Hello name="Daniel" enthusiasmLevel={1}/>);
12 |   expect(hello.find('.greeting').text()).toEqual('Hello Daniel!');
13 | });
14 |

Error in /Users/username/Desktop/react-ts/src/components/Hello.test.tsx
(12,3): error TS2304: Cannot find name 'expect'.

 9 |
10 | it('renders the correct text with an explicit enthusiasm of 1', <span class="hljs-function">() =></span> {
11 |   const hello = enzyme.shallow(<Hello name="Daniel" enthusiasmLevel={1}/>);
12 |   expect(hello.find('.greeting').text()).toEqual('Hello Daniel!');
-------^
13 | });
14 |
15 | it('renders the correct text with an explicit enthusiasm level of 5', <span class="hljs-function">() =></span> {
16 |   const hello = enzyme.shallow(<Hello name="Daniel" enthusiasmLevel={5} />);

Error in /Users/username/Desktop/react-ts/src/components/Hello.test.tsx
(15,1): error TS2304: Cannot find name 'it'.

12 |   expect(hello.find('.greeting').text()).toEqual('Hello Daniel!');
13 | });
14 |
15 | it('renders the correct text with an explicit enthusiasm level of 5', <span class="hljs-function">() =></span> {
-----^
16 |   const hello = enzyme.shallow(<Hello name="Daniel" enthusiasmLevel={5} />);
17 |   expect(hello.find('.greeting').text()).toEqual('Hello Daniel!!!!!');
18 | });
19 |

Error in /Users/username/Desktop/react-ts/src/components/Hello.test.tsx
(17,3): error TS2304: Cannot find name 'expect'.

14 |
15 | it('renders the correct text with an explicit enthusiasm level of 5', <span class="hljs-function">() =></span> {
16 |   const hello = enzyme.shallow(<Hello name="Daniel" enthusiasmLevel={5} />);
17 |   expect(hello.find('.greeting').text()).toEqual('Hello Daniel!!!!!');
-------^
18 | });
19 |
20 | it('throws when the enthusiasm level is 0', <span class="hljs-function">() =></span> {
21 |   expect(<span class="hljs-function">() =></span> {

Error in /Users/username/Desktop/react-ts/src/components/Hello.test.tsx
(20,1): error TS2304: Cannot find name 'it'.

17 |   expect(hello.find('.greeting').text()).toEqual('Hello Daniel!!!!!');
18 | });
19 |
20 | it('throws when the enthusiasm level is 0', <span class="hljs-function">() =></span> {
-----^
21 |   expect(<span class="hljs-function">() =></span> {
22 |     enzyme.shallow(<Hello name="Daniel" enthusiasmLevel={0} />);
23 |   }).toThrow();
24 | });

Error in /Users/username/Desktop/react-ts/src/components/Hello.test.tsx
(21,3): error TS2304: Cannot find name 'expect'.

18 | });
19 |
20 | it('throws when the enthusiasm level is 0', <span class="hljs-function">() =></span> {
21 |   expect(<span class="hljs-function">() =></span> {
-------^
22 |     enzyme.shallow(<Hello name="Daniel" enthusiasmLevel={0} />);
23 |   }).toThrow();
24 | });
25 |

Error in /Users/username/Desktop/react-ts/src/components/Hello.test.tsx
(26,1): error TS2304: Cannot find name 'it'.

23 |   }).toThrow();
24 | });
25 |
26 | it('throws when the enthusiasm level is negative', <span class="hljs-function">() =></span> {
-----^
27 |   expect(<span class="hljs-function">() =></span> {
28 |     enzyme.shallow(<Hello name="Daniel" enthusiasmLevel={-1} />);
29 |   }).toThrow();
30 | });

Error in /Users/username/Desktop/react-ts/src/components/Hello.test.tsx
(27,3): error TS2304: Cannot find name 'expect'.

24 | });
25 |
26 | it('throws when the enthusiasm level is negative', <span class="hljs-function">() =></span> {
27 |   expect(<span class="hljs-function">() =></span> {
-------^
28 |     enzyme.shallow(<Hello name="Daniel" enthusiasmLevel={-1} />);
29 |   }).toThrow();
30 | });
31 |

Error in /Users/username/Desktop/react-ts/src/App.tsx
(5,14): error TS2304: Cannot find name 'require'.

2 | import './App.css';
3 | import Hello from './components/Hello';
4 |
5 | const logo = require('./logo.svg');
------------------^
6 |
7 | function App() {
8 |   return (
9 |     <div className="App">

Error in /Users/username/Desktop/react-ts/src/App.test.tsx
(5,1): error TS2304: Cannot find name 'it'.

2 | import * as ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', <span class="hljs-function">() =></span> {
-----^
6 |   const div = document.createElement('div');
7 |   ReactDOM.render(<App />, div);
8 | });
9 |

/Users/username/Desktop/react-ts/node_modules/react-scripts-ts/scripts/build.js:136
        const { line, character } = err.location;
                                       ^

TypeError: Cannot match against 'undefined' or 'null'.
    at errors.forEach.err (/Users/username/Desktop/react-ts/node_modules/react-scripts-ts/scripts/build.js:136:40)
    at Array.forEach (native)
    at printErrors (/Users/username/Desktop/react-ts/node_modules/react-scripts-ts/scripts/build.js:132:10)
    at webpack.run (/Users/username/Desktop/react-ts/node_modules/react-scripts-ts/scripts/build.js:176:7)
    at Compiler.<anonymous> (/Users/username/Desktop/react-ts/node_modules/webpack/lib/Compiler.js:194:14)
    at Compiler.emitRecords (/Users/username/Desktop/react-ts/node_modules/webpack/lib/Compiler.js:282:37)
    at Compiler.<anonymous> (/Users/username/Desktop/react-ts/node_modules/webpack/lib/Compiler.js:187:11)
    at /Users/username/Desktop/react-ts/node_modules/webpack/lib/Compiler.js:275:11
    at Compiler.applyPluginsAsync (/Users/username/Desktop/react-ts/node_modules/webpack/node_modules/tapable/lib/Tapable.js:60:69)
    at Compiler.afterEmit (/Users/username/Desktop/react-ts/node_modules/webpack/lib/Compiler.js:272:8)
    at Compiler.<anonymous> (/Users/username/Desktop/react-ts/node_modules/webpack/lib/Compiler.js:267:14)
    at /Users/username/Desktop/react-ts/node_modules/async/lib/async.js:52:16
    at done (/Users/username/Desktop/react-ts/node_modules/async/lib/async.js:246:17)
    at /Users/username/Desktop/react-ts/node_modules/async/lib/async.js:44:16
    at /Users/username/Desktop/react-ts/node_modules/graceful-fs/graceful-fs.js:43:10
    at FSReqWrap.oncomplete (fs.js:123:15)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts-ts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/username/.npm/_logs/2017-12-16T13_01_15_421Z-debug.log

Log file: log.txt

The project compiles fail

the console show:

Failed to compile.

Error in C:[email protected]
(368,15): error TS2304: Cannot find name 'Cheerio'.

Error in C:[email protected]
(640,69): error TS2304: Cannot find name 'Cheerio'.

Error in C:[email protected]
(13,23): error TS2688: Cannot find type definition file for 'cheerio'.

Error in C:UsersNoahDesktoprrsrccomponentsHello.test.tsx
(5,1): error TS2304: Cannot find name 'it'.

Error in C:UsersNoahDesktoprrsrccomponentsHello.test.tsx
(7,3): error TS2304: Cannot find name 'expect'.

Error in C:UsersNoahDesktoprrsrccomponentsHello.test.tsx
(10,1): error TS2304: Cannot find name 'it'.

Error in C:UsersNoahDesktoprrsrccomponentsHello.test.tsx
(12,3): error TS2304: Cannot find name 'expect'.

Error in C:UsersNoahDesktoprrsrccomponentsHello.test.tsx
(15,1): error TS2304: Cannot find name 'it'.

Error in C:UsersNoahDesktoprrsrccomponentsHello.test.tsx
(17,3): error TS2304: Cannot find name 'expect'.

Error in C:UsersNoahDesktoprrsrccomponentsHello.test.tsx
(20,1): error TS2304: Cannot find name 'it'.

Error in C:UsersNoahDesktoprrsrccomponentsHello.test.tsx
(21,3): error TS2304: Cannot find name 'expect'.

Error in C:UsersNoahDesktoprrsrccomponentsHello.test.tsx
(26,1): error TS2304: Cannot find name 'it'.

Error in C:UsersNoahDesktoprrsrccomponentsHello.test.tsx
(27,3): error TS2304: Cannot find name 'expect'.

Error in C:UsersNoahDesktoprrsrcApp.tsx
(5,14): error TS2304: Cannot find name 'require'.

Error in C:UsersNoahDesktoprrsrcApp.test.tsx
(5,1): error TS2304: Cannot find name 'it'.

Error in C:UsersNoahDesktoprrtsconfig.json
error TS2688: Cannot find type definition file for 'cheerio'.

Error in C:UsersNoahDesktoprrtsconfig.json
error TS2688: Cannot find type definition file for 'jest'.

Error in C:UsersNoahDesktoprrtsconfig.json
error TS2688: Cannot find type definition file for 'node'.

use ’yarn upgrade --latest‘ solve my problem @B-Tushar

I had the same issues , when i execute use ’yarn upgrade --latest‘ solve my problem

run:

yarn upgrade --latest

:tada:

Ran into same error. I'm not using yarn but npm.

Same problem with npm & yarn upgraded.

@linuxonrails have just run into this in another project and doing npm i -D @types/cheerio got rid of this error for me. Not ideal but a workaround nonetheless for me, hope it works for you.

Well, there's a reason for npm shrinkwrap! I got this working by looking at the time of the most recent major update (11 months ago) and then syncing to hard versions of all the dependencies in my package.json. I started by removing the ^ prefix to version numbers, then manually tweaked a few, and kept trying to build (with different errors). Eventually this worked, but I'm not sure exactly what was required as I wasn't being scientific. I completely wiped my dir and re-cloned each time to make sure I didn't have dirty npm-packages.

If you've had TypeScript since version 1.0, it put an entry in your path env variable, so remove it and run npm install -g [email protected] to globally replace it.

{
"name": "react-typescript-tutorial",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-addons-test-utils": "15.4.2",
"react-scripts-ts": "1.0.6"
},
"dependencies": {
"@types/enzyme": "2.7.1",
"@types/jest": "18.1.1",
"@types/node": "7.0.5",
"@types/react": "15.6.2",
"@types/react-dom": "^0.14.22",
"@types/react-redux": "^4.4.36",
"enzyme": "2.7.1",
"react": "15.6.2",
"react-dom": "15.4.2",
"react-redux": "5.0.2",
"redux": "3.6.0",
"typescript": "2.3.4"
},
"scripts": {
"start": "react-scripts-ts start",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject"
}
}

I added below types in devDependencies and its worked

"@types/cheerio": "^0.22.10",
"@types/enzyme": "^2.8.12",
"@types/jest": "^18.1.1",
"@types/node": "^7.10.2",
"@types/react-redux": "^4.4.47"

This is annoying. It's 2019 and this still hasn't been fixed out of the box.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

wilomgfx picture wilomgfx  Â·  6Comments

nikhilyeole1 picture nikhilyeole1  Â·  9Comments

haani104 picture haani104  Â·  5Comments

JukoPowel picture JukoPowel  Â·  3Comments

Yang09701194 picture Yang09701194  Â·  7Comments