carlrip / learnreact17withtypescript Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
in chapter 7, I set default type like this
Form.Field.defaultProps = {
type: 'Text'
};
but ,have no effect
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.
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 |
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.
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,
I added "types": ["node"]
to compilerOptions
in tsconfig.json
.
After that, npm start
shows following error.
undefined
TypeScript error in undefined(undefined,undefined):
Cannot find type definition file for 'node'. TS2688
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!
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.