Silently fails/stalls webpack with no error

[evandegr]

I have 2 imports that I use in multiple scss files that look like the following:

@import 'variables';
@import 'functions';

Everything works fine until I hit one file that has the exact same imports. Then, I see webpack build stall and it shows no errors. If I remove the import for this file, everything works, if I add it, it stalls. I don't understand why its happening because it's using the exact same imports. Problem still occurs if I remove everything in that file except for the imports. Problem does not occur if I remove the imports as well.

[maman]

got this issue too.

the directory structure is something like this.

├── moduleA
│   ├── moduleA.controller.js
│   ├── moduleA.style.scss
│   ├── moduleA.template.html
├── moduleB
│   ├── moduleB.controller.js
│   └── moduleB.style.scss
│   ├── moduleB.template.html
├── moduleC
│   ├── moduleC.controller.js
│   ├── moduleC.style.scss
│   └── moduleC.template.html
├── styles
│   ├── _settings.scss
│   └── main.scss
└── app.js

1. the module-specific styles will be require’d in the controller.
2. all module-specific styles has @import syntax to _settings.scss file.
3. the main.scss is the ‘global’ stylesheet which require’d in the app.js file, and has @import syntax to _settings.scss file.

also I used foundation-apps library heavily, so main.scss file has @import to the foundation-apps/foundation, and the module-specific styles has @import to some foundation functions that I use for the module, such as foundation-apps/components/grid.

the build succeeds when I first remove the require on the controller, and add it again after the first build has succeed (I use webpack-dev-server with --hot).

[jhnns]

That's strange, thx for reporting this. Could you set up a small gist that reproduces the error?

[saper]

Does putting env UV_THREADPOOL_SIZE=100 before node invocation help? If yes, then this is sass/node-sass#857

[Antontelesh]

I'm reporting the same issue.
Putting env UV_THREADPOOL_SIZE=100 before webpack invocation does not help.

[Antontelesh]

Sorry, it helps but builds very slowly. I've been waiting for a couple of minutes and it have compiled after all :)

[maman]

@jhnns sorry I can't, still in the middle of a project 😣
currently I'm using the env UX_THREADPOOL_SIZE=100, and it definitely helps. thanks @saper !

[evandegr]

Also downgrading to 0.5.0 and using node-sass 3.1.1 fixed this for me.

[saper]

3.1.1 also suffers from threading problem, so there must be some other, additional issue. @evandegr can you post somewhere a minimal but complete example to reproduce this issue?

[ftorre104]

I had this same issue. It happens when I import a utility .scss file (it has mixins) into 2 or more other scss files. If I just import it into 1 scss file, webpack builds correctly.

However, I have no problem with config .scss files that only define variables. I can include those into as many .scss files with no build problem.

env UV_THREADPOOL_SIZE=100 worked for me too.

[jeffling]

Weird, I have the same problem and fixed it by downgrading to 0.5.0. Tried 0.6.0 and it didn't work.

[haustraliaer]

We experienced this issue as well - multiple imports over different files of a global (@import '~boilerplate';) mixin/variable file completely stalled webpack.

[saper]

I would really love if webpack community could produce a simple, self-contained setup to reproduce the issue.

[haustraliaer]

@saper I'm literally doing that right now ;)

[jeffling]

@haustraliaer nice! :) i was going going to do it this weekend but ran out of time. Would really love to get this resolved so we can stop adding 30 sass include paths into our build. Let me know if you need any help!

[piotrfonte]

I have a sample for you to fiddle with: https://github.com/piotrf/webpack-playground

1. npm install and npm start
2. terminal will throw SASS variables missing errors.
3. uncomment @import "config"; in those files:

/src/Modules/Footer/Footer.scss
/src/Modules/Header/Header.scss
/src/Modules/StatusBar/StatusBar.scss

1. bundle will recompile.
2. restart server.
3. bundle compilation will choke.

Hope that helps.

[haustraliaer]

Hah, beat me to it... Here's my project anyway which shows pretty clearly where it breaks:

https://github.com/haustraliaer/sass-webpack

[mmahalwy]

Any updates on this? Still not working and hangs :(

[haustraliaer]

@mmahalwy It seems like the node-sass guys are gonna take a while to update this issue - as it's not a simple problem to fix.

I'm honestly about to bail on sass in favour of postcss.

[saper]

Dzięki, @PiotrF

Right now I am getting the same Module not found: Error: Cannot resolve 'file' or 'directory' ./modules/TopBar/TopBar error for 4 modules, no matter what :)

With https://github.com/saper/webpack-playground/tree/uncommenting@f547bb0 I get:

https://gist.github.com/e0ec0e85bc048922ca27

With the master (saper/webpack-playground@f547bb0) it gives

https://gist.github.com/9255315d068b8edc36b

