Related
Im trying to use this plugin: CleanWebpackPlugin.
But it's not running, i can see the Error: "TypeError: CleanWebPackPlugin is not a constructor"
even if i tried all upgrades from the github page: https://github.com/johnagan/clean-webpack-plugin/issues/106
this is my package.json file:
{
"name": "------",
"version": "1.0.0",
"description": "",
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/----/--------.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/-----/-----/issues"
},
"homepage": "https://github.com/----/------#readme",
"dependencies": {
"axios": "^0.19.0",
"lazysizes": "^5.1.2",
"lodash": "^4.17.15",
"normalize.css": "^8.0.1",
"react": "^16.11.0",
"react-dom": "^16.11.0"
},
"devDependencies": {
"#babel/core": "^7.7.2",
"#babel/preset-env": "^7.7.1",
"#babel/preset-react": "^7.7.0",
"autoprefixer": "^9.6.5",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"cssnano": "^4.1.10",
"fs-extra": "^8.1.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"postcss-hexrgba": "^2.0.0",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-mixins": "^6.2.2",
"postcss-nested": "^4.1.2",
"postcss-simple-vars": "^5.0.2",
"style-loader": "^1.0.0",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.9.0"
}
}
This is my webpack.config file
const currentTask = process.env.npm_lifecycle_event
const path= require('path')
const {CleanWebPackPlugin} = require ('clean-webpack-plugin')
const postCSSPlugins = [
require('postcss-import'),
require('postcss-mixins'),
require('postcss-simple-vars'),
require('postcss-nested'),
require('postcss-hexrgba'),
require('autoprefixer')
]
let config = {
entry:'./app/assets/scripts/App.js',
module: {
rules:[
{
test:/\.css$/i,
use: ['style-loader','css-loader?url=false',
{loader:'postcss-loader', options:{plugins: postCSSPlugins}}]
}
]
}
}
if (currentTask == 'dev'){
config.output = {
filename:'bundled.js',
path: path.resolve(__dirname,'app')
}
config.devServer = {
before: function(app,server){
server._watch('./app/**/*.html')
},
contentBase: path.join(__dirname, 'app'),
hot:true,
port:3000,
host:'0.0.0.0'
}
config.mode = 'development'
}
if (currentTask == 'build') {
config.output = {
filename:'[name].[chunkhash].js',
chunkFilename:'[name].[chunkhash].js',
path: path.resolve(__dirname,'dist')
}
config.mode = 'production'
config.optimization = {
splitChunks: {chunks: 'all'}
}
//config.plugins = [new CleanWebPackPlugin({dry:true, cleanAfterEveryBuildPatterns:['dist']})]
}
module.exports = config
I tried
const {CleanWebPackPlugin} = require ('clean-webpack-plugin')
and
const CleanWebPackPlugin = require ('clean-webpack-plugin')
I tried
config.plugins = [new CleanWebPackPlugin()]
and
config.plugins = [new CleanWebPackPlugin(['dist'])]
and
config.plugins = [new CleanWebPackPlugin({dry:true, cleanAfterEveryBuildPatterns:['dist']})]
and finally when delete this line, its working, but not with this plugin...
I am trying to install vue-test-utils and jest in a project. It is vue-cli project but I did not setup the testing when I ran it initially.
It finds the test but fails on the import statements.
Here is the error.
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
It is almost certainly a babel thing (I think) but I cannot work it out.
Here are the config files.
babel.config.js
module.exports = {
presets: [
'#vue/app'
]
}
jest.config.js
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue'
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest',
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
},
transformIgnorePatterns: [
'/node_modules/'
],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: [
'jest-serializer-vue'
],
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
testURL: 'http://localhost/'
}
package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "jest"
},
"dependencies": {
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-moment": "^4.0.0"
},
"devDependencies": {
"#babel/core": "^7.4.3",
"#vue/cli-plugin-babel": "^3.6.0",
"#vue/cli-plugin-eslint": "^3.6.0",
"#vue/cli-service": "^3.6.0",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.7.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"jest": "^24.7.1",
"jest-transform-stub": "^2.0.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"vue-jest": "^3.0.4",
"vue-template-compiler": "^2.5.21",
"webpack": "^4.30.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Well, looks like you need global section in your jest config. I'm using vue + ts, so my globals looks like that:
globals: {
'ts-jest': {
babelConfig: true
}
}
I am using the Angular 4 CLI (v.1.0.0) and to handle testing I created some mocks that use jasmine to create a spy. In the IDE everything looks okay, however in the terminal I am getting and error that says "Cannot find name 'jasmine'".
At first I thought the issue was that jasmine wasn't added to the typings but I can see that package.json includes the import for the jasmine type def so I'm not sure what is missing.
mocks.ts
export class MockAuthService {
public login: Function = jasmine.createSpy('login');
}
export class MockHttpService {
public delete: Function = jasmine.createSpy('delete');
public get: Function = jasmine.createSpy('get');
public post: Function = jasmine.createSpy('post');
public put: Function = jasmine.createSpy('put');
}
running ng serve returns the following error messages in the terminal.
ERROR in C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts
(2,23): Cannot find name 'jasmine'.
C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (6,24):
Cannot find name 'jasmine'.
C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (7,21):
Cannot find name 'jasmine'.
C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (8,22):
Cannot find name 'jasmine'.
C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (9,21):
Cannot find name 'jasmine'.
webpack: Failed to compile.
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2016",
"dom"
]
}
}
tsconfig.spec.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"module": "commonjs",
"target": "es5",
"baseUrl": "",
"types": [
"jasmine",
"node"
]
},
"files": [
"test.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}
tsconfig.app.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "es2015",
"baseUrl": "",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
package.json
{
"name": "prod",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.0.2",
"#angular/common": "^4.0.0",
"#angular/compiler": "^4.0.0",
"#angular/core": "^4.0.0",
"#angular/flex-layout": "^2.0.0-beta.8",
"#angular/forms": "^4.0.0",
"#angular/http": "^4.0.0",
"#angular/material": "^2.0.0-beta.3",
"#angular/platform-browser": "^4.0.0",
"#angular/platform-browser-dynamic": "^4.0.0",
"#angular/router": "^4.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "1.0.0",
"#angular/compiler-cli": "^4.0.0",
"#types/jasmine": "2.5.38",
"#types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
}
}
You are getting the error because TypeScript is trying to include the mock in the app build, and the app (rightly) doesn't know about Jasmine.
Exclude the mock from your app compilation by adding it to the exclude array in tsconfig.app.json:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "es2015",
"baseUrl": "",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts",
"**/*.mock.ts"
]
}
I am not sure if you should be creating jasmine spys that way, but regardless:
The issue is with your file name
notice: tsconfig.spec.json has: "include": ["**/*.spec.ts","**/*.d.ts"]
and your file name is mocks.ts.
either change the file name to mocks.spec.ts
or add "**/*.mock.ts" and rename to something like service.mock.ts
Hope this helps.
I am trying to create a new development environment for an app using angularfire2 package, downloading the source code from a repository.
The package.json file points to version 2.0.0-beta.6 of angularfire2, as in the following snippet
{
"name": "blah blah",
"author": "blah blah",
...
"dependencies": {
....
"angularfire2": "^2.0.0-beta.6",
...
}
.....
}
I run npm install to download all the packages I need.
Unfortunately, in case of angularfire2, what gets downloaded seems to be a different version of the package (probably 2.0.0-beta.8) which has several breaking changes with respect to version 2.0.0-beta.6.
How is this possible?
The package.json file within the angularfire2 directory (under node_modules) is the following
{
"_args": [
[
{
"raw": "angularfire2#^2.0.0-beta.6",
"scope": null,
"escapedName": "angularfire2",
"name": "angularfire2",
"rawSpec": "^2.0.0-beta.6",
"spec": ">=2.0.0-beta.6 <3.0.0",
"type": "range"
},
"/Users/penrico/ThoughWorks/code/angular/castella"
]
],
"_from": "angularfire2#>=2.0.0-beta.6 <3.0.0",
"_id": "angularfire2#2.0.0-beta.8",
"_inCache": true,
"_location": "/angularfire2",
"_nodeVersion": "6.9.1",
"_npmOperationalInternal": {
"host": "packages-18-east.internal.npmjs.com",
"tmp": "tmp/angularfire2-2.0.0-beta.8.tgz_1487250058126_0.7350442344322801"
},
"_npmUser": {
"name": "davideast",
"email": "dceast#gmail.com"
},
"_npmVersion": "3.10.8",
"_phantomChildren": {},
"_requested": {
"raw": "angularfire2#^2.0.0-beta.6",
"scope": null,
"escapedName": "angularfire2",
"name": "angularfire2",
"rawSpec": "^2.0.0-beta.6",
"spec": ">=2.0.0-beta.6 <3.0.0",
"type": "range"
},
"_requiredBy": [
"/"
],
"_resolved": "https://registry.npmjs.org/angularfire2/-/angularfire2-2.0.0-beta.8.tgz",
"_shasum": "8ec172ff17448c3ccdb79e9c6179da556ff05e1b",
"_shrinkwrap": null,
"_spec": "angularfire2#^2.0.0-beta.6",
"_where": "/Users/penrico/ThoughWorks/code/angular/castella",
"author": {
"name": "jeffbcross,davideast"
},
"bugs": {
"url": "https://github.com/angular/angularfire2/issues"
},
"dependencies": {},
"description": "<p align=\"center\"> <h1 align=\"center\">AngularFire2</h1> <p align=\"center\">The official library for Firebase and Angular 2</p> </p>",
"devDependencies": {
"#angular/compiler-cli": "^2.0.0",
"#angular/platform-server": "^2.0.0-rc.5",
"#types/jasmine": "^2.5.36",
"#types/request": "0.0.30",
"concurrently": "^2.2.0",
"conventional-changelog-cli": "^1.2.0",
"es6-module-loader": "^0.17.10",
"es6-shim": "^0.35.0",
"gulp": "^3.9.0",
"gulp-jasmine": "^2.2.1",
"gulp-typescript": "^2.10.0",
"http-server": "^0.8.5",
"jasmine": "^2.4.1",
"jasmine-core": "^2.4.1",
"json": "^9.0.3",
"karma": "^0.13.19",
"karma-chrome-launcher": "^0.2.2",
"karma-firefox-launcher": "^0.1.7",
"karma-jasmine": "^0.3.6",
"karma-mocha-reporter": "^2.0.2",
"karma-systemjs": "^0.10.0",
"ncp": "^2.0.0",
"parse5": "^1.3.2",
"protractor": "3.0.0",
"reflect-metadata": "0.1.2",
"rimraf": "^2.5.4",
"rollup": "^0.35.11",
"rollup-watch": "^2.5.0",
"systemjs": "^0.19.16",
"systemjs-builder": "^0.15.7",
"traceur": "0.0.96",
"typedoc": "github:jeffbcross/typedoc",
"typescript": "^2.0.2",
"zone.js": "^0.7.2"
},
"directories": {},
"dist": {
"shasum": "8ec172ff17448c3ccdb79e9c6179da556ff05e1b",
"tarball": "https://registry.npmjs.org/angularfire2/-/angularfire2-2.0.0-beta.8.tgz"
},
"homepage": "https://github.com/angular/angularfire2#readme",
"keywords": [
"angular2",
"angular",
"firebase"
],
"license": "MIT",
"main": "bundles/angularfire2.umd.js",
"maintainers": [
{
"name": "angularcore",
"email": "angular-core+npm#google.com"
},
{
"name": "davideast",
"email": "dceast#gmail.com"
},
{
"name": "jeffbcross",
"email": "middlefloor#gmail.com"
}
],
"module": "index.js",
"name": "angularfire2",
"optionalDependencies": {},
"peerDependencies": {
"#angular/common": "^2.0.0",
"#angular/compiler": "^2.0.0",
"#angular/core": "^2.0.0",
"#angular/platform-browser": "^2.0.0",
"#angular/platform-browser-dynamic": "^2.0.0",
"firebase": "^3.0.0",
"rxjs": "^5.0.1"
},
"readme": "ERROR: No README data found!",
"repository": {
"type": "git",
"url": "git+https://github.com/angular/angularfire2.git"
},
"scripts": {},
"typings": "index.d.ts",
"version": "2.0.0-beta.8"
}
The first breaking change (just to make an example that sustains my theory that this is a different version of the package) is that there is no more FirebaseAuth (which seems to be substituted by AngularFireAuth).
It's installing a later version, as that version satisfies the caret range you have specified in the package.json file:
"angularfire2": "^2.0.0-beta.6"
If you want a specific version, remove the caret:
"angularfire2": "2.0.0-beta.6"
Looking at the spec - under that NPM has filled out under _requested in the package.json file that's in node_modules/angularfire2 - you can see that caret range you have specified is equivalent to:
"spec": ">=2.0.0-beta.6 <3.0.0",
Just started using gulp not long ago, everything works fine before this when I'm stuck at this error. I've tried
//gulpfile.js
var gulp = require('gulp'),
browserify = require('browserify'),
source = require('vinyl-source-stream');
// Browserify task
gulp.task('browserify', function() {
return browserify(['app/scripts/app.js'], {debug:true})
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('dist/scripts'))
});
Error when running gulp browserify
events.js:141
throw er; // Unhandled 'error' event
^
SyntaxError: Unterminated string constant
Where does this syntax error point to? I've read up some articles on the errors in package.json file too.
"devDependencies": {
"browserify": "^13.0.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-clean-css": "^2.0.4",
"gulp-connect": "^3.2.1",
"gulp-imagemin": "^2.4.0",
"gulp-less": "^3.0.5",
"gulp-plumber": "^1.1.0",
"gulp-uglify": "^1.5.3",
"vinyl-source-stream": "^1.1.0"
},
"dependencies": {
"angular": "^1.5.3",
"imagemin-pngquant": "^4.2.2"
}
//browserify package.json
{
"name": "browserify",
"version": "13.0.0",
"description": "browser-side require() the node way",
"main": "index.js",
"bin": {
"browserify": "bin/cmd.js"
},
"repository": {
"type": "git",
"url": "git+ssh://git#github.com/substack/node-browserify.git"
},
"keywords": [
"browser",
"require",
"commonjs",
"commonj-esque",
"bundle",
"npm",
"javascript"
],
"dependencies": {
"JSONStream": "^1.0.3",
"assert": "~1.3.0",
"browser-pack": "^6.0.1",
"browser-resolve": "^1.11.0",
"browserify-zlib": "~0.1.2",
"buffer": "^4.1.0",
"concat-stream": "~1.5.1",
"console-browserify": "^1.1.0",
"constants-browserify": "~1.0.0",
"crypto-browserify": "^3.0.0",
"defined": "^1.0.0",
"deps-sort": "^2.0.0",
"domain-browser": "~1.1.0",
"duplexer2": "~0.1.2",
"events": "~1.1.0",
"glob": "^5.0.15",
"has": "^1.0.0",
"htmlescape": "^1.1.0",
"stream-http": "^2.0.0",
"https-browserify": "~0.0.0",
"inherits": "~2.0.1",
"insert-module-globals": "^7.0.0",
"isarray": "0.0.1",
"labeled-stream-splicer": "^2.0.0",
"module-deps": "^4.0.2",
"os-browserify": "~0.1.1",
"parents": "^1.0.1",
"path-browserify": "~0.0.0",
"process": "~0.11.0",
"punycode": "^1.3.2",
"querystring-es3": "~0.2.0",
"read-only-stream": "^2.0.0",
"readable-stream": "^2.0.2",
"resolve": "^1.1.4",
"shasum": "^1.0.0",
"shell-quote": "^1.4.3",
"stream-browserify": "^2.0.0",
"string_decoder": "~0.10.0",
"subarg": "^1.0.0",
"syntax-error": "^1.1.1",
"through2": "^2.0.0",
"timers-browserify": "^1.0.1",
"tty-browserify": "~0.0.0",
"url": "~0.11.0",
"util": "~0.10.1",
"vm-browserify": "~0.0.1",
"xtend": "^4.0.0"
},
"devDependencies": {
"backbone": "~0.9.2",
"browser-unpack": "^1.1.1",
"coffee-script": "~1.10.0",
"coffeeify": "~1.1.0",
"es6ify": "~0.4.8",
"isstream": "^0.1.2",
"seq": "0.3.5",
"tap": "^2.2.0",
"temp": "^0.8.1",
"through": "^2.3.4"
},
"author": {
"name": "James Halliday",
"email": "mail#substack.net",
"url": "http://substack.net"
},
"scripts": {
"test": "tap test/*.js"
},
"license": "MIT",
"gitHead": "5b82a2f1bc061cb47ff4aa7c702ed79fc20effa8",
"bugs": {
"url": "https://github.com/substack/node-browserify/issues"
},
"homepage": "https://github.com/substack/node-browserify#readme",
"_id": "browserify#13.0.0",
"_shasum": "8f223bb24ff4ee4335e6bea9671de294e43ba6a3",
"_from": "browserify#latest",
"_npmVersion": "2.14.7",
"_nodeVersion": "4.2.3",
"_npmUser": {
"name": "feross",
"email": "feross#feross.org"
},
"dist": {
"shasum": "8f223bb24ff4ee4335e6bea9671de294e43ba6a3",
"tarball": "http://registry.npmjs.org/browserify/-/browserify- 13.0.0.tgz"
},
"maintainers": [
{
"name": "domenic",
"email": "d#domenic.me"
},
{
"name": "dominictarr",
"email": "dominic.tarr#gmail.com"
},
{
"name": "feross",
"email": "feross#feross.org"
},
{
"name": "jmm",
"email": "npm-public#jessemccarthy.net"
},
{
"name": "mafintosh",
"email": "mathiasbuus#gmail.com"
},
{
"name": "maxogden",
"email": "max#maxogden.com"
},
{
"name": "mellowmelon",
"email": "palmermebane#gmail.com"
},
{
"name": "substack",
"email": "substack#gmail.com"
},
{
"name": "terinjokes",
"email": "terinjokes#gmail.com"
},
{
"name": "thlorenz",
"email": "thlorenz#gmx.de"
},
{
"name": "zertosh",
"email": "zertosh#gmail.com"
}
],
"directories": {},
"_resolved": "https://registry.npmjs.org/browserify/-/browserify-13.0.0.tgz",
"readme": "ERROR: No README data found!"
}
I manage to run this without error by adding
{
"devDependencies": {
"browserify": "^13.0.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-clean-css": "^2.0.4",
"gulp-connect": "^3.2.1",
"gulp-imagemin": "^2.4.0",
"gulp-less": "^3.0.5",
"gulp-plumber": "^1.1.0",
"gulp-uglify": "^1.5.3",
"vinyl-source-stream": "^1.1.0"
},
"dependencies": {
"angular": "^1.5.3",
"imagemin-pngquant": "^4.2.2"
},
//Tells browserify to use browserify-shim
"browserify": {
"transform": [ "browserify-shim" ]
},
"browserify-shim": {
"./app/scripts/app.js": "$"
}
}