I am updating a PostCSS plugin to use PostCSS 8, and I am struggling with this error:
TypeError: vars(...) is not a function
The plugin is referenced in the code like so:
var vars = require('postcss-simple-vars');
...
vars({ only: value })(content);
The plugin was able to make this call before I updated the packages for it, but I'm not sure which one is breaking it. I've tried looking at the source code for postcss-simple-vars but I'm not understanding how this call isn't working.
These are the dependencies BEFORE upgrading:
"dependencies": {
"postcss": "^5.0.0",
"postcss-simple-vars": "^2.0.0"
},
"devDependencies": {
"chai": "3.2.0",
"gulp": "3.9.0",
"gulp-eslint": "0.11.1",
"gulp-mocha": "2.1.3",
"postcss-custom-properties": "^5.0.1"
}
AFTER updating packages:
"dependencies": {
"postcss-simple-vars": "^6.0.3"
},
"peerDependencies": {
"postcss": "^8.0.0"
},
"devDependencies": {
"chai": "4.3.6",
"gulp": "4.0.2",
"gulp-eslint": "6.0.0",
"gulp-mocha": "8.0.0",
"postcss": "^8.0.0",
"postcss-custom-properties": "^12.1.8"
}
The issue seems to be that postcss-simple-vars isn't importing as a function anymore, but I don't know why.
UPDATE
I managed to get it to at least partially compile using this invocation:
const {root} = postcss([vars({ only: value })]).process(content)
My issue with this is that it kind of goes against the principles of PostCSS 8. They mention in their migration guide that you really shouldn't have to import the postcss package anymore to perform operations in a plugin. Though this is technically performing an operation using a separate plugin, it still feels like it could potentially cause performance issues. I don't think I'm smart enough to know how or why though.
I don't know why am I getting the following error which say:
Error: Debug Failure. False expression: Non-string value passed to `ts.resolveTypeReferenceDirective`, likely by a wrapping package working with an outdated `resolveTypeReferenceDirectives` signature. This is probably not a problem in TS itself.
When i try to import the package inquirer in my nodejs application.
console.log("Hello world!");
import inquirer from "inquirer";
....
To run the application I'm using ts-node and I'm running it as follows:
ts-node index.ts
This is my package.json file:
{
....
"dependencies": {
"chalk": "^4.1.2",
"cors": "^2.8.5",
"cross-fetch": "2.6.1",
"dotenv": "^16.0.1",
"inquirer": "^8.2.4",
"ts-node": "^10.8.1",
"typescript": "^4.7.3"
},
"devDependencies": {
"#types/chalk": "^2.2.0",
"#types/cors": "^2.8.12",
"#types/inquirer": "^8.2.1",
"#types/node": "^17.0.42",
"nodemon": "^2.0.16",
"ts-node-dev": "^2.0.0"
}
....
}
I've tried to change the versions of inquirer and typescript but still it did not work.
What can be possibly the problem.
I have met with the same error but in my case I had no ts-node dependency installed, I fixed the error by adding that dependency.
You can also try to run your application with npx, in your case that will be npx ts-node index.ts.
I have a gulp project I inherited.
I am supposed to be migrating gulp v3 to v4.
However, I cannot find a gulpfile.js in this project at all.
Yet, every tutorial requires one. I am assuming there is some setup where the last developer knew about which is probably outdated?
Here is my folder structure:
All tasks are grouped in the Tasks folder. I want to say these exported with the root files which actually run those tasks files are my "gulpfiles".
All gulp tasks are ran using: node platform/build.js or node platform/deploy.js
I can make changes to this and everything, I see how he called it and wrote tasks. But I don't know the paradigm he is using to do this so it's difficult to know where to start migrating this to gulp v4.
Gulp libraries we are using:
"gulp": "3.9.1",
"gulp-autoprefixer": "6.0.0",
"gulp-bundle-assets": "2.29.0",
"gulp-concat": "2.6.1",
"gulp-csso": "3.0.1",
"gulp-data": "1.3.1",
"gulp-ejs": "3.3.0",
"gulp-empty": "0.1.2",
"gulp-eslint": "5.0.0",
"gulp-htmlmin": "5.0.1",
"gulp-if": "2.0.2",
"gulp-imagemin": "5.0.3",
"gulp-rename": "1.4.0",
"gulp-replace": "1.0.0",
"gulp-rimraf": "0.2.2",
"gulp-sass": "3.2.1",
"gulp-sass-lint": "1.4.0",
"gulp-sourcemaps": "2.6.5",
"gulp-string-replace": "1.1.2",
"gulp-strip-comments": "2.5.2",
"gulp-webserver": "0.9.1",
How it runs gulptasks:
// STEP 1 - process.env.NODE_ENV to staging
(!process.env.NODE_ENV) && (process.env.NODE_ENV = 'staging');
// STEP 2 - Prevent from running on NON-CI
if (!process.env.CI) {
throw new Error('Build can only be performed in CI Environment');
}
// START PROCESS
const _ = require('lodash'),
gulp = require('gulp'),
Tasks = require('./tasks'),
runSequence = require('run-sequence').use(gulp),
// This of the tasks here is the order in which they will executed
taskMap = {
'clean:dist': Tasks.cleanDist,
'clean:tmp': Tasks.cleanTemp,
'copy:assets': Tasks.assetCopy,
'bundle': Tasks.bundleAssets,
'transpile': Tasks.transpile,
'prefixCss': Tasks.autoprefixCss,
'sitemap': Tasks.sitemap,
'robots': Tasks.robots,
'remove:htmlext': Tasks.removeHtmlExt
};
// Create all tasks
_.forEach(taskMap, (value, key) => {
gulp.task(key, value);
});
// #todo: Shift to using gulp.series when gulp is upgraded to v4
gulp.series(..._.keys(taskMap))();
A gulpfile is really just a chunk of Javascript code - it's named with a default name so when you run gulp it finds it by default.
You actually have gulpfiles - they're each of those individual .js files you're talking about.
I suspect they were split up this way because somebody thought there were too many tasks in each one and wanted to separate them by "topic" somehow.
I inherited a project that used Gulp with no gulpfile a while back. It turned out it was actually inside of a shared gulpfile which was hosted on npm (like https://github.com/jonathantneal/gulp-config-dev). Long shot, but perhaps it's listed as a dependency in package.json.
I haven't found a solution for my problem, so I thought it is a bug and posted an Issue at gulp-babel's github repository. Link here.
But, maybe this is a better place to ask for help with these type of things.
It is actually the first time I'm using gulp, so it may be easy to fix.
Here is the problem:
gulpfile.js:
const gulp = require('gulp');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
gulp.task('bundle', () => {
return gulp
.src([
'src/js/definitions.js',
'src/js/models/Object.js',
'src/js/models/!(Object)*.js',
'src/js/!(definitions)*.js'
])
.pipe(babel({ //
presets: ['env'] // Problem is here
})) //
.pipe(concat('bundle.js'))
.pipe(gulp.dest('dist'));
});
package.json
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"gulp": "^3.9.1",
"gulp-babel": "^7.0.1"
"gulp-concat": "^2.6.1"
}
Error:
Uncaught TypeError: Object.create is not a function at _inherits
Cannot post images, since I have not enough reputation. Sorry.
Some of my classes inherits from another, that is the problem, but is there a solution?
Thanks
When I try to include braintree-angular into my gulp-angular project, I get the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module notecards due to:
Error: [$injector:modulerr] Failed to instantiate module braintree-angular due to:
Error: [$injector:nomod] Module 'braintree-angular' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I routinely run into issues loading newly install modules in gulp-angular projects, and I believe it comes from a general lack of understanding in how gulp works. The gulp portion of this project was setup by a coworker. If someone could explain why I continue to see issues like this, it would be much appreciated!
I have checked the following:
The module is correctly installed in my /node_modules folder.
The module appears correctly in my package.json.
The entire folder is readable (I've previously had issues with file permissions causing this. This is not the case here.)
The braintree-angular files are not being loaded by gulp.
gulp/server.js
'use strict';
var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');
//var babel = require('gulp-babel');
var browserSync = require('browser-sync');
var browserSyncSpa = require('browser-sync-spa');
var util = require('util');
var proxyMiddleware = require('http-proxy-middleware');
function browserSyncInit(baseDir, browser) {
browser = browser === undefined ? 'default' : browser;
var routes = null;
if (baseDir === conf.paths.src || (util.isArray(baseDir) && baseDir.indexOf(conf.paths.src) !== -1)) {
routes = {
'/bower_components': 'bower_components'
};
}
var server = {
baseDir: baseDir,
routes : routes
};
/*
* You can add a proxy to your backend by uncommenting the line below.
* You just have to configure a context which will we redirected and the target url.
* Example: $http.get('/users') requests will be automatically proxified.
*
* For more details and option, https://github.com/chimurai/http-proxy-middleware/blob/v0.9.0/README.md
*/
// server.middleware = proxyMiddleware('/users', {target: 'http://jsonplaceholder.typicode.com', changeOrigin: true});
browserSync.instance = browserSync.init({
startPath: '/',
server : server,
browser: browser,
host: '192.168.0.20',
https: false,
port : parseInt(process.env.GULP_PORT) || 8684
});
}
browserSync.use(browserSyncSpa({
selector: '[ng-app]'// Only needed for angular apps
}));
gulp.task('serve', ['watch'], function () {
browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]);
});
gulp.task('serve:dist', ['build'], function () {
browserSyncInit(conf.paths.dist);
});
gulp.task('serve:e2e', ['inject'], function () {
browserSyncInit([conf.paths.tmp + '/serve', conf.paths.src], []);
});
gulp.task('serve:e2e-dist', ['build'], function () {
browserSyncInit(conf.paths.dist, []);
});
var gulp = require('gulp');
var webserver = require('gulp-webserver');
gulp.task('webserver', function() {
gulp.src('src')
.pipe(webserver({
host: '0.0.0.0',
livereload: true,
directoryListing: true,
open: true
}));
});
gulpfile.js
/**
* Welcome to your gulpfile!
* The gulp tasks are splitted in several files in the gulp directory
* because putting all here was really too long
*/
'use strict';
var gulp = require('gulp');
var wrench = require('wrench');
/**
* This will load all js or coffee files in the gulp directory
* in order to load all gulp tasks
*/
wrench.readdirSyncRecursive('./gulp').filter(function (file) {
return (/\.(js|coffee)$/i).test(file);
}).map(function (file) {
require('./gulp/' + file);
});
/**
* Default task clean temporaries directories and launch the
* main optimization build task
*/
gulp.task('default', ['clean'], function () {
gulp.start('build');
});
package.json
{
"name": "healthbydna",
"version": "0.0.0",
"dependencies": {
"angular-chart.js": "^1.0.3",
"babel": "^6.5.2",
"braintree-angular": "^1.5.0",
"gulp-babel": "^6.1.2",
"gulp-extend": "^0.2.0",
"gulp-if": "^2.0.0",
"gulp-ng-constant": "^1.1.0",
"jotted": "^1.5.1",
"lazypipe": "^1.0.1"
},
"scripts": {
"test": "gulp test"
},
"devDependencies": {
"babel-core": "^6.21.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-es2016": "^6.16.0",
"browser-sync": "~2.9.11",
"browser-sync-spa": "~1.0.3",
"chalk": "~1.1.1",
"del": "~2.0.2",
"eslint-plugin-angular": "~0.12.0",
"estraverse": "~4.1.0",
"gulp": "^3.9.1",
"gulp-angular-filesort": "~1.1.1",
"gulp-angular-templatecache": "~1.8.0",
"gulp-autoprefixer": "~3.0.2",
"gulp-eslint": "~1.0.0",
"gulp-filter": "~3.0.1",
"gulp-flatten": "~0.2.0",
"gulp-inject": "~3.0.0",
"gulp-load-plugins": "~0.10.0",
"gulp-minify-css": "~1.2.1",
"gulp-minify-html": "~1.0.4",
"gulp-ng-annotate": "~1.1.0",
"gulp-protractor": "~1.0.0",
"gulp-rename": "~1.2.2",
"gulp-replace": "~0.5.4",
"gulp-rev": "~6.0.1",
"gulp-rev-replace": "~0.4.2",
"gulp-sass": "~2.0.4",
"gulp-size": "~2.0.0",
"gulp-sourcemaps": "~1.6.0",
"gulp-uglify": "~1.4.1",
"gulp-useref": "~1.3.0",
"gulp-util": "~3.0.6",
"gulp-webserver": "^0.9.1",
"http-proxy-middleware": "~0.9.0",
"karma": "~0.13.10",
"karma-angular-filesort": "~1.0.0",
"karma-coverage": "~0.5.2",
"karma-jasmine": "~0.3.6",
"karma-ng-html2js-preprocessor": "~0.2.0",
"karma-phantomjs-launcher": "~0.2.1",
"lodash": "~3.10.1",
"main-bower-files": "~2.9.0",
"phantomjs": "~1.9.18",
"uglify-save-license": "~0.4.1",
"wiredep": "~2.2.2",
"wrench": "~1.5.8"
},
"engines": {
"node": ">=0.10.0"
}
}
Gulp is just a (very powerful) task runner, plain and simple. It does things you could do yourself, but you don't have the time for ;)
Node modules are not the same thing as Angular modules. Node modules have a broad scope and are for running general purpose code in the Node.js platform. That is, Javascript that runs outside of the typical web-browser setting. For example a desktop application, a loan calculator, a web server, a chat program, etc.
However, many Node modules are specifically for use with Angular and have a Bower counter-part. Bower packages are, indeed, for including directly in your webpage:
<script src="./bower_components/path/to/script.js" type="text/javascript"></script>
Why is there both a Node module AND a Bower package for a web module, you might ask? That's because of bundlers like Browserify and Webpack that let you actually use Node modules in your webpage. It does not appear that your project is setup for a bundler.
You want to either get the compiled js for your module (ideally by modifying your gulpfile to compile and/or concatenate the correct JS file from the node module's folder) or use Bower to download the already compiled JS, and modify the gulp file to include it into the concatenation process.
There are multiple files that make up the Gulp process for your project. Look for the 'build' task in one of those files. It should include the details about how vendor JS files are built. You want to modify it so that it is including the path to braintree-angular's JS file (if it exists)
Okay, the fix to this very specific issue was to remove braintree-angular from node_modules and install it via bower. I also need to lock the version to v1.3.0. I am unsure why this fixed it, so an explanation would be great :)
Gulp has nothing to do with Angular modules. From tasks you have published it is only used for localhost development and build not for any dependency injection.
Your problem is probably coming from not requiring dependency for module. You app.module should look something like this.
angular.module('app', [
'angular-svg-round-progress'
]);
And also make sure module is loaded before your app else instantiation will fail.