Upgrade from Angular 7 to Angular 8 node-sass error

[ryandegruyter]

Issue description or question

Upgrade from Angular 7 to Angular 8 node-sass error.
When starting wallabyjs, we're getting the following:

Uncaught Error: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:690:17)
at Module.r.require (/Users/x/Library/Caches/IntelliJIdea2019.1/wallaby/wallaby/server.js:21:23293)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.sassLoader (/Users/x/x/laq-webyourservice/node_modules/sass-loader/lib/loader.js:46:72)

We didn't have the issue with the previous Angular version.

Wallaby.js configuration file

var wallabyWebpack = require('wallaby-webpack');
var path = require('path');

var compilerOptions = Object.assign(
  require('./tsconfig.json').compilerOptions,
  require('./src/tsconfig.spec.json').compilerOptions);

module.exports = function (wallaby) {

  var webpackPostprocessor = wallabyWebpack({
    entryPatterns: [
      'src/wallabyTest.js',
      'src/**/*spec.js',
      'src/test/helpers/globals.js',
    ],

    module: {
      rules: [
        {test: /\.css$/, loader: ['raw-loader']},
        {test: /\.html$/, loader: 'raw-loader'},
        {
          test: /\.ts$/,
          loader: '@ngtools/webpack',
          include: /node_modules/,
          query: {tsConfigPath: 'src/tsconfig.spec.json'}
        },
        {test: /\.js$/, loader: 'angular2-template-loader', exclude: /node_modules/},
        {
          test: /\.scss$|\.sass$/, loaders: [
            'raw-loader',
            {loader: 'sass-loader', options: {includePaths: ['./src/sass']}}
          ]
        },
        {test: /\.(jpg|png|svg)$/, loader: 'raw-loader'}
      ]
    },

    resolve: {
      extensions: ['.js', '.ts'],
      modules: [
        path.join(wallaby.projectCacheDir, 'src'),
        'node_modules'
      ]
    },
    node: {
      fs: 'empty',
      net: 'empty',
      tls: 'empty',
      dns: 'empty'
    }
  });

  return {
    files: [
      {pattern: 'src/**/*.+(ts|css|less|scss|sass|styl|html|json|svg)', load: false},
      {pattern: 'src/**/*.d.ts', ignore: true},
      {pattern: 'src/**/*spec.ts', ignore: true}
    ],

    tests: [
      {pattern: 'src/**/*spec.ts', load: false},
      {pattern: 'src/**/*e2e-spec.ts', ignore: true}
    ],

    testFramework: 'jasmine',

    compilers: {
      '**/*.ts': wallaby.compilers.typeScript(compilerOptions)
    },

    middleware: function (app, express) {
      var path = require('path');
      app.use('/favicon.ico', express.static(path.join(__dirname, 'src/favicon.ico')));
      app.use('/assets', express.static(path.join(__dirname, 'src/assets')));
    },

    env: {
      kind: 'chrome',
      params: {
        runner: '--headless --disable-gpu --disable-web-security'
      }
    },

    postprocessor: webpackPostprocessor,

    setup: function () {
      window.__moduleBundler.loadTests();
    },

    debug: true
  };
};

Code editor or IDE name and version

IntelliJ IDEA v2019.1

OS name and version

OSX 10.13.6

[NikGovorov]

Hi @ryandegruyter,

Starting from Angular CLI 8, javascript implementation of sass is used by default. Please make the following changes to your configuration file:

var wallabyWebpack = require('wallaby-webpack');
var path = require('path');

var compilerOptions = Object.assign(
 require('./tsconfig.json').compilerOptions,
 require('./src/tsconfig.spec.json').compilerOptions);

module.exports = function (wallaby) {

 var webpackPostprocessor = wallabyWebpack({
   entryPatterns: [
     'src/wallabyTest.js',
     'src/**/*spec.js',
     'src/test/helpers/globals.js',
   ],

   module: {
     rules: [
       {test: /\.css$/, loader: ['raw-loader']},
       {test: /\.html$/, loader: 'raw-loader'},
       {
         test: /\.ts$/,
         loader: '@ngtools/webpack',
         include: /node_modules/,
         query: {tsConfigPath: 'src/tsconfig.spec.json'}
       },
       {test: /\.js$/, loader: 'angular2-template-loader', exclude: /node_modules/},
      {
        test: /\.scss$|\.sass$/, loaders: [
          'raw-loader',
-        {loader: 'sass-loader', options: {includePaths: ['./src/sass']}}
+        {loader: 'sass-loader', options: {implementation: require('sass'), includePaths: ['./src/sass']}}
        ]
      },
       {test: /\.(jpg|png|svg)$/, loader: 'raw-loader'}
     ]
   },

   resolve: {
     extensions: ['.js', '.ts'],
     modules: [
       path.join(wallaby.projectCacheDir, 'src'),
       'node_modules'
     ]
   },
   node: {
     fs: 'empty',
     net: 'empty',
     tls: 'empty',
     dns: 'empty'
   }
 });

 return {
   files: [
     {pattern: 'src/**/*.+(ts|css|less|scss|sass|styl|html|json|svg)', load: false},
     {pattern: 'src/**/*.d.ts', ignore: true},
     {pattern: 'src/**/*spec.ts', ignore: true}
   ],

   tests: [
     {pattern: 'src/**/*spec.ts', load: false},
     {pattern: 'src/**/*e2e-spec.ts', ignore: true}
   ],

   testFramework: 'jasmine',

   compilers: {
     '**/*.ts': wallaby.compilers.typeScript(compilerOptions)
   },

   middleware: function (app, express) {
     var path = require('path');
     app.use('/favicon.ico', express.static(path.join(__dirname, 'src/favicon.ico')));
     app.use('/assets', express.static(path.join(__dirname, 'src/assets')));
   },

   env: {
     kind: 'chrome',
     params: {
       runner: '--headless --disable-gpu --disable-web-security'
     }
   },

   postprocessor: webpackPostprocessor,

   setup: function () {
     window.__moduleBundler.loadTests();
   },

   debug: true
 };
};

You could also install native node-sass module manually by executing npm install node-sass --save-dev and your configuration should start to work.

[ryandegruyter]

Perfect, thanks!