carlrip / learnreact17withtypescript Goto Github PK

While working on the chapter 7 about connecting Store to ProductsPage, I encountered this strange behavior. The compiling works fine without issue and the pages loads correctly, then about a second later, it shows the message below. Not quite sure what what happened. Seems like an asynchronous issue. Any help would be really appreciated.

Thanks.

×
←→1 of 2 errors on the page
Error: Actions must be plain objects. Use custom middleware for async actions.
▶ 2 stack frames were collapsed.
getProducts
src/ProductsPage.tsx:62
59 |
60 | const mapDispatchToProps = (dispatch: any) => {
61 | return {

62 | getProducts: () => dispatch(getProducts())
63 | };
64 | }
65 |
View compiled
ProductsPage.componentDidMount
src/ProductsPage.tsx:18
15 | class ProductsPage extends React.Component {
16 |
17 | public componentDidMount() {
18 | this.props.getProducts();
19 | }
20 |
21 | public render() {
View compiled
▶ 13 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

See this article: remix-run/react-router#5707

Breaking change in React 16. The example from the book works at first but then throws this error: "Warning: A history supports only one prompt at a time".

Project still works but this might confuse people as to why the prompt suddenly stopped working.

Hi,
I am reading this book with Chapter 6. I got type error: (below)
Type error: Type '{}' is not assignable to type 'P'. TS2322

15 |     </div>
16 |   ) : (

17 | <Component {...props} />
| ^
18 | );
19 | export default withLoader;

No sure what is going on.

Thanks for help!

Hi, I'm in Ch.3, I got some errors and fixed it by myself.
Let me share my solution for other readers.

Error 1:

When I ran npm start first time, following error was occurred.

TypeScript error in /Users/shnjtk/reactts3/chapter03/my-components/src/App.tsx(1,19):
Could not find a declaration file for module 'react'. '/Users/shnjtk/reactts3/chapter03/my-components/node_modules/react/index.js' implicitly has an 'any' type.
  If the 'react' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react`  TS7016

  > 1 | import React from "react";
      |                   ^
    2 | import logo from "./logo.svg";
    3 | import "./App.css";
    4 | 

Solution

I added "noImplicitAny": false to compilerOptions in tsconfig.json.
But I know it's just suppressing the error.
Please tell me If anyone knows better solution.

Error 2:

Then, I tried npm start again and got following error.

/Users/shnjtk/reactts3/chapter03/my-components/src/serviceWorker.ts
TypeScript error in /Users/shnjtk/reactts3/chapter03/my-components/src/serviceWorker.ts(29,7):
Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i @types/node`.  TS2580

    27 | 
    28 | export function register(config?: Config) {
  > 29 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
       |       ^
    30 |     // The URL constructor is available in all browsers that support SW.
    31 |     const publicUrl = new URL(
    32 |       (process as { env: { [key: string]: string } }).env.PUBLIC_URL,

Solution

I added "types": ["node"] to compilerOptions in tsconfig.json.

Error 3:

After that, npm start shows following error.

undefined
TypeScript error in undefined(undefined,undefined):
Cannot find type definition file for 'node'.  TS2688

Solution

Just do following.

$ npm install @types/node

That's it.

I hope this helps other readers.
And thanks for writing this book @carlrip, I'm having fun reading!

Hi, I'm reading your book on MAPT (Packtpub) and found an error:

there is a extra colon (,) on the rules option:

  "rules": {
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "no-debugger": false,
    "no-console": false,
  },

need to be:

  "rules": {
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "no-debugger": false,
    "no-console": false
  },

sorry if here don't is the right place for this.

Starting the development server...

/Users/larry/samples-react/LearnReact17WithTypeScript/03-GettingStartedWithReactAndTypeScript/02-ConfirmComponent/node_modules/chokidar/lib/fsevents-handler.js:28
return (new fsevents(path)).on('fsevent', callback).start();
^

TypeError: fsevents is not a constructor
at createFSEventsInstance (/Users/larry/samples-react/LearnReact17WithTypeScript/03-GettingStartedWithReactAndTypeScript/02-ConfirmComponent/node_modules/chokidar/lib/fsevents-handler.js:28:11)
at setFSEventsListener (/Users/larry/samples-react/LearnReact17WithTypeScript/03-GettingStartedWithReactAndTypeScript/02-ConfirmComponent/node_modules/chokidar/lib/fsevents-handler.js:82:16)
at FSWatcher.FsEventsHandler._watchWithFsEvents (/Users/larry/samples-react/LearnReact17WithTypeScript/03-GettingStartedWithReactAndTypeScript/02-ConfirmComponent/node_modules/chokidar/lib/fsevents-handler.js:252:16)
at FSWatcher. (/Users/larry/samples-react/LearnReact17WithTypeScript/03-GettingStartedWithReactAndTypeScript/02-ConfirmComponent/node_modules/chokidar/lib/fsevents-handler.js:386:25)
at LOOP (fs.js:1902:14)
at processTicksAndRejections (internal/process/task_queues.js:77:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.

in chapter 7, I set default type like this

Form.Field.defaultProps = {
    type: 'Text'
};

but ,have no effect