Giters

catamphetamine / universal-webpack

Isomorphic Webpack: both on client and server

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

webpack-chunk.json style empty

maiopirata opened this issue · comments

commented

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?

commented

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.

commented

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.

commented

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...

commented

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?

commented

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

commented

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

commented

That's great.
Thank you!