question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DevServer aborts running when there are errors in CSS / SASS

See original GitHub issue

I run the Webpack DevServer with the command:

webpack-dev-server --config config/webpack.dev.js --display-error-details --inline

The config looks like

    module: {
       ...
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                fallbackLoader: "style",
                loader: "css"
            })
        }, {
            test: /\.scss/,
            loader: ExtractTextPlugin.extract({
                fallbackLoader: "style",
                loader: "css!postcss!sass"
            }),
            exclude: /^\_.*\.scss/
        },
    },
    postcss: function () {
        // try the jquery for browsers here - http://browserl.ist/
        return [autoprefixer({browsers: ['last 3 versions']})];
    },
    plugins: [
        ...
        new ExtractTextPlugin({
            filename: "[name].css"
        })
    ],
    devServer: {
        host: 'localhost',
        port: 3000,
        historyApiFallback: true,
        contentBase: 'dist/',
        watchOptions: {
            aggregateTimeout: 100,
            poll: 300
        },
        stats: {
            colors: true
        }
    }

Now, wenn I edit some SASS file and make any error (SASS gets invalid), the DevServer aborts running.

     [mXBz] ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/assets/css/vendor.scss 61.8 kB {0} [built]
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
C:\Projects\bpmn-editor-poc\node_modules\loader-runner\lib\LoaderRunner.js:90
                        throw e;
                        ^

TypeError: Cannot read property 'C:\Projects\bpmn-editor-poc\node_modules\extract-text-webpack-plugin' of null
    at C:\Projects\bpmn-editor-poc\node_modules\extract-text-webpack-plugin\index.js:257:27
    at C:\Projects\bpmn-editor-poc\node_modules\webpack\lib\Compilation.js:468:4
    at Array.forEach (native)
    at callback (C:\Projects\bpmn-editor-poc\node_modules\webpack\lib\Compilation.js:467:14)
    at Compilation.<anonymous> (C:\Projects\bpmn-editor-poc\node_modules\webpack\lib\Compilation.js:488:4)
    at C:\Projects\bpmn-editor-poc\node_modules\webpack\lib\Compilation.js:332:10
    at C:\Projects\bpmn-editor-poc\node_modules\async\lib\async.js:52:16
    at Object.async.forEachOf.async.eachOf (C:\Projects\bpmn-editor-poc\node_modules\async\lib\async.js:236:30)
    at Object.async.forEach.async.each (C:\Projects\bpmn-editor-poc\node_modules\async\lib\async.js:209:22)
    at Compilation.addModuleDependencies (C:\Projects\bpmn-editor-poc\node_modules\webpack\lib\Compilation.js:192:8)
    at Compilation.processModuleDependencies (C:\Projects\bpmn-editor-poc\node_modules\webpack\lib\Compilation.js:177:7)
    at Compilation.<anonymous> (C:\Projects\bpmn-editor-poc\node_modules\webpack\lib\Compilation.js:475:8)
    at C:\Projects\bpmn-editor-poc\node_modules\webpack\lib\Compilation.js:124:4
    at Array.forEach (native)
    at callback (C:\Projects\bpmn-editor-poc\node_modules\webpack\lib\Compilation.js:123:12)
    at C:\Projects\bpmn-editor-poc\node_modules\webpack\lib\Compilation.js:147:10

Can DevServer ignore errors in SASS / CSS files, continue running and refresh the browser when these files are ok again?

Many thanks in advance,

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
ova2commented, Sep 3, 2016

Yes, just updated it from 1.14.1 to 2.1.0-beta.2 and happiness 😃. Errors in SASS / CSS files are shown in the console and the server keeps running without abort. Error corrected --> page gets automatically refreshed. Awesome.

0reactions
SpaceK33zcommented, Sep 3, 2016

Awesome 😃.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Once there is error, webpack-dev-server will stop working and ...
After many hours of research, I have found the solution. According to comment on webpack-dev-server github page, updating webpack-dev-server ...
Read more >
Solution for Webpack 5 Dev Server Not Live Reloading
There is currently a bug with Webpack 5 and webpack-dev-server not working that is caused by the existence of a browserslist in the...
Read more >
Getting started with Rails 6.1, TailwindCSS JIT, Webpacker ...
This started happening to me after I got tailwind working. Are you running some live-reloading tool? (e.g., I was running bundle exec guard...
Read more >
Simple webpack (5.x) tutorial - EDC4IT
js import "./message.css"; ... If you are still running the dev server, you'll notice an error: ERROR in ...
Read more >
How to Bundle a Simple Static Site Using Webpack - SitePoint
Now we can try and run webpack from the command line to see if it is set up ... it seems that there...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found