Separating CSS -

[EnergeticPixels]

I am stuck on an error. I am working in the section called Separating Application Code and Style. When I run the build, I am getting a dependency error at an entry point not allow. It has to do with my component.js. I believe its the require function at the top where I am requiring the './main.js' file. I went back and looked at the instructions and nothign told me to do anything with component.js... did I miss something??

./app/component.js file
`var styles = require('./main.css');

module.exports = function() { var element = document.createElement('h1');

element.innerHTML = 'Hello Tony';

element.className = styles.redButton;

return element;

};`

[bebraw]

Can you check that your app.js doesn't have a require against your CSS? If it has, then that's the error we would get.

If you push your project to GitHub, I can have a better look.

On Friday, 8 July 2016, Anthony Jackman notifications@github.com wrote:

I am stuck on an error. I am working in the section called Separating Application Code and Style. When I run the build, I am getting a dependency error at an entry point not allow. It has to do with my component.js. I believe its the require function at the top where I am requiring the './main.js' file. I went back and looked at the instructions and nothign told me to do anything with component.js... did I miss something?? [image: webpackdemo_builderror] https://cloud.githubusercontent.com/assets/283558/16699559/732daf54-451a-11e6-9e72-a057e52176c7.JPG

./app/component.js file

`var styles = require('./main.css');

module.exports = function() { var element = document.createElement('h1');

element.innerHTML = 'Hello Tony';

element.className = styles.redButton;

return element;

};`

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/survivejs/webpack/issues/94, or mute the thread https://github.com/notifications/unsubscribe/AAKMCdxcYjDkQMLA5uMGd9m8C39RnMEpks5qTqkvgaJpZM4JIVxL .

[ipluser]

I am stuck on an error after import the purecss. error message:

cnpm run build

> webpack-demo@0.0.0 build /Users/test/WebstormProjects/test/webpack-demo
> webpack

clean-webpack-plugin: /Users/test/WebstormProjects/test/webpack-demo/build has been removed.
Hash: 3e660a080fbac0bb8352
Version: webpack 1.13.1
Time: 5251ms
                               Asset       Size  Chunks             Chunk Names
     app.5dd18d6afb348bd7b08e.js.map    1.69 kB    0, 3  [emitted]  app
         app.5dd18d6afb348bd7b08e.js  278 bytes    0, 3  [emitted]  app
      vendor.db4b53e716e2fee06a7d.js    19.5 kB    2, 3  [emitted]  vendor
    manifest.b77974ec5256e1ae38eb.js  840 bytes       3  [emitted]  manifest
      style.06b0e29b2f53b58fdc56.css   95 bytes    1, 3  [emitted]  style
       style.06b0e29b2f53b58fdc56.js  261 bytes    1, 3  [emitted]  style
   style.06b0e29b2f53b58fdc56.js.map  863 bytes    1, 3  [emitted]  style
  style.06b0e29b2f53b58fdc56.css.map  107 bytes    1, 3  [emitted]  style
  vendor.db4b53e716e2fee06a7d.js.map     251 kB    2, 3  [emitted]  vendor
manifest.b77974ec5256e1ae38eb.js.map    8.86 kB       3  [emitted]  manifest
                          index.html  494 bytes          [emitted]  
   [0] ./app/index.js 100 bytes {0} [built]
   [0] multi vendor 28 bytes {2} [built]
   [0] multi style 40 bytes {1} [built] [1 error]
  [29] ./app/component.js 174 bytes {0} [built]
    + 33 hidden modules

