Error: Cannot find module ' gulp-sass' - npm

I'm having trouble getting gulp to read my modules.
Initially I had a working system.
I then upgraded to with NVM (I removed everything installed with Brew first)
Here's what I have now:
"node: v6.11.2"
"npm: 3.10.10"
"nvm"
and I have a gulpfile which used to work, but I also upgraded my modules, and I have installed locally in my project:
"gulp": "^3.9.1",
"gulp-pug": "^3.3.0",
"gulp-sass": "^3.1.0"
globally for this version of node I do have:
gulp-cli#1.4.0
jshint#2.9.5
npm#3.10.10
in a simple gulpfile running: gulp would work successfully, but introducing other modules is where I started getting issues.
In my gulpfile I have for example:
var gulp = require('gulp');
var sass = require(' gulp-sass'),
prefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-clean-css'),
sourcemaps = require('gulp-sourcemaps'),
rename = require("gulp-rename");
gulp.task('sass', function () {
return gulp.src(src.sass)
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(prefixer())
.pipe(gulp.dest(src.css))
.pipe(minifycss())
.pipe(rename({suffix: '.min'}))
.pipe(sourcemaps.write('/maps'))
.pipe(gulp.dest(src.css))
.pipe(connect.reload());
});
..locally running any command like gulp sass would produce:
Error: Cannot find module ' gulp-sass'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Users/myusername/sites/projectname/gulpfile.js:25:12)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
I've removed the node_modules, removed the dependancies in package.json, reinstalled each local module

' gulp-sass' should be 'gulp-sass'

You are injecting a package with an additional space in the beginning of the package name. Remove the space and try it again.
var sass = require(' gulp-sass'),
should be
var sass = require('gulp-sass'),

Related

Error: Cannot find module 'symbol-observable' in Angular

