Examples fail

[bencergazda]

I really appreciate your work with this loader and the sass-extract plugin, I think this is the long-sought chain link for my sass project. But unfortunately both examples fail on my localhost. I have node 6.9.4 installed, on Windows.

Both the 'basics' and the 'visual' examples fail with the following (or similar) error:

ERROR in ./~/sass-extract-loader!./src/gradient-rectangle/gradient-rectangle.scss
Module build failed: TypeError: Cannot read property 'injectedData' of undefined
    at makeExtractionCompileOptions (D:\Downloads\sass-extract-loader-master\examples\visual\node_modules\sass-extract\lib\extract.js:52:61)
    at D:\Downloads\sass-extract-loader-master\examples\visual\node_modules\sass-extract\lib\extract.js:101:36
    at tryCatcher (D:\Downloads\sass-extract-loader-master\examples\visual\node_modules\bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (D:\Downloads\sass-extract-loader-master\examples\visual\node_modules\bluebird\js\release\promise.js:512:31)
    at Promise._settlePromise (D:\Downloads\sass-extract-loader-master\examples\visual\node_modules\bluebird\js\release\promise.js:569:18)
    at Promise._settlePromise0 (D:\Downloads\sass-extract-loader-master\examples\visual\node_modules\bluebird\js\release\promise.js:614:10)
    at Promise._settlePromises (D:\Downloads\sass-extract-loader-master\examples\visual\node_modules\bluebird\js\release\promise.js:693:18)
    at Promise._fulfill (D:\Downloads\sass-extract-loader-master\examples\visual\node_modules\bluebird\js\release\promise.js:638:18)
    at Promise._resolveCallback (D:\Downloads\sass-extract-loader-master\examples\visual\node_modules\bluebird\js\release\promise.js:432:57)
    at Promise._settlePromiseFromHandler (D:\Downloads\sass-extract-loader-master\examples\visual\node_modules\bluebird\js\release\promise.js:524:17)
    at Promise._settlePromise (D:\Downloads\sass-extract-loader-master\examples\visual\node_modules\bluebird\js\release\promise.js:569:18)
    at Promise._settlePromise0 (D:\Downloads\sass-extract-loader-master\examples\visual\node_modules\bluebird\js\release\promise.js:614:10)
    at Promise._settlePromises (D:\Downloads\sass-extract-loader-master\examples\visual\node_modules\bluebird\js\release\promise.js:693:18)
    at Promise._fulfill (D:\Downloads\sass-extract-loader-master\examples\visual\node_modules\bluebird\js\release\promise.js:638:18)
    at PromiseArray._resolve (D:\Downloads\sass-extract-loader-master\examples\visual\node_modules\bluebird\js\release\promise_array.js:126:19)
    at PromiseArray._promiseFulfilled (D:\Downloads\sass-extract-loader-master\examples\visual\node_modules\bluebird\js\release\promise_array.js:144:14)
 @ ./src/gradient-rectangle/gradient-rectangle.js 4:12-68
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

When I am trying to use the module in my own project, webpack builds an empty JS file where I include sass-extract-loader like const styleVariables = require('sass-extract-loader!./style.scss');.

Am I doing something wrong?

Thank you in advance for your help.

UPDATE Looks like manually updating the sass-extract dependency version to ^0.4.0 for both examples solves the problem. Trying to figure out why still fails in my project...

[jgranstrom]

@bencergazda The error you get using the examples is due to a windows specific compatibility issue with sass-extract that was fixed in 0.4.0 so it is correct that you need to ensure that you are using that version or later. I have updated the examples accordingly.

Regarding the empty file generated in your project, can you please provide the build log from webpack when this happens, including the webpack version. It might be some other loader that is interfering with the extract loader which will show there.

Make sure to run webpack with the added flag --display-modules as in webpack --display-modules to ensure all modules are visible in the log

Please provide the output that looks something like this example:

Hash: 74a8b624c8c8cf2cd930
Version: webpack 1.15.0
Time: 727ms
        Asset     Size  Chunks             Chunk Names
app.bundle.js  17.8 kB       0  [emitted]  app
   [0] ./entry.js 133 bytes {0} [built]
   [1] ./test.scss 1.12 kB {0} [built]
   [2] ./~/css-loader!./~/sass-loader/lib/loader.js!./test.scss 184 bytes {0} [not cacheable] [built]
   [3] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
   [4] ./~/style-loader/lib/addStyles.js 8.7 kB {0} [built]
   [5] ./~/style-loader/lib/urls.js 3.01 kB {0} [built]
   [6] ./~/sass-extract-loader!./test.scss 291 bytes {0} [built]

Also, have you tried building your project with something very simple in the sass file like $foo: red; to see if it makes any difference?

[bencergazda]

@jgranstrom Thanks for your prompt answer. I've just made it work, the problem was really simple, I realized that webpack tries to use also the pre-configured css-loader. Disabling other loaders by const styleVariables = require('!!sass-extract-loader!./style.scss'); fixed.

I didn't get any error, just the following, but this was enough to find the problem:

Hash: 57c0c9109d9ec0bb2d16
Version: webpack 3.2.0 / grunt-webpack 3.0.2
Time: 78ms
           Asset     Size  Chunks             Chunk Names
../js/scripts.js  0 bytes    0, 0  [emitted]  js/scripts.js, js/scripts.js
   [4] ./public/src/js/scripts.js 395 bytes {0} [built]
  [15] ./node_modules/sass-extract-loader!./public/src/js/style.scss 1.42 kB {0} [built]
    + 14 hidden modules
Child extract-text-webpack-plugin D:\localhost\sergeant-sandbox\node_modules\extract-text-webpack-plugin\dist D:\localhost\sergeant-sandbox\node_modules\css-loader\index.js!
D:\localhost\sergeant-sandbox\node_modules\postcss-loader\lib\index.js??ref--4-3!D:\localhost\sergeant-sandbox\node_modules\sass-loader\lib\loader.js??ref--4-4!D:\localhost\
sergeant-sandbox\public\src\js\style.scss:
       [2] ./node_modules/css-loader!./node_modules/postcss-loader/lib?{"plugins":[null]}!./node_modules/sass-loader/lib/loader.js?{"outputStyle":"expanded","data":"$env: /"
undefined/" !default;$dev: /"false/" !default;"}!./public/src/js/style.scss 169 bytes {1} [built]
        + 1 hidden module

Your plugin is really killer! :-)

