PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR ReferenceError: Can't find variable: Map #408

New Issue

fergalmoran · 2025-08-09T17:16:10Z

fergalmoran commented

2025-08-09 17:16:10 +00:00

Originally created by @NVK15 on 9/21/2017

I have used "MVC ASP.NET Core with Angular" template.
I am trying to include phantomJS and run the tests, but i get the following errors:

ERROR in [at-loader] ..\\node_modules\zone.js\dist\zone.js.d.ts:122:11 TS2451: Cannot redeclare block-scoped variable 'Zone'. ERROR in [at-loader] ..\\node_modules\zone.js\ dist\zone.js.d.ts:363:14 TS2300: Duplicate identifier 'HasTaskState'. ERROR in [at-loader] ..\\node_modules\zone.js\ dist\zone.js.d.ts:372:14 TS2300: Duplicate identifier 'TaskType'. ERROR in [at-loader] ..\\node_modules\zone.js\ dist\zone.js.d.ts:458:15 TS2451: Cannot redeclare block-scoped variable 'Zone'.

PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR ReferenceError: Can't find variable: Map at ../wwwroot/dist/vendor.js:12460

Below are the node module version i have been using(package.json):

` "dependencies": {
    "@angular/animations": "4.1.2",
    "@angular/common": "4.1.2",
    "@angular/compiler": "4.1.2",
    "@angular/core": "4.1.2",
    "@angular/forms": "4.1.2",
    "@angular/http": "4.1.2",
    "@angular/platform-browser": "4.1.2",
    "@angular/platform-browser-dynamic": "4.1.2",
    "@angular/platform-server": "4.1.2",
    "@angular/router": "4.1.2",
    "@types/node": "7.0.18",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^2.0.5",
    "aspnet-webpack": "^1.0.29",
    "awesome-typescript-loader": "3.1.3",
    "bootstrap": "3.3.7",
    "css": "2.2.1",
    "css-loader": "0.28.1",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "2.1.0",
    "file-loader": "0.11.1",
    "html-loader": "0.4.5",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "preboot": "4.5.2",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.0",
    "style-loader": "0.17.0",
    "to-string-loader": "1.1.5",
    "typescript": "2.3.2",
    "url-loader": "0.5.8",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.0",
    "webpack-merge": "4.1.0",
    "zone.js": "0.8.10"
  },
  "devDependencies": {
    "@types/chai": "3.5.2",
    "@types/jasmine": "2.5.47",
    "chai": "3.5.0",
    "istanbul-instrumenter-loader": "^3.0.0",
    "jasmine-core": "2.6.1",
    "karma": "1.7.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-htmlfile-reporter": "^0.3.5",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-webpack": "2.0.3",
    "phantomjs-prebuilt": "^2.1.15"
  }`

and the tsconfig.json is as follows:

`{
	"compilerOptions": {
		"moduleResolution": "node",
		"target": "es5",
		"sourceMap": true,
		"experimentalDecorators": true,
		"emitDecoratorMetadata": true,
		"skipDefaultLibCheck": true,
		"lib": [ "es6", "dom" ],
		"types": [ "node" ]
	},
	"exclude": [
		"bin",
		"node_modules"
	],
	"atom": { "rewriteTsconfig": false }
}`

and the webpack.config.js code is :

`const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
		resolve: {
			extensions: ['.js', '.ts'],
			modules: [path.join(__dirname, "node_modules")]
		},
        output: {
            filename: '[name].js',
            publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
			rules: [
                { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [new CheckerPlugin()]
    };

    // Configuration for client-side bundle suitable for running in browsers
	const clientBundleOutputDir = '..//wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, {
		entry: { 'main-client': '..//ClientApp/boot-client.ts' },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
				manifest: require('..//wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin()
        ])
    });
    return [clientBundleConfig];
};
`

How can i solve the errors mentioned above? I have tried solutions mentioned in https://github.com/monounity/karma-typescript/issues/83. Nothing worked.

Any help would be appreciated!

Looking forward for some answer.

Thanks.

