React-redux-firebase: imports failing inside reducer and store

[beckmeindia]

I am trying to use as the boilerplate https://github.com/wellyshen/react-cool-starter but on running build:production I get a weird export warning and error with no imports working. Weirdly though other packages seem to be working just fine
WARNING in ./src/redux/store.js
26:83-101 "export 'reactReduxFirebase' was not found in 'react-redux-firebase'
at HarmonyImportSpecifierDependency.getWarnings (C:\Users\gemini\Desktop\rea
ct-cool-starter-master\node_modules\webpack\lib\dependencies\HarmonyImportSpecif
ierDependency.js:46:15)
at Compilation.reportDependencyErrorsAndWarnings (C:\Users\gemini\Desktop\re
act-cool-starter-master\node_modules\webpack\lib\Compilation.js:663:24)
at Compilation.finish (C:\Users\gemini\Desktop\react-cool-starter-master\nod
e_modules\webpack\lib\Compilation.js:526:9)
at C:\Users\gemini\Desktop\react-cool-starter-master\node_modules\webpack\li
b\Compiler.js:472:16
at C:\Users\gemini\Desktop\react-cool-starter-master\node_modules\tapable\li
b\Tapable.js:225:11
at C:\Users\gemini\Desktop\react-cool-starter-master\node_modules\webpack\li
b\Compilation.js:472:11
at C:\Users\gemini\Desktop\react-cool-starter-master\node_modules\webpack\li
b\Compilation.js:443:13
at nextTickCallbackWith0Args (node.js:420:9)
at process._tickCallback (node.js:349:13)

WARNING in ./src/redux/reducers.js
31:14-34 "export 'firebaseStateReducer' was not found in 'react-redux-firebase'
at HarmonyImportSpecifierDependency.getWarnings (C:\Users\gemini\Desktop\rea
ct-cool-starter-master\node_modules\webpack\lib\dependencies\HarmonyImportSpecif
ierDependency.js:46:15)
at Compilation.reportDependencyErrorsAndWarnings (C:\Users\gemini\Desktop\re
act-cool-starter-master\node_modules\webpack\lib\Compilation.js:663:24)
at Compilation.finish (C:\Users\gemini\Desktop\react-cool-starter-master\nod
e_modules\webpack\lib\Compilation.js:526:9)
at C:\Users\gemini\Desktop\react-cool-starter-master\node_modules\webpack\li
b\Compiler.js:472:16
at C:\Users\gemini\Desktop\react-cool-starter-master\node_modules\tapable\li
b\Tapable.js:225:11
at C:\Users\gemini\Desktop\react-cool-starter-master\node_modules\webpack\li
b\Compilation.js:472:11
at C:\Users\gemini\Desktop\react-cool-starter-master\node_modules\webpack\li
b\Compilation.js:443:13
at nextTickCallbackWith0Args (node.js:420:9)
at process._tickCallback (node.js:349:13)

ERROR in ./~/react-redux-firebase/src/connect.js
Module parse failed: C:\Users\gemini\Desktop\react-cool-starter-master\node_modu
les\react-redux-firebase\src\connect.js Unexpected token (43:24)
You may need an appropriate loader to handle this file type.
| }
|
| static contextTypes = {
| store: PropTypes.object.isRequired
| };
@ ./~/react-redux-firebase/src/index.js 1:0-31
@ ./src/redux/store.js
@ ./src/client.js

