A ready to use boilerplate for starting big react projects
License: MIT License
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Interface 'Element' cannot simultaneously extend types 'ReactElement' and 'ReactElement'.
Named property 'type' of types 'ReactElement' and 'ReactElement' are not identical.
Module not found: Can't resolve 'material-ui/Reboot' in '/home/lucas/app/create-react-app-material-typescript-redux/src'
Hi there,
Thanks for your great app example and I am trying to build my app base on it.
Everything works fine on development, but when I tried to build the production and deploy to gh-pages, I found that there is something wrong on the results.
In React Developer Tools(browser add-on), the development and production are quite different:
Development:
Production:
Is the problem comeing from PWA ServiceWorker? since I modifiy serviceWorker.ts a little.
Thanks
Hi there,
Thank you very for this starter template. I’m really grateful for the foundation you’ve laid out.
Any chance you could include an example showing how to retrieve data from a rest API and an example of how to post data to an API?
I’m but stuck on how to modify your template to achieve this using Redux.
hi InnFactory
i'm very impressed your boilerplate,
i wonder how to include webpack in this project?
Error in create-react-app-material-typescript-redux/node_modules/@types/react-transition-group/node_modules/@types/react/index.d.ts
(2314,14): Duplicate identifier 'LibraryManagedAttributes'.
to make it compile just add "skipLibCheck": true to tsconfig.json
Just tried hot reload and it seemed to work. Is there a reason it's not ticked in the readme? :)
Failed to compile. (it does work with npm)
/Users/olafbecker/dev/src/conflict_check/src/reducers/index.ts
TypeScript error: Argument of type '{ todoList: (state: any, action: Action<any>) => any; }' is not assignable to parameter of type 'ReducersMapObject'.
Property 'todoList' is incompatible with index signature.
Type '(state: any, action: Action<any>) => any' is not assignable to type 'Reducer<any>'.
Types of parameters 'action' and 'action' are incompatible.
Property 'payload' is missing in type 'AnyAction' but required in type 'Action<any>'. TS2345
9 | }
10 |
> 11 | export default (history: History) => combineReducers({
| ^
12 | ...todoReducer
13 | });
14 |
I would like to begin working on a PR that brings in ts-jest and enzyme that will provide unit tests for react components and functions.
Hi, just cloned your project and started it with yarn && yarn start. It gave me this error:
/src/ReduxRoot.tsx
TypeScript error in /home/henri/Documents/lcdps/teewee-mtr/src/ReduxRoot.tsx(12,13):
No overload matches this call.
Overload 1 of 2, '(props: Readonly<ProviderProps<AnyAction>>): Provider<AnyAction>', gave the following error.
Property '[Symbol.observable]' is missing in type 'Store<{}>' but required in type 'Store<any, AnyAction>'.
Overload 2 of 2, '(props: ProviderProps<AnyAction>, context?: any): Provider<AnyAction>', gave the following error.
Type 'Store<{}>' is not assignable to type 'Store<any, AnyAction>'. TS2769
10 | export function ReduxRoot() {
11 | return (
> 12 | <Provider store={store}>
| ^
13 | <PersistGate
14 | loading={<Typography>Loading...</Typography>}
15 | persistor={persistor}Using npm did work however.
Just follow the commands, and get an error:
Starting the development server...
events.js:167
throw er; // Unhandled 'error' event
^
Error: ENOSPC: no space left on device, watch '/home/nickluo/Workspaces/PythonWorkspace/create-react-app-material-typescript-redux/public'
at FSWatcher.start (internal/fs/watchers.js:161:26)
at Object.watch (fs.js:1227:11)
at createFsWatchInstance (/home/nickluo/Workspaces/PythonWorkspace/create-react-app-material-typescript-redux/node_modules/chokidar/lib/nodefs-handler.js:37:15)
at setFsWatchListener (/home/nickluo/Workspaces/PythonWorkspace/create-react-app-material-typescript-redux/node_modules/chokidar/lib/nodefs-handler.js:80:15)
at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/nickluo/Workspaces/PythonWorkspace/create-react-app-material-typescript-redux/node_modules/chokidar/lib/nodefs-handler.js:228:14)
at FSWatcher.NodeFsHandler._handleDir (/home/nickluo/Workspaces/PythonWorkspace/create-react-app-material-typescript-redux/node_modules/chokidar/lib/nodefs-handler.js:407:19)
at FSWatcher.<anonymous> (/home/nickluo/Workspaces/PythonWorkspace/create-react-app-material-typescript-redux/node_modules/chokidar/lib/nodefs-handler.js:455:19)
at FSWatcher.<anonymous> (/home/nickluo/Workspaces/PythonWorkspace/create-react-app-material-typescript-redux/node_modules/chokidar/lib/nodefs-handler.js:460:16)
at FSReqWrap.oncomplete (fs.js:159:5)
Emitted 'error' event at:
at FSWatcher._handleError (/home/nickluo/Workspaces/PythonWorkspace/create-react-app-material-typescript-redux/node_modules/chokidar/index.js:257:10)
at createFsWatchInstance (/home/nickluo/Workspaces/PythonWorkspace/create-react-app-material-typescript-redux/node_modules/chokidar/lib/nodefs-handler.js:39:5)
at setFsWatchListener (/home/nickluo/Workspaces/PythonWorkspace/create-react-app-material-typescript-redux/node_modules/chokidar/lib/nodefs-handler.js:80:15)
[... lines matching original stack trace ...]
at FSReqWrap.oncomplete (fs.js:159:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `react-scripts-ts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start 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! /home/nickluo/.npm/_logs/2018-07-27T07_12_21_797Z-debug.log
So i was trying to build this project with yarn, and I ran into this strange issue during compile:
TypeScript error: Argument of type '{ todoList: (state: any, action: Action<any>) => any; }' is not assignable to parameter of type 'ReducersMapObject'.
Property 'todoList' is incompatible with index signature.
Type '(state: any, action: Action<any>) => any' is not assignable to type 'Reducer<any>'.
Types of parameters 'action' and 'action' are incompatible.
Property 'payload' is missing in type 'AnyAction' but required in type 'Action<any>'. TS2345
9 | }
10 |
> 11 | export default (history: History) => combineReducers({
| ^
12 | ...todoReducder
13 | });I've tried yarn import, inferring yarn.lock and so on. but nothing worked.
After more diggings, i found that by using yarn I was getting an older version of redux (3.7.2) by running yarn why
yarn why v1.15.2
[1/4] Why do we have the module "redux"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
- "@types#redux-logger" depends on it
- Hoisted from "@types#redux-logger#redux"
info Disk size without dependencies: "248KB"
info Disk size with unique dependencies: "7.76MB"
info Disk size with transitive dependencies: "7.79MB"
info Number of shared dependencies: 5
=> Found "@types/react-redux#[email protected]"
info This module exists because "@types#react-redux" depends on it.
info Disk size without dependencies: "228KB"
info Disk size with unique dependencies: "312KB"
info Disk size with transitive dependencies: "340KB"
info Number of shared dependencies: 3
Done in 0.65s.
and I was eventually able to resolve by adding "redux": "^4.0.1" as a dependency.
Not sure if I should submit a pull request for this, after all I did go against the recommended npm installation approach. But i hope this can help others who wanted to use an alternative package manager. I have verified that by adding this constraint does not break the current npm build process.
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.