Get error: `TypeError: isPlainObject is not a function`

howiezhao commented 2 years ago

Before you open this issue, please complete the following tasks:

[x] use the search bar at the top of the page to search this repository for similar issues or discussions that have already been opened.
[x] if you are looking for help from the gulp team or community, open a discussion.
[x] if you think there is a problem with the plugin you're using, open a discussion.
[x] if you think there is a bug in our code, open this issue.

What were you expecting to happen?

When I use the gulp command I expect it to work.

What actually happened?

When I use the gulp command, the program reports an error and exits abnormally.

Please give us a sample of your gulpfile

////////////////////////////////
// Setup
////////////////////////////////

// Gulp and package
const {src, dest, parallel, series, watch} = require('gulp');
const pjson = require('./package.json');

// Plugins
const autoprefixer = require('autoprefixer');
const browserSync = require('browser-sync').create();

const concat = require('gulp-concat');

const cssnano = require('cssnano');
const imagemin = require('gulp-imagemin');
const pixrem = require('pixrem');
const plumber = require('gulp-plumber');
const postcss = require('gulp-postcss');
const reload = browserSync.reload;
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const spawn = require('child_process').spawn;
const uglify = require('gulp-uglify-es').default;

const compilerPackage = require('google-closure-compiler');
const closureCompiler = compilerPackage.gulp();
CLOSURE_COMPILER_CONTRIB_PATH = './node_modules/google-closure-compiler/contrib'; // a bug made it has to be that
const sourcemaps = require('gulp-sourcemaps');
const closureDeps = require('gulp-google-closure-deps');
const gulpDebug = require('gulp-debug');

// Relative paths function
function pathsConfig(appName) {
    this.app = `./${pjson.name}`;
    const vendorsRoot = 'node_modules';

    return {

        bootstrapSass: `${vendorsRoot}/bootstrap/scss`,
        vendorsJs: [
            `${vendorsRoot}/jquery/dist/jquery.slim.js`,
            `${vendorsRoot}/popper.js/dist/umd/popper.js`,
            `${vendorsRoot}/bootstrap/dist/js/bootstrap.js`,
        ],

        app: this.app,
        templates: `${this.app}/templates`,
        css: `${this.app}/static/css`,
        sass: `${this.app}/static/sass`,
        fonts: `${this.app}/static/fonts`,
        images: `${this.app}/static/images`,
        js: `${this.app}/static/js`,
    }
}

var paths = pathsConfig();

////////////////////////////////
// Tasks
////////////////////////////////

// Styles autoprefixing and minification
function styles() {
    var processCss = [
        autoprefixer(), // adds vendor prefixes
        pixrem(),       // add fallbacks for rem units
    ];

    var minifyCss = [
        cssnano({preset: 'default'})   // minify result
    ];

    return src(`${paths.sass}/project.scss`)
        .pipe(sass({
            includePaths: [

                paths.bootstrapSass,

                paths.sass
            ]
        }).on('error', sass.logError))
        .pipe(plumber()) // Checks for errors
        .pipe(postcss(processCss))
        .pipe(dest(paths.css))
        .pipe(rename({suffix: '.min'}))
        .pipe(postcss(minifyCss)) // Minifies the result
        .pipe(dest(paths.css))
}

// Closure Library dependency file generation
function scriptsDeps() {
    return src([
        `${paths.js}/**/*.js`,
        `!${paths.js}/*.min.js`,
        `!${paths.js}/deps.js`,
        `!${paths.js}/vendors.js`,
        // `!${paths.js}/echarts.min.js`,
        `!${paths.js}/ext/*.js`,
    ], {base: paths.js})
        .pipe(gulpDebug({title: 'selected files: '}))
        .pipe(closureDeps({'closurePath': './node_modules/google-closure-library/closure/goog'}))
        .pipe(rename('deps.js'))
        .pipe(dest(paths.js))
}

// Javascript minification with Closure Compiler
function scriptsCompile() {
    return src([
        `${paths.js}/**/*.js`,
        './node_modules/google-closure-library/closure/goog/**/*.js',
        '!./node_modules/google-closure-library/closure/goog/**/*_test.js',
        `!${paths.js}/*.min.js`,
        `!${paths.js}/vendors.js`,
        // `!${paths.js}/echarts.min.js`,
        `!${paths.js}/ext/*.js`,
    ], {base: paths.js})
        //.pipe(gulpDebug({title: 'selected files: '}))
        .pipe(sourcemaps.init())
        .pipe(closureCompiler({
            externs: [CLOSURE_COMPILER_CONTRIB_PATH + '/externs/jquery-3.3.js',
                `${paths.js}/ext/quill.ext.js`,
                `${paths.js}/ext/local_externs.js`,
            ],
            dependency_mode: 'STRICT',
            entry_point: 'goog:tpub.main',
            compilation_level: 'ADVANCED',
            warning_level: 'VERBOSE',
            language_in: 'ECMASCRIPT_2019',
            language_out: 'ECMASCRIPT5_STRICT',
            output_wrapper: '(function(){%output%}).call(this)',
            js_output_file: 'project.min.js'
        }, {
            platform: ['native', 'java', 'javascript']
        }))
        .pipe(sourcemaps.write('/')) // gulp-sourcemaps automatically adds the sourcemap url comment
        .pipe(dest(paths.js))
}