I'm getting the below error while running ng new. Tried with cmd opening as Administrator, but not helping.
D:\Training\Angular>ng new test
internal/modules/cjs/loader.js:797
throw err;
^
Error: Cannot find module 'symbol-observable'
Require stack:
- C:\Users\mubarakm\AppData\Roaming\npm\node_modules\#angular\cli\lib\init.js
- C:\Users\mubarakm\AppData\Roaming\npm\node_modules\#angular\cli\bin\ng
←[90m at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)←[39m
←[90m at Function.Module._load (internal/modules/cjs/loader.js:687:27)←[39m
←[90m at Module.require (internal/modules/cjs/loader.js:849:19)←[39m
←[90m at require (internal/modules/cjs/helpers.js:74:18)←[39m
at Object.<anonymous> (C:\Users\mubarakm\AppData\Roaming\npm\node_modules\←[4m#angular←[24m\cli\lib\init.js:10:1)
←[90m at Module._compile (internal/modules/cjs/loader.js:956:30)←[39m
←[90m at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)←[39m
←[90m at Module.load (internal/modules/cjs/loader.js:812:32)←[39m
←[90m at Function.Module._load (internal/modules/cjs/loader.js:724:14)←[39m
←[90m at Module.require (internal/modules/cjs/loader.js:849:19)←[39m {
code: ←[32m'MODULE_NOT_FOUND'←[39m,
requireStack: [
←[32m'C:\\Users\\mubarakm\\AppData\\Roaming\\npm\\node_modules\\#angular\\cli\\lib\\init.js'←[39m,
←[32m'C:\\Users\\mubarakm\\AppData\\Roaming\\npm\\node_modules\\#angular\\cli\\bin\\ng'←[39m
]
}
npm i --save symbol-observable (or Yarn, then, Yarn add symbol-observable)
npm install (or Yarn)
npm outdated (or yarn outdated) to check for outdated dependencies(symbol-observable) then upgrading it to the corresonding version if needed by entering yarn upgrade symbol-observable #[version]
Else,
check if you import it correctly from
import { Observable } from 'rxjs/Observable';
to
import { Observable } from 'rxjs';
otherwise,you may have Rxjs issues as mentionned here https://github.com/angular/angular-cli/issues/4756
Simply check for any outdated dependencies using "npm outdated", and if there are any update the angular cli using command "npm update -g #angular/cli", should be good to go.

Error compiling scss using sass in intellij filewatchers

I have followed this tutorial: https://www.jetbrains.com/help/idea/transpiling-sass-less-and-scss-to-css.html#install_sass_scss and created a file watcher for my scss file. Picture of file watcher settings in intellij
Using node.js version 14.15.1
The error message in console:
cmd.exe /D /C call C:\Users\***\AppData\Roaming\npm\sass.cmd main.scss:main.css
C:\Users\***\AppData\Roaming\npm\node_modules\sass\node_modules\chokidar\index.js:3
const { EventEmitter } = require('events');
^^^^^
SyntaxError: Use of const in strict mode.
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (C:\Users\Inni\AppData\Roaming\npm\node_modules\sass\sass.dart.js:116:17)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
Process finished with exit code 1
Any help is greatly appreciated! Thanks.
What Node.js version do you use? Looks as if it's outdated and doesn't support even basic ES6 syntax.
Sass requires Node.js 10 or higher, see https://github.com/sass/dart-sass#nodejs-compatibility

Why am I getting gulp-changed error?

My gulpfile is below -
'use strict';
//dependencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = requrie('gulp-changed');
Error after runnning gulp.
Error is for var changed = requrie('gulp-changed'); -
ReferenceError: requrie is not defined
at Object.<anonymous> (/home/lap1/Desktop/ReactJS/react-
test/gulpfile.js:9:15)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at execute (/usr/lib/node_modules/gulp-
cli/lib/versioned/^3.7.0/index.js:28:18)
at Liftoff.handleArguments (/usr/lib/node_modules/gulp-
cli/index.js:175:63)
Gulp version - 3.9.1
React native version - 2.0.1
I have installed all the dependencies both globally and for the project alone.
there iss a spelling mistake
Replace this
var changed = requrie('gulp-changed');
by
var changed = require('gulp-changed');

Webpack migration 3 -> 4: Error: Cannot find module 'webpack/lib/optimize/CommonsChunkPlugin'

I'm trying to migrate from webpack 3 to webpack 4.
The issue I have is with CommonsChunkPlugin, when I try to run webpack (npm run webpack-dev-server -- --config config/webpack.dev.js), I have the following error:
module.js:529
throw err;
^
Error: Cannot find module 'webpack/lib/optimize/CommonsChunkPlugin'
at Function.Module._resolveFilename (module.js:527:15)
at Function.Module._load (module.js:476:23)
at Module.require (module.js:568:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/antoinepissot/DEV/Reports/config/webpack.common.js:17:28)
at Module._compile (module.js:624:30)
at Object.Module._extensions..js (module.js:635:10)
at Module.load (module.js:545:32)
at tryModuleLoad (module.js:508:12)
at Function.Module._load (module.js:500:3)
What is causing this issue ?
I looked at the change log on webpack github and found that CommonsChunkPlugin has been removed
But when I look at the webpack documentation, I can find CommonsChunkPlugin for version 4.1.1
My gut feeling is telling me that CommonsChunkPlugin is deprecated and we should use optimization.splitChunks.
Did anyone experienced the issue and found a good tutorial to migrate from version 3 to 4 ?
As Vardius pointed out in his comment, CommonsChunkPlugin was removed.
In webpack 4, this behaviour is done using "optimization" field at the root of webpack config.
For instance, this is how my webpack.config.js looks like now:
module.exports = function () {
return {
resolve: ...
module: ...
plugins: ...
optimization: {
namedModules: true, // old NamedModulesPlugin()
splitChunks: { // old CommonsChunkPlugin
chunks: "all"
},
runtimeChunk: true,
concatenateModules: true // old ModuleConcatenationPlugin
}
}

font-awesome webpack SyntaxError: Invalid or unexpected token

I'm new to webpack and I'm having trouble getting font-awesome to install in my React set up.
Webpack V2.2.1
React starter kit
I've run:
npm install font-awesome --save-dev
Then in my main .scss file, I'm calling:
$fa-font-path: "~font-awesome/fonts";
#import "~font-awesome/scss/font-awesome";
And in my webpack.config.js I've got:
...
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff)(\?.*)?$/,
loader: 'file-loader',
...
But on compile: yarn start I get the error:
webpack: Compiled successfully.
..\node_modules\font-awesome\fonts\fontawesome-webfont.eot:1
(function (exports, require, module, __filename, __dirname) { n�
^
SyntaxError: Invalid or unexpected token
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (..\build\webpack:\external "font-awesome\fonts\fontawesome-webfont.eot":1:1)
at __webpack_require__ (..\build\webpack:\webpack\bootstrap 4b3091487663b7b04c64:19:1)
Is this a problem with my webpack setup? A problem with the loaders? Or a problem with paths? Or a problem with the fonts themselves?
Any help would be amazing.
As wuxiandiejia said, the problem was solved here by using a relative path - Even though looking at the error output, webpack was already looking in the correct place with the ~ declaration. Strange.
So instead of:
$fa-font-path: "~font-awesome/fonts";
#import "~font-awesome/scss/font-awesome";
I've used:
$fa-font-path: "../../../node_modules/font-awesome/fonts";
#import "../../../node_modules/font-awesome/scss/font-awesome";
And all seems to work!