Changes to style sheets don't reload properly unless a JS file is also changed

[akanix42]

Reproduction:

1. Create a test app: meteor create foo
2. Add css modules: meteor add nathantreid:css-modules
3. Add a class to main.css:

   .foo {
   color: red;

4. Import the stylesheet and set up a helper in main.js:

   import style from './main.css';
   // ....
   Template.hello.helpers({
   counter() {
   return Template.instance().counter.get();
   },
   style() {
   return style;
   },
   });

5. Add the class in main.html:

   <template name="hello">
   <button>Click Me</button>
   <p class="{{style.foo}}">You've pressed the {{style}} button {{counter}} times.</p>
   </template>

6. View the site in your browser. The result is as expected:
7. Change the color to green. View the site in your browser. The style disappears because the stylesheet object is no longer a css modules class name export but instead an HTMLStyleElement DOM object:
8. Make an arbitrary change in main.html or main.js. The style shows up as expected:

[akanix42]

I've reported this issue here: https://github.com/meteor/meteor/issues/10421

[capi1O]

Hi @nathantreid, the issue I encountered (described in #124) seems a bit different because when I make a change to a SCSS file I see an error and the whole page does not load, not only the CSS.

Ex when my top style file is Main.scss which imports other SCSS file, if I make a change to one of those file the error would be :

Uncaught Error: Cannot find module '/imports/styles/Main.scss'
    at makeMissingError (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:232)
    at Module.require (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:251)
    at Module.moduleLink [as link] (modules.js?hash=0f818aa3cecb14c4b99382df6aa964b6ff42b29a:318)
    at Main.jsx (Main.jsx:1)
    at fileEvaluate (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:346)
    at Module.require (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:248)
    at Module.moduleLink [as link] (modules.js?hash=0f818aa3cecb14c4b99382df6aa964b6ff42b29a:318)
    at Root.jsx (Root.jsx:1)
    at fileEvaluate (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:346)
    at Module.require (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:248)

If I then change a JS file it then reloads and everything looks good.

Also, the meteor issue you linked in the previous post does not seem to be related to this issue ?

[akanix42]

@monkeydri Thanks for pointing that out, I must have accidentally removed the last digit of the Meteor issue link. Your issue symptoms are different, but somewhat similar - can you try the following build? It's the same as v3.2.2 except it was built with Meteor 1.7, which solved the issue I was having.

nathantreid:css-modules@3.2.2-meteor1.7

[capi1O]

I just tried the version nathantreid:css-modules@3.2.2-meteor1.7 but I have the same error on SCSS file change (I am using meteor 1.8.0 but downgrading to meteor 1.7 would be complicated on my current project).

Note : I also tried nathantreid:css-modules@3.2.2 and it worked OK on the first SCSS file I modified (live reload with no problem) but then crashed when I modified another one.

I also tried to patch meteor to 1.8.0.2 but still same error (this times the 2 first SCSS files modified reloaded properly but a test on a third one led to the error).

As a reminder the error logged server-side is the same described in #124 :

Compiling undefined with meteor-babel without a cache
[object Object]
    at Object.exports.compile (/home/dri/.meteor/packages/nathantreid_css-modules/.3.2.2.1odj7ml.mrog++os+web.browser+web.browser.legacy+web.cordova/plugin.mss.os/npm/node_modules/meteor/babel-compiler/node_modules/meteor-babel/index.js:77:13)
    at Object.compile (packages/babel-compiler.js:44:29)
    at tryBabelCompile (packages/mss/css-modules-build-plugin.js:255:22)
    at CssModulesBuildPlugin._generateOutput (packages/mss/css-modules-build-plugin.js:231:9)
    at CssModulesBuildPlugin.compileOneFile (packages/mss/css-modules-build-plugin.js:168:32)
    at getResult (packages/caching-compiler/multi-file-caching-compiler.js:113:32)
    at inputFiles.forEach.inputFile (packages/caching-compiler/multi-file-caching-compiler.js:167:24)
    at Array.forEach (<anonymous>)
    at Promise.asyncApply (packages/caching-compiler/multi-file-caching-compiler.js:93:16)
    at /home/dri/.meteor/packages/meteor-tool/.1.8.0.nqac8p++os.linux.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.linux.x86_64/dev_bundle/lib/node_modules/meteor-promise/fiber_pool.js:43:40

[capi1O]

I just understood why some SCCS file changes caused the crash while others did not (live reload with no error).

If the change to the SCSS file is brand new it crashes, if the change is a step back to a previous version of the file (which has then already be compiled before and is living somewhere in meteor cache) then it reloads properly.

[met5678]

Also seeing this issue when we change a scss module:

Uncaught Error: Cannot findmodule './style.scss'
    at makeMissingError (modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:232)
    at Module.require (modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:251)
    at Module.moduleLink [as link] (modules.js?hash=64d205fd2524418b6f5b602083be37bbd8b7b76d:320)
    at Button.jsx (Button.jsx:1)

No new info, just posting in case it's helpful to see more.

[akanix42]

The Compiling undefined with meteor-babel without a cache error should be fixed in nathantreid:css-modules@3.2.3-beta.3. It was compiled using Meteor 1.7, so it may also resolve the SCSS issues you are having. I was able to use SCSS files in a simple test app.

[capi1O]

@nathantreid Thank you so much, I confirm this is fixed.