const scripts = series(scriptsDeps, scriptsCompile);

// Vendor Javascript minification
function vendorScripts() {
    return src(paths.vendorsJs)
        .pipe(sourcemaps.init())
        .pipe(concat('vendors.js'))
        .pipe(dest(paths.js))
        .pipe(plumber()) // Checks for errors
        .pipe(uglify()) // Minifies the js
        .pipe(rename({suffix: '.min'}))
        .pipe(sourcemaps.write('/')) // gulp-sourcemaps automatically adds the sourcemap url comment
        .pipe(dest(paths.js))
}

// Generate all assets
const generateAssets = parallel(
    styles,
    scripts,
    vendorScripts
);

exports["generate-assets"] = generateAssets;

Terminal output / screenshots

$ gulp generate-assets
/app/node_modules/copy-props/index.js:16
  if (isPlainObject(fromto)) {
      ^
TypeError: isPlainObject is not a function
    at module.exports (/app/node_modules/copy-props/index.js:16:7)
    at mergeConfigToCliFlags (/app/node_modules/gulp/node_modules/gulp-cli/lib/shared/config/cli-flags.js:16:10)
    at Liftoff.<anonymous> (/app/node_modules/gulp/node_modules/gulp-cli/index.js:100:12)
    at Liftoff.prepare (/app/node_modules/liftoff/index.js:173:6)
    at run (/app/node_modules/gulp/node_modules/gulp-cli/index.js:92:7)
    at Object.<anonymous> (/app/node_modules/gulp/bin/gulp.js:3:20)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! branchly@0.1.0 build: `gulp generate-assets`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the branchly@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2022-07-31T16_46_45_842Z-debug.log

Please provide the following information:

OS & version [e.g. MacOS Catalina 10.15.4]: node:10-stretch-slim docker image
node version (run node -v): node:10-stretch-slim docker image
npm version (run npm -v): node:10-stretch-slim docker image
gulp version (run gulp -v): 4.0.2

Additional information

It looks like gulp depends on gulp-cli, and gulp-cli depends on copy-props, when I downgraded copy-props to 2.0.4 everything works as usual, is it related to the 2.0.5 update is-plain-object version?

sttk commented 2 years ago

@howiezhao Yes, copy-props@>=2.0.5 uses is-plain-object@^5.0.0. (copy-props@<=2.0.4 uses is-plain-object@^2.0.1)

sttk commented 2 years ago

@howiezhao I tried your gulpfile.js, and gulp is work normally. If you use package-lock.json, please npm install again after removing it.

devDependencies of package.json is as follows:

{
   ...
  "devDependencies": {↲
    "autoprefixer": "^10.4.8",↲
    "browser-sync": "^2.27.10",↲
    "cssnano": "^5.1.12",↲
    "google-closure-compiler": "^20220719.0.0",↲
    "gulp": "^4.0.2",↲
    "gulp-concat": "^2.6.1",↲
    "gulp-debug": "^4.0.0",↲
    "gulp-google-closure-deps": "0.0.5",↲
    "gulp-imagemin": "^7.1.0",↲
    "gulp-plumber": "^1.2.1",↲
    "gulp-postcss": "^9.0.1",↲
    "gulp-rename": "^2.0.0",↲
    "gulp-sass": "^5.1.0",↲
    "gulp-sourcemaps": "^3.0.0",↲
    "gulp-uglify-es": "^3.0.0",↲
    "pixrem": "^5.0.0",↲
    "postcss": "^8.4.14"↲
  }↲
}

And the result is as follows: (gulp-sass causes an error)

$ node -v
v10.23.0
$ npm -v
6.14.8
$ npx gulp generate-assets
[22:25:33] Using gulpfile ~/home/play/daily/20220801/gulpjs/trial/gulpfile.js
[22:25:33] Starting 'generate-assets'...
[22:25:33] Starting 'styles'...
[22:25:33] Starting 'vendorScripts'...
Error in plugin "gulp-sass"
Message:

gulp-sass no longer has a default Sass compiler; please set one yourself.
...

phated commented 2 years ago

Going to close this as, like @sttk stated, it's a dependency lockfile issue.

gulpjs / copy-props