ERROR in ./~/.npminstall/purecss/0.6.0/purecss/build/pure-min.css
Module parse failed: /Users/test/WebstormProjects/self/webpack-demo/node_modules/.npminstall/purecss/0.6.0/purecss/build/pure-min.css Unexpected token (11:64)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (11:64)
    at Parser.pp.raise (/Users/test/WebstormProjects/self/webpack-demo/node_modules/.npminstall/acorn/3.2.0/acorn/dist/acorn.js:923:13)
    at Parser.pp.unexpected (/Users/test/WebstormProjects/self/webpack-demo/node_modules/.npminstall/acorn/3.2.0/acorn/dist/acorn.js:1490:8)
    at Parser.pp.semicolon (/Users/test/WebstormProjects/self/webpack-demo/node_modules/.npminstall/acorn/3.2.0/acorn/dist/acorn.js:1469:73)
    at Parser.pp.parseExpressionStatement (/Users/test/WebstormProjects/self/webpack-demo/node_modules/.npminstall/acorn/3.2.0/acorn/dist/acorn.js:1994:8)

My test project at webpack-demo, you can fetch this and test it.

[bebraw]

@ipluser Which version of Node and npm are you using?

[EnergeticPixels]

Juho, I seen in the demo instructions where you removed the css require and I did that. Its the reason I don't know where my issue is cominng from. so the project is up on github. latest commit is where my issue started appearing. Any direction would be appreciated. Tony github repo https://github.com/EnergeticPixels/webpack-tut

On Sat, Jul 9, 2016 at 10:47 AM Juho Vepsäläinen notifications@github.com wrote:

@ipluser https://github.com/ipluser Which version of Node and npm are you using?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/survivejs/webpack/issues/94#issuecomment-231540751, or mute the thread https://github.com/notifications/unsubscribe/AARTpiKo3lhPv8tBwobXBrjqfcOX13cFks5qT8J1gaJpZM4JIVxL .

[bebraw]

@EnergeticPixels Alright. Got it. The problem is at component.js at var styles = require('./main.css');. Since the style entry points to main.css, this yields the error.

This is a con of the setup. If we want to use CSS Modules, then it's not possible to use separate entry for style as far as I understand due to the aforementioned issue. I'll clarify this in the book. Thanks!

[EnergeticPixels]

Juho,

Ok, so this is going to take some thought for coming up with a solution

for "Separating App Code and Styling". Can I move that commit into a separate branch? Then back in master branch, pick up with "Eliminating Unused CSS" section directly from "Setting Up extract-text-webpack-plugin" section? I didn't see anything in that "...Unused CSS" section that would fail if code in "Separating App Code..." section was missing from master branch. Tony

On Sat, Jul 9, 2016 at 11:57 AM Juho Vepsäläinen notifications@github.com wrote:

@EnergeticPixels https://github.com/EnergeticPixels Alright. Got it. The problem is at component.js at var styles = require('./main.css');. Since the style entry points to main.css, this yields the error.

This is a con of the setup. If we want to use CSS Modules, then it's not possible to use separate entry for style as far as I understand due to the aforementioned issue. I'll clarify this in the book. Thanks!

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/survivejs/webpack/issues/94#issuecomment-231544094, or mute the thread https://github.com/notifications/unsubscribe/AARTps8Rdook8YdWTxDcS-xitpI4_xJEks5qT9MHgaJpZM4JIVxL .

[ipluser]

@bebraw Thx~ It's ok for me with npm install not cnpm install, I think cnpm something wrong that cause install dependencies may not complete successfully~

[bebraw]

@EnergeticPixels In part it's my fail (I'll add a note). Basically CSS Modules (that component.js import) and using CSS with a separate entry aren't compatible ideas. Hash invalidation is less of an issue there given the CSS and JS are so interrelated. But still, good for me to expand on. :+1:

@ipluser Ok, great to hear.

[jpgcode]

Following the same Separating application code and styling chapter. I was able to fix the chunk issue in my build process, however if I remove the require('./main.css'); from my Javascript, the HMR for the CSS do not work.

I'm looking for a way to resolve the chunk issue, but having the CSS HMR enabled in development mode. Any recommendation?

[bebraw]

@jpgcode Can you link to your project? Thanks.

[bebraw]

This should be handled at dev now. I moved away from the entry based scheme so it's all good now.