I did the following steps -
1.downloaded zip folder
2.npm install
3.npm run start
showing "Cannot find name 'Cheerio." in browser
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
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.
Most helpful comment
use ’yarn upgrade --latest‘ solve my problem @B-Tushar