Webpack-React-Typescript-Boilerplate

What is this?

This is a boilerplate project using the below libraries

React v16 (aka Fibre)
Webpack 3
Webpack dev server (Hot reloading)
React
Typescript
Redux
Redux-Saga
React-material
Mocha
Sinon
Should.js
Enzyme
Webdriverio
Json-server

How to use

You can clone this repo for your own project using the command below

git clone https://github.com/el-davo/webpack-react-typescript-boilerplate.git your-project-name

Installation

It is reccommended to use yarn for Installation. If you havent installed yarn please check it out here, then use the command below to install dependencies

yarn

If you dont have yarn installed then you can just use npm

npm i

Commands

To run the app in development mode use

npm run dev

To run tests use one of the commands below, the second command will watch for changes and re-run the tests

npm run test

npm run test:watch

To make a release build use the command below

npm run dist

To generate a coverage report use the command below. Reports can be found under ./test_results/coverage

npm run coverage

To run e2e tests you can use the command below. This is using Webdriverio with phantomjs so it should be headless. If you want to run in real browser then you need to update wdio.conf.js

npm run e2e

errors running with mochista

I was trying this out (feature/mochista branch) to better understand that issue laggingreflex/mochista#12 but I'm getting these errors:

  mochista:log   Globing files... +0ms
  mochista:log   Readying watcher... +192ms
  mochista:warn  Timed out waiting for watcher "ready" event. Proceeding anyway... (See #chokidar issue in the README) +3s
  mochista:log   Loading compilers... +13ms
  mochista:log   Loading requires... +118ms
  mochista:log   Running mocha... +8s
Warning: ReactTestUtils has been moved to react-dom/test-utils. Update references to remove this warning.
  mochista:error Invariant Violation: injectTapEventPlugin(): Can only be called once per application lifecycle.
  mochista:error
  mochista:error It is recommended to call injectTapEventPlugin() just before you call ReactDOM.render(). If you are using an external library which calls injectTapEventPlugin() itself, please contact the maintainer as it shouldn't be called in library code and should be injected by the application.
  mochista:error ___Stack trace #1___
  mochista:error Invariant Violation: injectTapEventPlugin(): Can only be called once per application lifecycle.
  mochista:error
  mochista:error It is recommended to call injectTapEventPlugin() just before you call ReactDOM.render(). If you are using an external library which calls injectTapEventPlugin() itself, please contact the maintainer as it shouldn't be called in library code and should be injected by the application.
  mochista:error     at invariant (C:\...\webpack-react-typescript-boilerplate\node_modules\fbjs\lib\invariant.js:44:15)
  mochista:error     at injectTapEventPlugin (C:\...\webpack-react-typescript-boilerplate\node_modules\react-tap-event-plugin\src\injectTapEventPlugin.js:11:5)
  mochista:error     at Object.<anonymous> (C:\...\webpack-react-typescript-boilerplate\app\index.tsx:12:1)
  mochista:error     at Module._compile (module.js:571:32)
  mochista:error     at Module.m._compile (C:\...\webpack-react-typescript-boilerplate\node_modules\ts-node\src\index.ts:410:23)
  mochista:error     at Module._extensions..js (module.js:580:10)
  mochista:error     at Object.require.extensions.(anonymous function) [as .tsx] (C:\...\webpack-react-typescript-boilerplate\node_modules\ts-node\src\index.ts:413:12)
  mochista:error     at Module.load (module.js:488:32)
  mochista:error     at tryModuleLoad (module.js:447:12)
  mochista:error     at Function.Module._load (module.js:439:3)
  mochista:error     at Module.require (module.js:498:17)
  mochista:error     at require (internal/module.js:20:19)
  mochista:error     at C:\...\mochista\node_modules\mocha\lib\mocha.js:230:27
  mochista:error     at Array.forEach (native)
  mochista:error     at Mocha.loadFiles (C:\...\mochista\node_modules\mocha\lib\mocha.js:227:14)
  mochista:error     at Mocha.run (C:\...\mochista\node_modules\mocha\lib\mocha.js:495:10) +14s

Commenting out https://github.com/el-davo/webpack-react-typescript-boilerplate/blob/feature/mochista/app/index.tsx#L12 got rid of the above error but then the following error occurred:

  mochista:log   Globing files... +0ms
  mochista:log   Readying watcher... +222ms
  mochista:warn  Timed out waiting for watcher "ready" event. Proceeding anyway... (See #chokidar issue in the README) +4s
  mochista:log   Loading compilers... +20ms
  mochista:log   Loading requires... +198ms
  mochista:log   Running mocha... +10s
Warning: ReactTestUtils has been moved to react-dom/test-utils. Update references to remove this warning.
action %c@@router/LOCATION_CHANGE %c@ 22:58:56.063
action %c@@router/LOCATION_CHANGE %c@ 22:58:56.063
  mochista:error TypeError: logger[prevStateLevel] is not a function
  mochista:error ___Stack trace #1___
  mochista:error TypeError: logger[prevStateLevel] is not a function
  mochista:error     at C:\...\webpack-react-typescript-boilerplate\node_modules\redux-logger\lib\core.js:116:51
  mochista:error     at Array.forEach (native)
  mochista:error     at printBuffer (C:\...\webpack-react-typescript-boilerplate\node_modules\redux-logger\lib\core.js:69:10)
  mochista:error     at C:\...\webpack-react-typescript-boilerplate\node_modules\redux-logger\lib\index.js:117:31
  mochista:error     at C:\...\webpack-react-typescript-boilerplate\node_modules\react-router-redux\lib\middleware.js:22:18
  mochista:error     at C:\...\webpack-react-typescript-boilerplate\node_modules\redux-saga\lib\internal\middleware.js:86:22
  mochista:error     at Object.dispatch (C:\...\webpack-react-typescript-boilerplate\node_modules\redux-immutable-state-invariant\dist\index.js:52:32)
  mochista:error     at handleLocationChange (C:\...\webpack-react-typescript-boilerplate\node_modules\react-router-redux\lib\sync.js:99:11)
  mochista:error     at Object.syncHistoryWithStore (C:\...\webpack-react-typescript-boilerplate\node_modules\react-router-redux\lib\sync.js:108:5)
  mochista:error     at Object.<anonymous> (C:\...\webpack-react-typescript-boilerplate\app\index.tsx:15:17)
  mochista:error     at Module._compile (module.js:571:32)
  mochista:error     at Module.m._compile (C:\...\webpack-react-typescript-boilerplate\node_modules\ts-node\src\index.ts:410:23)
  mochista:error     at Module._extensions..js (module.js:580:10)
  mochista:error     at Object.require.extensions.(anonymous function) [as .tsx] (C:\...\webpack-react-typescript-boilerplate\node_modules\ts-node\src\index.ts:413:12)
  mochista:error     at Module.load (module.js:488:32)
  mochista:error     at tryModuleLoad (module.js:447:12) +13s

Any idea why these errors might be occurring, or is it only at my end? I'm on Windows 10

el-davo / webpack-react-typescript-boilerplate Goto Github PK