We Keep Coding

Angular Fire with Universal SSR | Everything works, but the problem is while building my app [duplicate]

I'm dealing with this issue for almost two weeks now. I tried a lot of workarounds but none seems to be working. I've installed angular-fire and firebase to its latest version, tried ng add #angular/fire, configured custom webpack.config.ts, tried rolling back to every suggested previous version. None fixed this issue.
The Actual Error:
de-10#de10-LIFEBOOK-A555:~/Desktop$ node dist/server.js
internal/modules/cjs/loader.js:797
throw err;
^
Error: Cannot find module 'firebase/app'
Require stack:
- /home/de-10/Desktop/dist/server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
at Function.Module._load (internal/modules/cjs/loader.js:687:27)
at Module.require (internal/modules/cjs/loader.js:849:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (/home/de-10/Desktop/dist/server.js:125276:18)
at __webpack_require__ (/home/de-10/Desktop/dist/server.js:20:30)
at Module.<anonymous> (/home/de-10/Desktop/dist/server.js:125199:70)
at __webpack_require__ (/home/de-10/Desktop/dist/server.js:20:30)
at Module.<anonymous> (/home/de-10/Desktop/dist/server.js:124984:78)
at __webpack_require__ (/home/de-10/Desktop/dist/server.js:20:30) {
code: 'MODULE_NOT_FOUND',
requireStack: [ '/home/de-10/Desktop/dist/server.js' ]
}
And I can't let go of Firebase cause then I face:
ERROR in ../node_modules/#angular/fire/auth/auth.d.ts:4:28 - error TS2307: Cannot find module 'firebase/app'.
4 import { User, auth } from 'firebase/app';
~~~~~~~~~~~~~~
../node_modules/#angular/fire/firebase.app.module.d.ts:2:74 - error TS2307: Cannot find module 'firebase/app'.
2 import { auth, database, messaging, storage, firestore, functions } from 'firebase/app';
~~~~~~~~~~~~~~
../node_modules/#angular/fire/firestore/collection-group/collection-group.d.ts:2:27 - error TS2307: Cannot find module 'firebase/app'.
~~~~~~~~~~~~~
.
.
.
app/services/notification.service.ts:29:38 - error TS2339: Property 'id' does not exist on type 'QueryDocumentSnapshot<unknown>'.
29 id: snap.payload.doc.id,
~~
app/services/notification.service.ts:68:35 - error TS2339: Property 'type' does not exist on type 'DocumentChange<unknown>'.
68 return snap.payload.type
~~~~
.
.
.
package.json
{
"name": "universal-ssr",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "npm run build:ssr",
"staging": "npm run build:ssr-staging && npm run serve:ssr",
"production": "npm run build:ssr && npm run serve:ssr",
"prod": "npm run build:ssr-production && npm run serve:ssr",
"build": "ng build --prod",
"test": "ng test",
"dev-start": "ng serve",
"ng serve": "ng serve --aot",
"lint": "ng lint",
"e2e": "ng e2e",
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"build:ssr-staging": "npm run build:client-and-server-bundles-staging && npm run webpack:server",
"build:ssr-production": "npm run build:client-and-server-bundles-production && npm run webpack:server",
"serve:ssr": "node dist/server.js",
"build:client-and-server-bundles": "ng build --prod --build-optimizer && ng run universal-ssr:server --bundleDependencies all",
"build:client-and-server-bundles-staging": "ng build --c=staging --build-optimizer=true --stats-json && ng run universal-ssr:server",
"build:client-and-server-bundles-production": "ng build --c=production --build-optimizer=true && ng run universal-ssr:server --bundleDependencies all",
"webpack:server": "webpack --config webpack.config.js --progress --colors",
"webpack:analyzer": "webpack-bundle-analyzer dist/browser/stats.json",
"compodoc": "npx compodoc -p src/tsconfig.app.json -o"
},
"private": true,
"dependencies": {
"#angular/animations": "^8.2.14",
"#angular/cdk": "^5.2.5",
"#angular/common": "^8.2.14",
"#angular/compiler": "^8.2.14",
"#angular/core": "^8.2.14",
"#angular/fire": "^5.4.2",
"#angular/forms": "^8.2.14",
"#angular/material": "^5.2.5",
"#angular/platform-browser": "^8.2.14",
"#angular/platform-browser-dynamic": "^8.2.14",
"#angular/platform-server": "^8.2.14",
"#angular/pwa": "^0.803.24",
"#angular/router": "^8.2.14",
"#angular/service-worker": "^8.2.14",
"#ng-bootstrap/ng-bootstrap": "^4.0.0",
"#nguniversal/express-engine": "^6.1.0",
"#nguniversal/module-map-ngfactory-loader": "^6.1.0",
"angular2-datetimepicker": "^1.1.1",
"bootstrap": "^4.4.1",
"city-timezones": "^1.2.0",
"core-js": "^2.6.11",
"cors": "^2.8.4",
"express": "^4.17.1",
"firebase": "^7.13.1",
"jquery": "^3.4.1",
"moment-timezone": "^0.5.27",
"ng-bootstrap": "^1.6.3",
"ng2-search-filter": "^0.5.1",
"ngx-clipboard": "12.2.1",
"ngx-google-places-autocomplete": "^2.0.4",
"ngx-pagination": "^3.3.1",
"ngx-spinner": "^2.0.0",
"ngx-toggle-switch": "^2.0.5",
"ngx-ui-switch": "^8.3.0",
"rxjs": "^6.5.4",
"rxjs-compat": "^6.0.0",
"save": "^2.4.0",
"ts-loader": "^4.0.0",
"tslib": "^1.10.0",
"uuid": "^3.4.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.23",
"#angular/cli": "^8.3.23",
"#angular/compiler-cli": "^8.2.14",
"#angular/http": "^7.2.16",
"#angular/language-service": "^8.2.14",
"#types/jasmine": "2.8.3",
"#types/jasminewd2": "^2.0.8",
"#types/node": "^6.14.9",
"codelyzer": "^5.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.4.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.1.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "5.4.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~3.5.3",
"webpack-cli": "^3.1.0"
}
}
webpack.config.js:
// Work around for https://github.com/angular/angular-cli/issues/7200
const path = require('path');
const webpack = require('webpack');
// change the regex to include the packages you want to exclude
const regex = /firebase\/(app|firestore)/;
module.exports = {
mode: 'production',
entry: {
// This is our Express server for Dynamic universal
server: './server.ts'
},
externals: {
'./dist/server/main': 'require("./server/main")'
},
target: 'node',
node: {
__dirname: false,
__filename: false,
},
resolve: { extensions: ['.ts', '.js'] },
target: 'node',
mode: 'none',
// this makes sure we include node_modules and other 3rd party libraries
externals: [/node_modules/, function (context, request, callback) {
// exclude firebase products from being bundled, so they will be loaded using require() at runtime.
if (regex.test(request)) {
return callback(null, 'commonjs ' + request);
}
callback();
}],
optimization: {
minimize: false
},
output: {
// Puts the output at the root of the dist folder
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
noParse: /polyfills-.*\.js/,
rules: [
{ test: /\.ts$/, loader: 'ts-loader' },
{
// Mark files inside `#angular/core` as using SystemJS style dynamic imports.
// Removing this will cause deprecation warnings to appear.
test: /(\\|\/)#angular(\\|\/)core(\\|\/).+\.js$/,
parser: { system: true },
},
]
},
plugins: [
new webpack.ContextReplacementPlugin(
// fixes WARNING Critical dependency: the request of a dependency is an expression
/(.+)?angular(\\|\/)core(.+)?/,
path.join(__dirname, 'src'), // location of your src
{} // a map of your routes
),
new webpack.ContextReplacementPlugin(
// fixes WARNING Critical dependency: the request of a dependency is an expression
/(.+)?express(\\|\/)(.+)?/,
path.join(__dirname, 'src'),
{}
)
]
};
server.ts:
import 'zone.js/dist/zone-node';
import * as express from 'express';
/* const express = require('express');
const join = require('path'); */
const compression = require('compression')
import { join } from 'path';
// Express server
const app = express();
// gzip
app.use(compression())
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(__dirname, 'browser');/* 'dist/browser' */
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap } = require('./dist/server/main');
// Our Universal express-engine (found # https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [
provideModuleMap(LAZY_MODULE_MAP)
]
}));
app.set('view engine', 'html');
app.set('views', DIST_FOLDER);
// Serve static files from /browser
app.get('*.*', express.static(DIST_FOLDER, {
maxAge: '1y'
}));
// All regular routes use the Universal engine
app.get('*', (req, res) => {
res.render('index', { req });
});
// Start up the Node server
app.listen(PORT, () => {
console.log(`Node Express server listening on http://localhost:${PORT}`);
});

