CODEWITHSUNDEEP
csswebpacksource-mapscss-loadersass-loader
SwingCoder911
SwingCoder911

Reputation: 11

Webpack Sass-loader and Css-loader 'sourceMap' option causing failure

I've been fighting with webpack for more than a day now to get the source maps up for my scss file loaded through ExtractTextPlugin.

Every time I get the error:

TypeError: Path must be a string. Received undefined
    at assertPath (path.js:7:11)
    at Object.relative (path.js:538:5)
    at Object.onRender (C:\Git\app\node_modules\sass-loader\index.js:282:42)
    at Object.<anonymous> (C:\Git\app\node_modules\async\dist\async.js:2244:31)
    at Object.callback (C:\Git\app\node_modules\async\dist\async.js:906:16)
    at options.success (C:\Git\app\node_modules\node-sass\lib\index.js:303:32)

My webpack config module looks like the following:

{
            test: /\.(css)$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: 'css-loader'})
        },
        {
            test: /\.(scss)$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    }, 
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }]})
        },

My loader versions are: css-loader: 0.28.7 sass-loader: 4.1.1 style-loader: 0.13.2 node-sass: 3.13.1 webpack: 2.2.1 extract-text-webpack-plugin: 2.1.0

When I remove the sourceMap property or remove the property from the string like so:

{
            test: /\.(scss)$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: 'css-loader!sass-loader'})
        }

It runs just fine. If i added "?sourceMap" to the end of the loaders, that also breaks the build. From what I keep reading, it looks like it might be a versioning issue but I'm not sure. Any thoughts would be greatly appreciated.

Upvotes: 1

Views: 710

Answers (2)

Ari
Ari

Reputation: 1703

It's a versioning issue. webpack.LoaderOptionsPlugin was created to help with transitioning to the new syntax. Originally, loaders were only allowed to accept options/arguments as a a string. Webpack updated the syntax but some loaders haven't caught up or you have an older version or it might be you need to upgrade you version of webpack. I ran into a similar issue when I was upgrading webpack from 1x to 2x. Eventually, I updated to 3x and don't have that problem anymore.

Upvotes: 0

SwingCoder911
SwingCoder911

Reputation: 11

So it turns out I found a fix that worked here: https://github.com/bholloway/resolve-url-loader/issues/33#issuecomment-249830601

I have no idea why it worked which kinda bothers me. If someone has thoughts on why that worked, I'd love to hear it.

Upvotes: 0

Related Questions