Gulp error - Invalid Mapping + JSON.stringify

sage
1

I recently ran an npm update as well as a bower update to try to fix a slow gulp process on a basic wordpress (local) install using the Sage framework.

Once it was all updated, I ran gulp and am now getting this error:

/home/ubuntu/workspace/wp-content/themes/demoproject/node_modules/source-map/lib/source-map-generator.js:277
  throw new Error('Invalid mapping: ' + JSON.stringify({
  ^

Error: Invalid mapping: {"generated":{"line":1383,"column":17},"source":"../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix.scss","original":{"line":14,"column":-13},"name":null}
at SourceMapGenerator_validateMapping [as _validateMapping] (/home/ubuntu/workspace/wp-content/themes/demoproject/node_modules/source-map/lib/source-map-generator.js:277:13)
at SourceMapGenerator_addMapping [as addMapping] (/home/ubuntu/workspace/wp-content/themes/demoproject/node_modules/source-map/lib/source-map-generator.js:101:12)
at /home/ubuntu/workspace/wp-content/themes/demoproject/node_modules/concat-with-sourcemaps/index.js:60:28
at Array.forEach (native)
at SourceMapConsumer_eachMapping [as eachMapping] (/home/ubuntu/workspace/wp-content/themes/demoproject/node_modules/source-map/lib/source-map-consumer.js:155:14)
at Concat.add (/home/ubuntu/workspace/wp-content/themes/demoproject/node_modules/concat-with-sourcemaps/index.js:58:18)
at DestroyableTransform.bufferContents [as _transform] (/home/ubuntu/workspace/wp-content/themes/demoproject/node_modules/gulp-concat/index.js:68:12)
at DestroyableTransform.Transform._read (/home/ubuntu/workspace/wp-content/themes/demoproject/node_modules/readable-stream/lib/_stream_transform.js:159:10)
at DestroyableTransform.Transform._write (/home/ubuntu/workspace/wp-content/themes/demoproject/node_modules/readable-stream/lib/_stream_transform.js:147:83)
at doWrite (/home/ubuntu/workspace/wp-content/themes/demoproject/node_modules/readable-stream/lib/_stream_writable.js:347:64)

I’ve made sure node modules are fully updated, and can’t seem to find an answer. I’m not entirely sure where to look for the real reason in this error message (gulp newbie)…

Any suggestions would be great.

2

Same issue here. It looks like source-map ^0.5.* doesn’t know how to treat SASS’ ampersand.
Best way to ask on Github of babel-core or source-map packages thread.

1 Like
3

Is there a way to bypass this that you’ve seen? My dev is essentially stuck right now with this problem and I need to update the live site…

4

Yes, you have to include autoprefixer lib to avoid this issue:
npm install --save-dev gulp-autoprefixer

At the top of the file:
var autoprefixer = require(‘gulp-autoprefixer’);

My gulp SASS task looks like this, it can differ from yours, but you see where I’ve added autoprefixer here:

**return gulp.src(’./app/style/’ + config.MIS_CUSTOMER + ‘.scss’)
.pipe(sourcemaps.init())
.pipe(sass({
errLogToConsole: true

    })).on('error', sass.logError)
    .pipe(sourcemaps.write())
    .pipe(autoprefixer())
    .pipe(concat("main.css"))
    .pipe(gulp.dest('./public/'))
    .pipe(gulpFn(function(file) {
        io.emit("reload", { data: "reloaded - " + file.path });
        console.log(nowFormated(), "It's all - " + file.path);
    }));**
1 Like
5

I am experiencing this issue as well, but I already had autoprefixer in my Gulpfile.

I cleared all NPM modules and reinstalled the latest versions of all packages that were listed in package.json.

It still fails if I disable all gulp-sourcemaps calls.

Has anyone else come up with a solution?

6

Still unable to fix this issue. It is preventing from pushing any changes involving the gulp styles task.

I’ve tried various versions of the npm packages but all don’t seem to be running node-sass correctly.

Issue posted to the node-sass github page

Anyone experience gulp-sass / node-sass issues when re-installing npm packages? Could use any help I can get. Thanks!

7

Any luck with fixing this?

I’ve just encountered this when trying to make some updates to an older project based on Sage 8.2.1

For me, it’s happening on the same file as it was for aaronrobb - with clearfix.scss

At this point, the only thing I’ve found to work is to disable the sourcemaps from the dev environment

1 Like
8

This issue is caused by an upstream error in Libsass.

Replace gulp-minify-css with gulp-clean-css. Upgrade/downgrade gulp-sass to version 2.3.2.

This is how I fixed it

package.json

  "devDependencies": {
    "asset-builder": "^1.1.0",
    "bower": "^1.8.0",
    "browser-sync": "^2.18.12",
    "del": "^1.1.1",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-changed": "^1.2.1",
    "gulp-clean-css": "^3.5.0",
    "gulp-concat": "^2.6.1",
    "gulp-flatten": "0.0.4",
    "gulp-if": "^1.2.5",
    "gulp-imagemin": "^2.2.1",
    "gulp-jshint": "^1.9.4",
    "gulp-less": "^3.0.2",
    "gulp-load-plugins": "^0.10.0",
    "gulp-plumber": "^1.0.0",
    "gulp-rename": "^1.2.0",
    "gulp-rev": "^3.0.1",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^2.6.0",
    "gulp-uglify": "^1.1.0",
    "imagemin-pngcrush": "^4.0.0",
    "jshint-stylish": "^1.0.1",
    "lazypipe": "^1.0.1",
    "merge-stream": "^0.1.7",
    "minimist": "^1.1.1",
    "run-sequence": "^1.0.2",
    "traverse": "^0.6.6",
    "wiredep": "^2.2.2"
  }

in gulpfile.js

var cssTasks = function(filename) {
  return lazypipe()
    .pipe(function() {
      return gulpif(!enabled.failStyleTask, plumber());
    })
    .pipe(function() {
      return gulpif(enabled.maps, sourcemaps.init());
    })
    .pipe(function() {
      return gulpif('*.scss', sass({
        outputStyle: 'nested', // libsass doesn't support expanded yet
        precision: 10,
        includePaths: ['.'],
        errLogToConsole: !enabled.failStyleTask
      }));
    })
    .pipe(concat, filename)
    .pipe(autoprefixer, {
      browsers: [
        'last 2 versions',
        'ie 8',
        'ie 9',
        'android 2.3',
        'android 4',
        'opera 12'
      ]
    })
    .pipe(cleanCSS)
    .pipe(function() {
      return gulpif(enabled.rev, rev());
    })
    .pipe(function() {
      return gulpif(enabled.maps, sourcemaps.write('.', {
        sourceRoot: 'assets/styles/'
      }));
    })();
};
4 Likes
9

Stefan’s fix worked for me. Thank you!

10

Confirmed! Stenfan’s fix also worked for me. Thanks.

11

Me too! I was stuck on this very issue for almost two days, so I am very glad I came across this. Thanks Stefan!

12

gulp-sass 2.3.2 is having issues installing node-sass and isn’t working ugh

13

Yep, same problem here. In my case it’s because the node-sass version gulp-sass 2.3.2 uses doesn’t support Node 8 (see https://github.com/sass/node-sass/issues/2034). I believe you can work around that by downgrading to a previous version of Node–then you should be able to install gulp-sass 2.3.2.

If that’s not a good option for you, you can install the latest version of gulp-sass and disable source maps. In gulpfile.js, set enabled.maps to false. The below starts on line 55 in my gulpfile, but may be different in yours. The sixth line is the one to modify.

 // CLI options
var enabled = {
  // Enable static asset revisioning when `--production`
  rev: argv.production,
  // Disable source maps when `--production`
  maps: false,
  // Fail styles task on error when `--production`
  failStyleTask: argv.production,
  // Fail due to JSHint warnings only when `--production`
  failJSHint: argv.production,
  // Strip debug statments from javascript when `--production`
  stripJSDebug: argv.production
};
14

Thanks it looks like i’m going to have to do this as a workaround. Node 7 isn’t working for another package build I have on a new project.

Really hoping that there would be a Node 8 version with source maps, but it is looking like Sage 8 is being abandoned for Sage 9.

15

Downgrading gulp-sass to 2.3.2 worked for me.

16

None of these solutions worked for me, still get this error.

17

Hey @Tim_Eckel,

To confirm the steps you tried, here’s how to update gulp-sass and disable source maps:

npm install gulp-sass@latest -D

After that, your version of gulp-sass in package-lock.json should show up as 3.1.0 (or running npm list gulp-sass should print gulp-sass@3.1.0).

Set enabled.maps to false in gulpfile.js. That should be on or around line 58 unless you’ve significantly modified your gulpfile.

This:

maps: !argv.production,

Becomes this:

maps: false,

After those two steps, running guild build works for me again.

Does that match one of the solutions you tried?

18

This error showed up to me when I had to update Node.js to another project. First I got error with SASS so Ive ran npm install gulp-sass@latest -D, and then I got this Invalid Mapping error and I could fix with npm update locally.