ERROR in ./~/react-redux-firebase/src/helpers.js
Module parse failed: C:\Users\gemini\Desktop\react-cool-starter-master\node_modu
les\react-redux-firebase\src\helpers.js Unexpected token (242:10)
You may need an appropriate loader to handle this file type.
| if (dataToJS(data, path)[p.child]) {
| return {
| ...dataToJS(data, path),
| [p.child]: buildChildList(data, dataToJS(data, path)[p.child], p)
| }
@ ./~/react-redux-firebase/src/index.js 5:0-36
@ ./src/redux/store.js
@ ./src/client.js

ERROR in ./~/react-redux-firebase/src/actions/auth.js
Module parse failed: C:\Users\gemini\Desktop\react-cool-starter-master\node_modu
les\react-redux-firebase\src\actions\auth.js Unexpected token (253:12)
You may need an appropriate loader to handle this file type.
| firebase,
| { uid },
| { ...extraJWTData, uid }
| )
| }
@ ./~/react-redux-firebase/src/actions/index.js 1:0-37
@ ./~/react-redux-firebase/src/compose.js
@ ./~/react-redux-firebase/src/index.js
@ ./src/redux/store.js
@ ./src/client.js

ERROR in main.5e6876c477fe44fd6224.js from UglifyJs
SyntaxError: Unexpected character '`' [main.5e6876c477fe44fd6224.js:17271,9]

Please let me know what should be done

Thanks

[prescottprue]

It looks like you are loading the src (either through module or jsnext:main) and not building it (since the starter has node_modules excluded in babel-loader config).

This is most likely due to usage of webpack 2 in the starter, which uses the module field of the package.json (see this issue for more details).

You can reference the already babelified version (suggested) or handling babelifying the library with the correct babel plugins. I will have to take some time to look into what changes to your webpack config you will need to make to do this, but this line might have something to do with it.

Note: There is also generator-react-firebase for starting projects, and it seems to follow a lot of the same standards as react-cool-starter.

[beckmeindia]

@prescottprue Hey thanks for the reply. Just wanted to ask a couple of questions.
1)Does generator-react-firebase use Universal/isomorphic environment

2) How do i use both state 'in mapStateToProps' as well as {firebase} of 'firebaseConnect' together to push it to @connect();
I was contemplating of something like this:
@firebaseConnect(....)
@connect( (state, { firebase }) => ({ home: state.get('home'), todos: dataToJS(firebase, '/todos') }) )
export default App extends Component{
.....
}

Will this work?

[prescottprue]

It is isomorphic in the sense that the application can run on Node using the server that comes with it, but it is missing some features of a full "isomorphic" application. It does not hydrate the client with data or use React.renderToString.

If all you need is deployment to something like Heroku, you can pick Heroku as the deployment option when running the generator. This will output config for deployment to Heroku within your travis config and add the necessary Procfile. Firebase Static Hosting is also one of the deployment options.

This is what you want:

@firebaseConnect(....)
@connect((state) =>({
  home: state.get('home'),
  todos: dataToJS(state.firebase, '/todos')
}))
export default App extends Component{
.....
}

[prescottprue]

53 has been created to capture supporting of this boilerplate along with others.

It seems like due to Webpack 2 Tree Shaking, so it will probably not be supported until Webpack builds are included in v1.3.* or later.

[beckmeindia]

Thanks a lot Scott, will wait for the update on webpack2 and creating issue #53

[prescottprue]

Your welcome.

Just to clarify, I mean v1.3.* or coming versions of react-redux-firebase , not Webpack.

[biomorgoth]

Hi there!

I've just upgraded a project from Webpack 1.x to 2.x, and it started to present those _Unexpected token_ errors due to ES6 code. Since my project is a browser app, and according to Webpack resolve.mainFields default value (documentation here), i patched react-redux-firebase's package.json file to add the following:

"browser": "dist/index.js",

And so far now it is working with no problem. If you approve, it would be nice to have this fix on subsequent versions of the library.

[prescottprue]

@biomorgoth This flag has already been added on the v1.3.0-alpha branch which will be released soon. This was part of getting it to work correctly with webpack 2.x.

[biomorgoth]

Oh you're right! I did not saw it because of the _alpha_ version. Thank you!

[JulianJorgensen]

@prescottprue Do you think there are any performance differences between deploying to Heroku vs Firebase?

[prescottprue]

@JulianJorgensen Since your question does not really relate to this issue, please reach out over gitter or open a new issue.