Not a big difference, if any.... No hangs...

[mmahalwy]

@haustraliaer great suggestion! PostCss looks amazing!

[jhnns]

@haustraliaer 's example shows the hangs.

[dexbol]

process.env.UV_THREADPOOL_SIZE = 100; works .

[saper]

I can unfortunately confirm that https://github.com/haustraliaer/sass-webpack hangs due to sass/node-sass#857

[mderrick]

Just in case this helps anybody I also had this precise issue with importing a partial just fine until I imported it again for the third time. Webpack would simply hang.

Upgrading sass-loader from 1.0.1 to 3.1.2 solved it for me.

[knvpk]

yeah, upgrading the sass-loader version solved for me also, thanks @mderrick

[sebastiaanluca]

Running into the same issue using a simple mixin, but not sure of it's entirely the same or whether I should create a new issue. Using "sass-loader": "^3.1.2"

@mixin font-sans($font: 'Lato') {
    font-family: $font, sans-serif;
    font-style: normal;
}

@mixin font-sans-light {
    @include font-sans();
    font-weight: 300;
}

Note the @include font-sans() and its parenthesis. Passing something like @include font-sans('Lato'); works. Not passing something just silently stops gulp/webpack watch after just showing Begin compile at… and Finished 'webpack'….

---

Kind of a "nevermind" here as I just found the culprit, though I'd expect it to throw some errors.

Accidentally defined 2 mixins with the same name where one then referenced itself:

@mixin font-sans($font: 'Lato') {
    font-family: $font, sans-serif;
    font-style: normal;
}

@mixin font-sans {
    @include font-sans;
    font-weight: 400;
}

Probably stuck in an infinite loop or something and made it quit altogether.

[bensampaio]

I just run into this exact same issue. I'm using "css-loader": "^0.23.1" in combination with "sass-loader": "^4.0.0". Every CSS module file imports the same vars.scss file. At first, that was fine but the project continued growing so I got more and more .scss files and now all of a sudden webpack is no longer able to finish.

My webpack configuration looks like this:

{
    devtool: 'eval',
    entry: {
        app: path.resolve(__dirname, 'start.js'),
    },
    module: {
        loaders: [
            {
                loader: 'babel',
                test: /\.jsx?$/,
            },
            {
                loader: ExtractTextPlugin.extract('css?modules&importLoaders=1&localIdentName=[name]--[local]___[hash:base64:5]!sass!postcss-loader'),
                test: /\.scss$/,
            },
        ],
    },
    plugins: [
        new ExtractTextPlugin('styles.css', { allChunks: true }),
    ],
    postcss: [
        Autoprefixer,
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    resolve: {
        extensions: ['', '.js', '.jsx'],
    },
    watch: true,
}

Am I doing anything wrong? Is this a known problem of using CSS modules with SASS? Is there anything I can try to fix this either temporarily or permanently? Help with this would be truly appreciated since I'm completely stuck with this issue. Thank you!

[feychou]

This still happens to me with node-sass 3.8.0 and sass-loader 4.0.0. However increasing the threadpoll size works.

[seeden]

I have same error with latest sass-loader

[theskillwithin]

happens "sass-loader": "^4.0.2",

[tomsarduy]

This is still happening, 2 years and there is no final resolution? I'm using node-sass 4.5.0 and sass-loader 6.0.1. Although UV_THREADPOOL_SIZE=100 seems to solve the issue, it makes the compilation time slower. I'm afraid what's gonna happen when the project keeps growing.

[jhnns]

If someone can publish a project that makes this reproducible, that would be a big help 👍

[jsg2021]

From what i can gather, it's really a cyclical import issue. I don't think there's anything to do for sass-loader other than to detect/report the problem for the user to fix.

[mechanicious]

Webpack stalled at compiling Javascript files through babel.

Adding the options below to webpack.config.js solved the issue for me. These options are described in docs.

watchOption: {
  aggregateTimeout: 1,
  poll: 1000
}

So my Webpack config file looks now like this

var path = require('path');

module.exports = {
  entry: ["./js/index.js"],
  devtool: "source-map",
  output: {
    path: path.join(__dirname, 'public/dist'),
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loader: "babel",
        query: {
          presets: ["es2015"],
          plugins: ["transform-flow-strip-types", "transform-class-properties"]
        },
        include: [
          path.join(__dirname, 'js')
        ]
      },
      {
        test: /\.css$/,
        loaders: ['style', 'css']
      },
      {
        test: /\.json$/,
        loaders: ['json'],
        include: [
          path.join(__dirname, 'js'),
        ],
      },

    ]
  },
  resolve: {
    extensions: ['','.js', '.jsx', '.json', '.css']
  },
  watchOptions: {
    aggregateTimeout: 1,
    poll: 1000
  }
};