webpack-chunk.json style empty
maiopirata opened this issue · comments
This library is really useful. So I would like to thank you first.
I do not understand why when I run your project in dev, the webpack-chunk.json produced does not have the style name:
{"javascript":{"main":"http://127.0.0.1:3001/assets/main.5d1ad7c75f2037341bab.js"},"styles":{}}
How can the page-server know which file to use?
If the styles
is empty that means ExtractTextPlugin
is not used and that's the case for development mode.
The page-server
won't insert any <link/>
to a style in that case.
The programmer can add styles manually in this case. For example, through require()
ing them and inserting them to the <head><style/></head>
tag.
I do it like this in the example project
https://github.com/halt-hammerzeit/webpack-react-redux-isomorphic-render-example/blob/master/code/page-server/web%20server.js#L73
// this CSS will be inserted into server rendered webpage <head/> <style/> tag
// (when in development mode only - removes rendering flicker)
style: () =>
{
// clear require() cache for hot reload in development mode
if (_development_)
{
delete require.cache[require.resolve('../../assets/styles/style.scss')]
}
// The `.source[0][1]` in the end is caused by `fake-style-loader`.
// https://github.com/dferber90/fake-style-loader/issues/1
return require('../../assets/styles/style.scss').source[0][1]
}
If you happen to find a better solution then you can share it in this issue.
I think that it is a good solution.
I try to introduce the Extract Text plugin in dev to see if it properly exported in the chunk files.
Usually for my personal project I prefer to work as you do: 1 single main css file with a 'human' name and some inline style attached to presentational components.
Unfortunately when I work in an organization I have to adapt..
I will write you my thoughts...
Ok I'm lost now..
I tried to run the production build..
The library create all the assets in my output folder. This part seems right..
{"javascript":{"main":"/build/main.9b130da9ae91bb014df9.js"},"styles":{"main":"/build/main-a31123c3d8258c75c43d1bf08029bf3a.css"}}
the chunk files contains all the informations...
Now in my server.js file I respond with an html:
function renderFullPage(html, preloadedState) {
return `
<!doctype html>
<html>
<head>
<meta charSet="utf-8" />
<title>Isomorphic</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href=${cssFile} />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
</head>
<body>
<div id="app">${html}</div>
<!--[if !(IE 8)]><!-->
<script src=${jsFile}></script>
<!--<![endif]-->
<script>
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState)}
</script>
</body>
</html>
`
}
Now when I load the page the browser go searching the js and css files at the correct location
localhost:3000/build/file1 file2
'build' is the output.publicPath set in the webpack.config.js
In any case the browser cannot retrieve the files. Like if the output.publicPath is not linked to the output.path...
I have to say that I'm not using your library for the isomorphic render.. Do you know why this could happen?
ok the problem is that I didn't setup a different server to run the static assets, and the express static path was not configured properly.
The library is working!
Thanks
FYI, I've just updated this library with a way of populating the styles
object in development mode.
https://github.com/halt-hammerzeit/universal-webpack#flash-of-unstyled-content
That's great.
Thank you!