Now I'm gonna make my Sass @import("~...")-s work.

[jgranstrom]

Great to hear that you sorted it out. I'm sure this can be the case for some configurations.

It would be interesting to see how you have configured your default loaders and how you import your style files to see if we can make this more consistent.

I tested an example with the following webpack configuration

const path = require('path');
const webpack = require('webpack');
module.exports = {
  context: path.resolve(__dirname, './'),
  entry: {
    app: './entry.js',
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, './'),
    filename: '[name].bundle.js',
  },
};

A very simple entrypoint file:

require('./test.scss');
const styleVariables = require('sass-extract-loader!./test.scss');
console.log(styleVariables);

Importing the file twice, first using the defaults to get the css, and then with the extract loader without using the skip flags (!!).

For this example the css is applied to the page and variables are extracted correctly. I also tested this with an import statement which worked without any issues. Maybe you are using some additional plugins that might change this behavior in some way, such as the extract css plugin?

I'd be happy to hear if you find something else related to this that can be improved!

[jgranstrom]

I will close this since the original issue is resolved. Feel free to reopen it or make another issue if you have any more troubles

[bencergazda]

I checked the @import-s in a reduced test environment.

@import './styles.scss'; work perfectly, but fails when trying to @import 'partials/partial1' where the filename of partial1 is _partial1.scss. This is an allowed importing syntax in Sass, but unfortunately sass-extract-loader breaks with the originally mentioned [Module build failed: TypeError: Cannot read property 'injectedData' of undefined](https://github.com/jgranstrom/sass-extract-loader/issues/1#issue-242670604) error.

The second case when it fails is when using the @import '~...' syntax, so with the tilde prefix. This also works for other loaders, e.g. the sass-loader.

Unfortunately I don't really understand how Webpack resolves these imports yet, whether the loader allows supporting more the "official" syntax, but if so, it would be cool. :-)

Update

Now I see you launched new version for both plugins. I'm going to check it, hopefully today. :-)

[jgranstrom]

@bencergazda check out the newest sass-extract version 0.5.1, this will fix the issues with partials.

Regarding the tilde there is a lot of factors with the environment etc that can impact how this works. For now one option for you is to add the home path to includePaths for both the sass-loader and sass-extract-loader and import those files without a tilde. In the webpack configuration you can simply use require('os').homedir().