React 15.4.0 breaks npm start

[tristau]

The new React 15.4.0 drop seems to have broken things. It looks like they removed all of ReactDOM from React, but I'm not sure what is breaking. My guess is it is the react-hot-api.

Failed to compile.

Error in ./src/index.js
Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in ...

[supnate]

Hi @tristau thank you for reporting the issue. It's indeed caused by the react-hot-loader v1.x which depends on react/lib/ReactMount removed from React v15.4.

For any project created by Rekit you need to fix the issue yourself because you fully own the project once it's created, this is how Rekit was designed.

There is some discussion at gaearon/react-hot-loader#417 where you can find information about how to fix the issue.

The solution is to upgrade to react-hot-loader 3.0-beta, here is a guide: https://github.com/gaearon/react-hot-loader/tree/next-docs/docs

However I have to admit it's my mistake not using react-hot-loader 3.0 earlier though it's still 'marked' beta while it's more stable than the 'stable' version.

I'm also working on updating Rekit to use 3.0 so that new created projects won't have the problem.

[supnate]

I've just updated Rekit to use RHL 3.0, you could refer to the commit to fix your own project: 1d2b1a1

[supnate]

Fix by rekit v1.1.0 published on npm. Please update. https://www.npmjs.com/package/rekit

[brolin]

Hi @supnate, thanks for incredible project!

You made a typo in the rekit deps file that breaks the creation of new application. I made a stupid pull request that delete a y char. supnate/rekit-deps#1

Thanks 😄

[brolin]

After fix the rekit-deps issues. I create a application correctly, then when i run npm start i got errors in proptypes of each class and with the message "Module build failed: SyntaxError: Missing class properties transform."

Searching on internet i found this issue of babel babel/babel#2729, the solution was reorder the presets array in package.json as:

"presets": [
"es2015",
"react",
"babel-preset-stage-0"
]

I made a pull-request #17 with that stupid fix.

The errors output were:
`ERROR in ./src/containers/App.js
Module build failed: SyntaxError: Missing class properties transform.

4 |
5 | export default class App extends Component {

6 | static propTypes = {
| ^
7 | children: PropTypes.node,
8 | };
9 |

@ ./src/common/routeConfig.js 7:11-39

ERROR in ./src/components/SimpleNav.js
Module build failed: SyntaxError: Missing class properties transform.

8 |
9 | export default class SimpleNav extends PureComponent {

10 | static propTypes = {
| ^
11 | routes: PropTypes.array.isRequired,
12 | };
13 |

@ ./src/components/index.js 8:17-39

ERROR in ./src/features/home/DefaultPage.js
Module build failed: SyntaxError: Missing class properties transform.

6 |
7 | export class DefaultPage extends Component {

8 | static propTypes = {
| ^
9 | home: PropTypes.object.isRequired,
10 | actions: PropTypes.object.isRequired,
11 | };

@ ./src/features/home/index.js 8:19-43

ERROR in ./src/features/home/RedditList.js
Module build failed: SyntaxError: Missing class properties transform.

2 |
3 | export default class RedditList extends PureComponent {

4 | static propTypes = {
| ^
5 | list: PropTypes.array,
6 | };
7 |

@ ./src/features/home/index.js 16:18-41

ERROR in ./src/features/home/TestPage2.js
Module build failed: SyntaxError: Missing class properties transform.

5 |
6 | export class TestPage2 extends Component {

7 | static propTypes = {
| ^
8 | home: PropTypes.object.isRequired,
9 | actions: PropTypes.object.isRequired,
10 | };

@ ./src/features/home/index.js 24:17-39

ERROR in ./src/features/home/TestPage1.js
Module build failed: SyntaxError: Missing class properties transform.

5 |
6 | export class TestPage1 extends Component {

7 | static propTypes = {
| ^
8 | home: PropTypes.object.isRequired,
9 | actions: PropTypes.object.isRequired,
10 | };

@ ./src/features/home/index.js 20:16-38
webpack: bundle is now VALID.
`

[supnate]

Hi @brolin ,
Thank you for the investigation! But I can't reproduce the babel related error myself. I've successfully created and started a new project created by Rekit after merging the PR for react-deps. Could you please check again?

[brolin]

Hi @supnate

I checked again and today all works perfectly.

Thanks, best regards!

[tristau]

Thanks for the info and fix @supnate. Rekit is a great project and has helped tremendously in learning and using react/redux.