You're getting this error because you're excluding firebase dependencies with this =>
const regex = /firebase\/(app|firestore)/;
module.exports = {
// this makes sure we include node_modules and other 3rd party libraries
externals: [/node_modules/, function (context, request, callback) {
// exclude firebase products from being bundled, so they will be loaded using require() at runtime.
if (regex.test(request)) {
return callback(null, 'commonjs ' + request);
}
callback();
}],
};
Remove this
if (regex.test(request)) {
return callback(null, 'commonjs ' + request);
}
and your app will be fine.

One workaround is to install npm packages (firebase and #angular/fire) beside the dist folder and then run the deployment script.

published npm package es6 import does not work

I have trouble in creating a npm module that I can use via es6 imports inside other modules.
I have a folder "1" where I bundle up a simple js class file with the help of gulp:
/1/script.js
export default class npmtest1
{
static capitalize(string)
{
return string.charAt(0).toUpperCase() + string.slice(1);
}
}
/1/package.json
{
"name": "npmtest1",
"version": "1.0.0",
"main": "script.min.js",
"license": "MIT",
"dependencies": {},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-runtime": "^6.26.0",
"babelify": "^8.0.0",
"browserify": "^16.1.1",
"gulp": "^3.9.1",
"gulp-connect": "^5.0.0",
"gulp-uglify": "^3.0.0",
"uglify": "^0.1.5",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^2.0.0"
}
}
/1/gulpfile.js
var gulp = require('gulp'),
babelify = require('babelify'),
buffer = require('vinyl-buffer'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
uglify = require('gulp-uglify');
gulp.task('js', function()
{
return browserify({
entries: ['./script.js']
})
.transform(babelify.configure({
presets : ['es2015', 'es2017'],
plugins : ['transform-runtime']
}))
.bundle()
.on('error', function(err) { console.log(err.toString()); this.emit('end'); })
.pipe(source('script.min.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('.'));
});
gulp.task('default', ['js']);
Then I publish this module via "npm publish".
In another folder "2" I have a quite similiar setup:
/2/script.js
import npmtest1 from 'npmtest1';
alert(npmtest1.capitalize('foo'));
/2/package.json
{
"dependencies": {
"npmtest1": "^1.0.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-runtime": "^6.26.0",
"babelify": "^8.0.0",
"browserify": "^16.1.1",
"gulp": "^3.9.1",
"gulp-connect": "^5.0.0",
"gulp-uglify": "^3.0.0",
"uglify": "^0.1.5",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^2.0.0"
}
}
/2/gulpfile.js
var gulp = require('gulp'),
babelify = require('babelify'),
buffer = require('vinyl-buffer'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
uglify = require('gulp-uglify');
gulp.task('js', function()
{
return browserify({
entries: ['./script.js']
})
.transform(babelify.configure({
presets : ['es2015', 'es2017'],
plugins : ['transform-runtime']
}))
.bundle()
.on('error', function(err) { console.log(err.toString()); this.emit('end'); })
.pipe(source('script.min.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('.'));
});
gulp.task('default', ['js']);
When I embed script.min.js inside a html file, I get the following error:
Uncaught TypeError: i.default.capitalize is not a function
Am I missing something? This is a very basic task.

Ok, bad mistake: I tried to import a module bundled with browserify/babelify.
Instead I had to use gulp-babel to convert all js files to es2015.

"TypeError: Cannot read property 'map' of undefined" when running Gulp

I get an TypeError: Cannot read property 'map' of undefined error when I run gulp. I don't understand why, as I do have 4 .jsx files located in the src folder.
I'm running node v6.11.0.
My files
$ find . | grep -v node_modules
.
./.node-version
./application.js
./Gulpfile.js
./index.html
./package.json
./src
./src/app.jsx
./src/badge.jsx
./src/thumbnail-list.jsx
./src/thumbnail.jsx
Gulpfile.js
var gulp = require('gulp');
var react = require('gulp-react');
var concat = require('concat');
gulp.task('default', function() {
return gulp.src('./src')
.pipe(react())
.pipe(concat('application.js'))
.pipe(gulp.dest('./'));
});
package.json
{
"name": "thumbnail-gulp",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"browserify": "^9.0.3",
"concat": "^1.0.3",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-react": "^3.1.0",
"gulp-util": "^3.0.4",
"react": "^0.13.3",
"reactify": "^1.1.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^2.4.0"
},
"devDependencies": {
"gulp": "^3.9.1"
}
}
The error
➜ thumbnail-gulp node -v
v6.11.0
➜ thumbnail-gulp gulp
[09:49:31] Using gulpfile ~/Work/LearnReact/ReactCasts-tasks/first-app/thumbnail-gulp/gulpfile.js
[09:49:31] Starting 'default'...
[09:49:31] 'default' errored after 9.57 ms
[09:49:31] TypeError: dest.on is not a function
at DestroyableTransform.Readable.pipe (/Users/martins/Work/LearnReact/ReactCasts-tasks/first-app/thumbnail-gulp/node_modules/gulp-react/node_modules/readable-stream/lib/_stream_readable.js:556:8)
at Gulp.<anonymous> (/Users/martins/Work/LearnReact/ReactCasts-tasks/first-app/thumbnail-gulp/gulpfile.js:8:6)
at module.exports (/Users/martins/Work/LearnReact/ReactCasts-tasks/first-app/thumbnail-gulp/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/Users/martins/Work/LearnReact/ReactCasts-tasks/first-app/thumbnail-gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/Users/martins/Work/LearnReact/ReactCasts-tasks/first-app/thumbnail-gulp/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/Users/martins/Work/LearnReact/ReactCasts-tasks/first-app/thumbnail-gulp/node_modules/orchestrator/index.js:134:8)
at /usr/local/lib/node_modules/gulp-cli/lib/versioned/^3.7.0/index.js:51:20
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickCallback (internal/process/next_tick.js:104:9)
at Module.runMain (module.js:606:11)
/Users/martins/Work/LearnReact/ReactCasts-tasks/first-app/thumbnail-gulp/node_modules/concat/index.js:17
const fileList = files.map(f => path_1.join(folder, f));
^
TypeError: Cannot read property 'map' of undefined
at fs_1.readdir (/Users/martins/Work/LearnReact/ReactCasts-tasks/first-app/thumbnail-gulp/node_modules/concat/index.js:17:31)
at FSReqWrap.oncomplete (fs.js:123:15)

Please use gulp-concat instead of concat:
var gulp = require('gulp');
var react = require('gulp-react');
var concat = require('gulp-concat');
gulp.task('default', function() {
return gulp.src('./src/**/*.jsx')
.pipe(react())
.pipe(concat('application.js'))
.pipe(gulp.dest('./'));
});

Mocha with webpack can not resolve module

I was trying to run mocha tests in my project. When i execute npm command i get the next error:
> Frontent#0.0.0 test /home/serperga/falcon/falcon-project/frontend
> mocha-webpack
ERROR in ./test/src/app/components/contact-us/contact-us.spec.ts
Module not found: Error: Can't resolve 'main/src/app/components/contact-us/contact-us' in '/home/serperga/falcon/falcon-project/frontend/test/src/app/components/contact-us'
resolve 'main/src/app/components/contact-us/contact-us' in '/home/serperga/falcon/falcon-project/frontend/test/src/app/components/contact-us'
Parsed request is a module
using description file: /home/serperga/falcon/falcon-project/frontend/package.json (relative path: ./test/src/app/components/contact-us)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /home/serperga/falcon/falcon-project/frontend/package.json (relative path: ./test/src/app/components/contact-us)
resolve as module
/home/serperga/falcon/falcon-project/node_modules doesn't exist or is not a directory
/home/serperga/falcon/node_modules doesn't exist or is not a directory
/home/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
/home/serperga/falcon/falcon-project/frontend/test/src/app/components/contact-us/node_modules doesn't exist or is not a directory
/home/serperga/falcon/falcon-project/frontend/test/src/app/components/node_modules doesn't exist or is not a directory
/home/serperga/falcon/falcon-project/frontend/test/src/app/node_modules doesn't exist or is not a directory
/home/serperga/falcon/falcon-project/frontend/test/src/node_modules doesn't exist or is not a directory
/home/serperga/falcon/falcon-project/frontend/test/node_modules doesn't exist or is not a directory
looking for modules in /home/serperga/falcon/falcon-project/frontend/node_modules
using description file: /home/serperga/falcon/falcon-project/frontend/package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /home/serperga/falcon/falcon-project/frontend/package.json (relative path: ./node_modules)
using description file: /home/serperga/falcon/falcon-project/frontend/package.json (relative path: ./node_modules/main/src/app/components/contact-us/contact-us)
as directory
/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us doesn't exist
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us doesn't exist
Field 'browser' doesn't contain a valid alias configuration
/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us.js doesn't exist
looking for modules in /home/serperga/node_modules
No description file found
Field 'browser' doesn't contain a valid alias configuration
No description file found
as directory
/home/serperga/node_modules/main/src/app/components/contact-us/contact-us doesn't exist
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/serperga/node_modules/main/src/app/components/contact-us/contact-us doesn't exist
Field 'browser' doesn't contain a valid alias configuration
/home/serperga/node_modules/main/src/app/components/contact-us/contact-us doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/home/serperga/node_modules/main/src/app/components/contact-us/contact-us.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/serperga/node_modules/main/src/app/components/contact-us/contact-us.js doesn't exist
[/home/serperga/falcon/falcon-project/node_modules]
[/home/serperga/falcon/node_modules]
[/home/serperga/node_modules/package.json]
[/home/node_modules]
[/node_modules]
[/home/serperga/falcon/falcon-project/frontend/test/src/app/components/contact-us/node_modules]
[/home/serperga/falcon/falcon-project/frontend/test/src/app/components/node_modules]
[/home/serperga/falcon/falcon-project/frontend/test/src/app/node_modules]
[/home/serperga/falcon/falcon-project/frontend/test/src/node_modules]
[/home/serperga/falcon/falcon-project/frontend/test/node_modules]
[/home/serperga/node_modules/main/src/app/components/contact-us/contact-us/package.json]
[/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us]
[/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us]
[/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us]
[/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us.ts]
[/home/serperga/falcon/falcon-project/frontend/node_modules/main/src/app/components/contact-us/contact-us.js]
[/home/serperga/node_modules/main/src/app/components/contact-us/contact-us]
[/home/serperga/node_modules/main/src/app/components/contact-us/contact-us]
[/home/serperga/node_modules/main/src/app/components/contact-us/contact-us]
[/home/serperga/node_modules/main/src/app/components/contact-us/contact-us.ts]
[/home/serperga/node_modules/main/src/app/components/contact-us/contact-us.js]
# ./test/src/app/components/contact-us/contact-us.spec.ts 2:0-74
# ./test/src object Object
# ./.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449-entry.js
/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/home/serperga/falcon/falcon-project/frontend/test/src/app/components/contact-us/contact-us.spec.ts:3
import { By } from '#angular/platform-browser';
^
Error: Cannot find module "main/src/app/components/contact-us/contact-us"
at Object.map../app/components/contact-us/contact-us.spec.ts (/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/home/serperga/falcon/falcon-project/frontend/test/src/app/components/contact-us/contact-us.spec.ts:3:1)
at __webpack_require__ (/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/webpack/bootstrap d6f4950c2aa1937a19f2:19:1)
at webpackContext (/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/home/serperga/falcon/falcon-project/frontend/test/src object Object:5:1)
at Array.forEach (native)
at Object.<anonymous> (/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/17ee8e5ef87ab9f1f1c6d5078648f449-entry.js:6:1)
at __webpack_require__ (/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/webpack/bootstrap d6f4950c2aa1937a19f2:19:1)
at /home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/webpack:/webpack/bootstrap d6f4950c2aa1937a19f2:63:1
at Object.<anonymous> (/home/serperga/falcon/falcon-project/frontend/.tmp/mocha-webpack/17ee8e5ef87ab9f1f1c6d5078648f449/17ee8e5ef87ab9f1f1c6d5078648f449-output.js:67:10)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at /home/serperga/falcon/falcon-project/frontend/node_modules/mocha/lib/mocha.js:230:27
at Array.forEach (native)
at Mocha.loadFiles (/home/serperga/falcon/falcon-project/frontend/node_modules/mocha/lib/mocha.js:227:14)
at Mocha.run (/home/serperga/falcon/falcon-project/frontend/node_modules/mocha/lib/mocha.js:495:10)
at /home/serperga/falcon/falcon-project/frontend/node_modules/mocha-webpack/lib/cli/runner.js:59:11
at Compiler.<anonymous> (/home/serperga/falcon/falcon-project/frontend/node_modules/mocha-webpack/lib/webpack/createCompiler.js:72:7)
at Compiler.applyPlugins (/home/serperga/falcon/falcon-project/frontend/node_modules/tapable/lib/Tapable.js:61:14)
at Compiler.<anonymous> (/home/serperga/falcon/falcon-project/frontend/node_modules/webpack/lib/Compiler.js:226:13)
at Compiler.emitRecords (/home/serperga/falcon/falcon-project/frontend/node_modules/webpack/lib/Compiler.js:319:37)
at Compiler.<anonymous> (/home/serperga/falcon/falcon-project/frontend/node_modules/webpack/lib/Compiler.js:220:12)
at /home/serperga/falcon/falcon-project/frontend/node_modules/webpack/lib/Compiler.js:312:11
at Compiler.applyPluginsAsyncSeries (/home/serperga/falcon/falcon-project/frontend/node_modules/tapable/lib/Tapable.js:131:46)
at Compiler.afterEmit (/home/serperga/falcon/falcon-project/frontend/node_modules/webpack/lib/Compiler.js:309:8)
at Compiler.<anonymous> (/home/serperga/falcon/falcon-project/frontend/node_modules/webpack/lib/Compiler.js:304:14)
at /home/serperga/falcon/falcon-project/frontend/node_modules/webpack/node_modules/async/lib/async.js:52:16
at done (/home/serperga/falcon/falcon-project/frontend/node_modules/webpack/node_modules/async/lib/async.js:246:17)
at /home/serperga/falcon/falcon-project/frontend/node_modules/webpack/node_modules/async/lib/async.js:44:16
at /home/serperga/falcon/falcon-project/frontend/node_modules/graceful-fs/graceful-fs.js:43:10
at FSReqWrap.oncomplete (fs.js:114:15)
npm ERR! Test failed. See above for more details.
My package.json file is :
{
"name": "Frontent",
"version": "0.0.0",
"description": "frontent",
"repository": {
"type": "git"
},
"author": {
"name": "Vishu"
},
"license": "MIT",
"private": true,
"engines": {
"node": ">=6.4"
},
"scripts": {
"build": "cross-env NODE_ENV=production webpack --display-chunks",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
"clean": "del-cli target",
"heroku-postbuild": "npm run build",
"lint": "run-s lint:js lint:ts",
"lint:js": "eslint -c .eslintrc.yml *.js src server",
"lint:ts": "tslint 'main/src/**/*.ts'",
"prebuild": "npm run clean",
"pretest": "npm run lint -s",
"server": "cross-env NODE_ENV=development nodemon -w 'server/**/*.*' server/main.js",
"server:dev": "cross-env NODE_ENV=development webpack-dev-server --progress",
"start": "npm run server:dev",
"test": "mocha-webpack",
"test:watch": "mocha-webpack --watch",
"version": "npm run changelog && git add CHANGELOG.md",
"compodoc": "./node_modules/.bin/compodoc -p tsconfig.json"
},
"dependencies": {
"compression": "~1.6.2",
"express": "~4.14.0",
"helmet": "~2.2.0",
"serve-favicon": "~2.3.0",
"winston": "~2.2.0"
},
"devDependencies": {
"#angular/common": "2.0.1",
"#angular/compiler": "2.0.1",
"#angular/core": "2.0.1",
"#angular/forms": "2.0.1",
"#angular/http": "2.0.1",
"#angular/platform-browser": "2.0.1",
"#angular/platform-browser-dynamic": "2.0.1",
"#angular/router": "3.0.1",
"#compodoc/compodoc": "^1.0.0-beta.9",
"#types/chai": "^3.4.34",
"#types/core-js": "^0.9.34",
"#types/jasmine": "2.5.38",
"#types/node": "~6.0.41",
"#types/sinon": "^1.16.32",
"angular2-template-loader": "^0.4.0",
"autoprefixer": "~6.4.1",
"awesome-typescript-loader": "^2.2.4",
"chai": "^3.5.0",
"conventional-changelog-cli": "~1.2.0",
"copy-webpack-plugin": "~3.0.1",
"core-js": "~2.4.1",
"cross-env": "~3.0.0",
"css-loader": "~0.25.0",
"del-cli": "~0.2.0",
"eslint": "~3.6.0",
"extract-text-webpack-plugin": "2.0.0-beta.4",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "~2.22.0",
"immutable": "~3.8.1",
"jasmine-core": "~2.5.2",
"jsdom": "^9.8.3",
"json-loader": "~0.5.4",
"karma": "~1.3.0",
"karma-chrome-launcher": "~2.0.0",
"karma-jasmine": "~1.0.2",
"karma-mocha": "^1.3.0",
"karma-mocha-reporter": "~2.2.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sinon": "^1.0.5",
"karma-sourcemap-loader": "~0.3.7",
"karma-webpack": "~1.8.0",
"mocha": "^3.1.2",
"mocha-webpack": "^0.7.0",
"morgan": "~1.7.0",
"node-sass": "~3.10.0",
"nodemon": "~1.10.2",
"npm-run-all": "~3.1.0",
"null-loader": "^0.1.1",
"phantomjs-prebuilt": "^2.1.7",
"postcss-loader": "~0.13.0",
"raw-loader": "~0.5.1",
"rimraf": "^2.5.2",
"rxjs": "5.0.0-beta.12",
"sass-loader": "~4.0.2",
"sinon": "^2.0.0-pre.4",
"style-loader": "~0.13.1",
"ts-helpers": "~1.1.1",
"ts-loader": "~0.8.2",
"tslint": "~3.15.1",
"typescript": "2.0.10",
"webpack": "2.1.0-beta.22",
"webpack-dev-server": "2.1.0-beta.4",
"webpack-md5-hash": "~0.0.5",
"webpack-merge": "^0.14.0",
"webpack-node-externals": "^1.5.4",
"zone.js": "~0.6.25"
}
}
I was using the webpack configuration tutorial in Angular 2 official configuration. This is mi project structure:
My mocha-test-shim.js configuration file is :
var jsdom = require('jsdom')
// setup the simplest document possible
var document = jsdom.jsdom('<!doctype html><html><body></body></html>');
// get the window object out of the document
var window = document.defaultView;
global.document = document;
global.HTMLElement = window.HTMLElement;
global.XMLHttpRequest = window.XMLHttpRequest;
require('core-js/es6');
require('core-js/es7/reflect');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
var testing = require('#angular/core/testing');
var browser = require('#angular/platform-browser-dynamic/testing');
testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
The webpack.common.js file is
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
'polyfills': '../main/src/polyfills.ts',
'vendor': '../main/src/vendor.ts',
'app': '../main/src/main.ts'
},
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
},
{
test: /\.css$/,
exclude: helpers.root('main/src', 'app'),
loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
},
{
test: /\.css$/,
include: helpers.root('main/src', 'app'),
loader: 'raw'
}
]
}
};
And webpack.test.js is:
var helpers = require('./helpers');
module.exports = {
devtool: 'cheap-module-source-map',
entry: {
'app': '../main/src/main.ts'
},
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'null'
},
{
test: /\.css$/,
exclude: helpers.root('src', 'app'),
loader: 'null'
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw'
}
]
}
}
Any idea why am i getting this error?

