Error in Build regarding router-loader

[bytewiz]

After following the instructions for routing from the documentation, and running the build script it errors out with the below:

ERROR in ./pages/container.js
Module build failed: TypeError: Cannot read property 'length' of null
    at Object.module.exports (.../loaders/route-loader.js:8:7)

Note:

For the route itself I am wrapping the component in a container using connect() from react-redux but shouldn't kill the routing?

./src/routes.js

./src/pages/index.js

And here Component is simply pointing to a container component like:

import Component from './component'

function mapStateToProps() {
// some mapping here..
} 

export default connect(mapStateToProps)(Component)

Let me know if additional info is required ✌️

[tirthbodawala]

@bytewiz, the pages folder should be used to only define files with routes, its very necesaary because route loader tries to add magic in every file inside pages folder, as you have added Compnent inside pages folder, its breaking the code, try moving Component to app folder and it should work just fine.

Let me know if this helps!

[bytewiz]

@tirthbodawala thanks, that seemed to work out but ran into another problem loading an image and the weird thing is I am loading in an image from the same location that works.

Also tried to load both from the /ressources an one works the other doesn't

this is the error

ERROR in ./assets/img/coverphoto.jpg
Module build failed: Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib
  Referenced from: /Users/nielshansen/Documents/external-event-website/node_modules/mozjpeg/vendor/cjpeg
  Reason: image not found

    at Promise.all.then.arr (/Users/nielshansen/Documents/external-event-website/node_modules/execa/index.js:231:11)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 @ ./app/eventWebsite/Hero/index.js 23:18-63
 @ ./app/eventWebsite/index.js
 @ ./app/container.js
 @ ./pages/index.js

[tirthbodawala]

@bytewiz Can you please share the code of /app/eventWebsite/Hero/index.js ?

[tirthbodawala]

Also to solve the error for dyld: Library not loaded Please make sure you have libpng installed:

Ubuntu:
sudo apt-get install libpng-dev

Mac (with brew)
brew install libpng

[bytewiz]

@tirthbodawala Let me try that and additionally:

Loading the image from ./src/app/eventWebsite/Hero/index.js
and the image is used in the same file like this:

backgroundImage: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(${DefaultHeroImg}),

like so: import DefaultHeroImg from '../../../assets/img/coverphoto.jpg';
and assets is found in ./src/assets/img/coverphoto.jpg

[bytewiz]

@tirthbodawala That worked 👍 Now only problem I am left with is

ERROR in server.js from UglifyJs
    Unexpected character '`' [server.js:109,84956]

But let me see if I can solve that ✌️

[tirthbodawala]

Please move the require("../styles/fonts.css") from routes to src/client.js
As styles need to be managed via client it would make more sense and won't hinder compilation of server.js

[bytewiz]

@tirthbodawala I moved require("../styles/fonts.css") to the component instead but I am still getting the same UglifyJS error 😞

[bytewiz]

@tirthbodawala I can't share the code, but let me try to reproduce it with another example ✌️ then I will share that

[tirthbodawala]

@bytewiz I just create a gitter channel for react-pwa if you wish to join:
https://gitter.im/react-pwa/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link