*Originally created by @NVK15 on 9/21/2017* I have used "MVC ASP.NET Core with Angular" template. I am trying to include phantomJS and run the tests, but i get the following errors: ` ERROR in [at-loader] ..\\node_modules\zone.js\dist\zone.js.d.ts:122:11 TS2451: Cannot redeclare block-scoped variable 'Zone'. ERROR in [at-loader] ..\\node_modules\zone.js\ dist\zone.js.d.ts:363:14 TS2300: Duplicate identifier 'HasTaskState'. ERROR in [at-loader] ..\\node_modules\zone.js\ dist\zone.js.d.ts:372:14 TS2300: Duplicate identifier 'TaskType'. ERROR in [at-loader] ..\\node_modules\zone.js\ dist\zone.js.d.ts:458:15 TS2451: Cannot redeclare block-scoped variable 'Zone'.` `PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR ReferenceError: Can't find variable: Map at ../wwwroot/dist/vendor.js:12460` Below are the node module version i have been using(package.json): ``` ` "dependencies": { "@angular/animations": "4.1.2", "@angular/common": "4.1.2", "@angular/compiler": "4.1.2", "@angular/core": "4.1.2", "@angular/forms": "4.1.2", "@angular/http": "4.1.2", "@angular/platform-browser": "4.1.2", "@angular/platform-browser-dynamic": "4.1.2", "@angular/platform-server": "4.1.2", "@angular/router": "4.1.2", "@types/node": "7.0.18", "angular2-template-loader": "0.6.2", "aspnet-prerendering": "^2.0.5", "aspnet-webpack": "^1.0.29", "awesome-typescript-loader": "3.1.3", "bootstrap": "3.3.7", "css": "2.2.1", "css-loader": "0.28.1", "es6-shim": "0.35.3", "event-source-polyfill": "0.0.9", "expose-loader": "0.7.3", "extract-text-webpack-plugin": "2.1.0", "file-loader": "0.11.1", "html-loader": "0.4.5", "isomorphic-fetch": "2.2.1", "jquery": "3.2.1", "json-loader": "0.5.4", "preboot": "4.5.2", "raw-loader": "0.5.1", "reflect-metadata": "0.1.10", "rxjs": "5.4.0", "style-loader": "0.17.0", "to-string-loader": "1.1.5", "typescript": "2.3.2", "url-loader": "0.5.8", "webpack": "2.5.1", "webpack-hot-middleware": "2.18.0", "webpack-merge": "4.1.0", "zone.js": "0.8.10" }, "devDependencies": { "@types/chai": "3.5.2", "@types/jasmine": "2.5.47", "chai": "3.5.0", "istanbul-instrumenter-loader": "^3.0.0", "jasmine-core": "2.6.1", "karma": "1.7.0", "karma-chai": "0.1.0", "karma-chrome-launcher": "2.1.1", "karma-cli": "1.0.1", "karma-coverage-istanbul-reporter": "^1.3.0", "karma-htmlfile-reporter": "^0.3.5", "karma-jasmine": "1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "karma-phantomjs-launcher": "^1.0.4", "karma-webpack": "2.0.3", "phantomjs-prebuilt": "^2.1.15" }` ``` and the tsconfig.json is as follows: ``` `{ "compilerOptions": { "moduleResolution": "node", "target": "es5", "sourceMap": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "skipDefaultLibCheck": true, "lib": [ "es6", "dom" ], "types": [ "node" ] }, "exclude": [ "bin", "node_modules" ], "atom": { "rewriteTsconfig": false } }` ``` and the webpack.config.js code is : ``` `const path = require('path'); const webpack = require('webpack'); const merge = require('webpack-merge'); const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; module.exports = (env) => { // Configuration in common to both client-side and server-side bundles const isDevBuild = !(env && env.prod); const sharedConfig = { stats: { modules: false }, context: __dirname, resolve: { extensions: ['.js', '.ts'], modules: [path.join(__dirname, "node_modules")] }, output: { filename: '[name].js', publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix }, module: { rules: [ { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] }, { test: /\.html$/, use: 'html-loader?minimize=false' }, { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] }, { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' } ] }, plugins: [new CheckerPlugin()] }; // Configuration for client-side bundle suitable for running in browsers const clientBundleOutputDir = '..//wwwroot/dist'; const clientBundleConfig = merge(sharedConfig, { entry: { 'main-client': '..//ClientApp/boot-client.ts' }, output: { path: path.join(__dirname, clientBundleOutputDir) }, plugins: [ new webpack.DllReferencePlugin({ context: __dirname, manifest: require('..//wwwroot/dist/vendor-manifest.json') }) ].concat(isDevBuild ? [ // Plugins that apply in development builds only new webpack.SourceMapDevToolPlugin({ filename: '[file].map', // Remove this line if you prefer inline source maps moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk }) ] : [ // Plugins that apply in production builds only new webpack.optimize.UglifyJsPlugin() ]) }); return [clientBundleConfig]; }; ` ``` How can i solve the errors mentioned above? I have tried solutions mentioned in [https://github.com/monounity/karma-typescript/issues/83](url). Nothing worked. Any help would be appreciated! Looking forward for some answer. Thanks.

fergalmoran closed this issue

2025-08-09 17:16:10 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#408