I have been following the same path and eventually decided to not use webpack when running my tests.
If that is a viable option for you, you could try the following:
let mocha compile your files:
"scripts": {
"test": "mocha --compilers ts:ts-node/register app "
}
configure TestBed to read your resource from the file system
testing.TestBed.initTestEnvironment(
browser.BrowserDynamicTestingModule,
browser.platformBrowserDynamicTesting()
);
testing.TestBed.configureCompiler({
providers: [ {
provide:require('#angular/compiler').ResourceLoader,
useValue:{
get:function(url){
var content = require('fs').readFileSync('./app/lib/' + url)
.toString();
return content;
}
}
}],
useJit: true
});
You can see that approach applied in this working example:https://github.com/ericminio/learning-typescript/blob/master/app/angular.component.spec.ts
Hope that helps

dest.write is not a function in gulp with broswerify

I try to build my react project using gulp and browserify. But every time I try to build the bundle I get this error:
[16:19:54] Using gulpfile /var/www/html/new-webclass/gulpfile.js
[16:19:54] Starting 'build'...
[16:19:54] 'build' errored after 36 ms
[16:19:54] TypeError: gulp.src(...).pipe(...).pipe is not a function
at Gulp.<anonymous> (/var/www/html/new-webclass/gulpfile.js:80:6)
at module.exports (/var/www/html/new-webclass/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/var/www/html/new-webclass/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/var/www/html/new-webclass/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/var/www/html/new-webclass/node_modules/orchestrator/index.js:134:8)
at /usr/lib/node_modules/gulp-cli/lib/versioned/^3.7.0/index.js:46:20
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
at Module.runMain (module.js:592:11)
at run (bootstrap_node.js:394:7)
/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:623
var written = dest.write(chunk);
^
TypeError: dest.write is not a function
at write (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:623:24)
at flow (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:632:7)
at DestroyableTransform.pipeOnReadable (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:664:5)
at emitNone (events.js:86:13)
at DestroyableTransform.emit (events.js:185:7)
at emitReadable_ (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:448:10)
at emitReadable (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:444:5)
at readableAddChunk (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:187:9)
at DestroyableTransform.Readable.push (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:149:10)
at DestroyableTransform.Transform.push (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_transform.js:145:32)
TypeError: dest.write is not a function. Okay this is strange. I can't find any solution.
package.json (devDependencies only)
devDependencies": {
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"babelify": "^7.3.0",
"bootstrap-sass": "^3.3.7",
"browserify": "^13.1.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-pug": "^3.0.4",
"gulp-sass": "^2.3.2",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
}
Bellow is my gulpfile require section.
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const pug = require('gulp-pug');
const browserify = require('browserify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
And here the task I use for bundle.
gulp.task('build', function() {
return gulp.src('./react/index.jsx')
.pipe(browserify({
extensions: ['.jsx'],
debug: true,
cache: {},
packageCache: {},
fullPaths: true
}))
.pipe(babelify.configure({ presets: ['es2015', 'react', 'stage-0'] }))
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(gulp.dest('./public/react/'));
});
Is there another way to do the bundle? What is going wrong?

It took me a while (actually all day) to figure it out. The whole configuration was wrong. This is the right one:
gulp.task('build', function() {
return browserify({
extensions: ['.jsx', '.js'],
debug: true,
cache: {},
packageCache: {},
fullPaths: true,
entries: './react/index.js',
})
.transform(babelify.configure({
presets: ['es2015', 'react', 'stage-0'],
ignore: /(bower_components)|(node_modules)/
}))
.bundle()
.on("error", function (err) { console.log("Error : " + err.message); })
.pipe(source('bundle.js'))
.pipe(gulp.dest('./public/react'));
});
Src: Using React with ES6 and Browserify by wecodetheweb.com