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

[mulmulovich]

after upgrading typescript to 2.6.2 this error came:

PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR
  ReferenceError: Can't find variable: Map
  at C:/Users/mulib/AppData/Local/Temp/karma-typescript-bundle-18200HMYQq15egrsV.js:97186

Map is lodash Map declared under @types/lodash

i'm using:

"typescript": "2.6.2"
"webpack": "^3.10.0",
    "karma": "1.5.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-coverage": "1.1.1",
    "karma-junit-reporter": "1.2.0",
    "karma-mocha": "1.3.0",
    "karma-mocha-reporter": "2.2.3",
    "karma-phantomjs-launcher": "1.0.4",
    "karma-remap-coverage": "0.1.4",
    "karma-remap-istanbul": "0.6.0",
    "karma-sinon": "1.0.5",
    "karma-sourcemap-loader": "0.3.7",
    "karma-webpack": "2.0.3",
    "karma-typescript": "3.0.8"

please advise if its a bug or i missing some configuration

[erikbarke]

Have you included a polyfill for Map? PhantomJs: Can't find variable map

[mulmulovich]

yes, tries core-js and es6-shim.

the issue is that the error came from this piece of code on karma-typescript bundle:

/**
 * ReactElementValidator provides a wrapper around a element factory
 * which validates the props passed to the element. This is intended to be
 * used only in DEV and could be replaced by a static type checker for languages
 * that support it.
 */

{
  var currentlyValidatingElement = null;

  var propTypesMisspellWarningShown = false;

  var getDisplayName = function (element) {
    if (element == null) {
      return '#empty';
    } else if (typeof element === 'string' || typeof element === 'number') {
      return '#text';
    } else if (typeof element.type === 'string') {
      return element.type;
    } else if (element.type === REACT_FRAGMENT_TYPE) {
      return 'React.Fragment';
    } else {
      return element.type.displayName || element.type.name || 'Unknown';
    }
  };

  var getStackAddendum = function () {
    var stack = '';
    if (currentlyValidatingElement) {
      var name = getDisplayName(currentlyValidatingElement);
      var owner = currentlyValidatingElement._owner;
      stack += describeComponentFrame(name, currentlyValidatingElement._source, owner && getComponentName(owner));
    }
    stack += ReactDebugCurrentFrame.getStackAddendum() || '';
    return stack;
  };
// the error came from this guy:
  var VALID_FRAGMENT_PROPS = new Map([['children', true], ['key', true]]);
}

any ideas?

[erikbarke]

How are you loading the polyfill, with an import/require in your code or in the Karma config file list? Is the polyfill present in the bundle?

[mulmulovich]

i using it in the files tried this:

        files: [
            './node_modules/es6-shim/es6-shim.js'
        ],

and this:

        files: [
            'node_modules/es6-shim/es6-shim.js'
        ],

also tried to use core-js in same way...

actually, i cant find es6-shim.js code in the bundle (see attached) karma-typescript-bundle-93088Z117OgkKVtq..txt

thank you for the response!

[erikbarke]

If you're specifying the polyfill in the files section it will be loaded in the browser by Karma directly, it won't get bundled, which is expected behavior. In what order are you listing the files, is the polyfill listed before all the rest? Does Karma complain about not finding the file?

[mulmulovich]

the polyfill is first. how can i check if the file loaded to the browser?

[erikbarke]

Are you able to new up an instance of Map in your own code? This looks like a race condition, does it work if you add the polyfill like in this example?

[mulmulovich]

gave up phantomJS and went for ChromeHeadless:

karma.conf.js

process.env.CHROME_BIN  =  require('puppeteer').executablePath()
module.exports = function(config) {
    config.set({
        karmaTypescriptConfig: {
            tsconfig: "./tsconfig.json",
            bundlerOptions: {
                exclude: [
                    "react/addons",
                    "react/lib/ExecutionEnvironment",
                    "react/lib/ReactContext",
                ]
            },
            coverageOptions: {
                instrumentation: true,
                exclude: /\.(d|spec|test)\.(ts|tsx)/i
            },
            reports: {
                "cobertura": {
                    "directory": "build_reports/coverage",
                    "filename": "coverage.xml",
                    "subdirectory": "cobertura"
                },
                "html": "build_reports/coverage",
                "text-summary": ""
            }
        },
        frameworks: ['mocha', 'karma-typescript'],
        files: [
            { pattern: '!(node_modules|Server|dist)/**/*.+(ts|tsx)' }
        ],
        "exclude": [
            "**/*.d.ts"
        ],
        preprocessors: {
            '!(node_modules|Server|dist)/**/*.+(ts|tsx)': 'karma-typescript',
        },
        reporters: ['progress', 'junit', 'mocha', 'karma-typescript'],

        junitReporter: {
            outputDir: 'build_reports/test-results',
            outputFile: 'test-results.xml'
        },

        browsers: ['ChromeHeadless'],
        plugins: [
            'karma-chrome-launcher',
            'karma-typescript',
            'karma-mocha',
            'karma-junit-reporter',
            'karma-mocha-reporter'
        ],
        // singleRun: true,

        colors: true,

        logLevel: config.LOG_INFO,
    });
};

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "lib": [
            "dom",
            "es6"
        ],
        "target": "es5",
        "sourceMap": true,
        "declaration": true,
        "outDir": "dist",
        "jsx": "react",
        "types": [
            "node",
            "chai",
            "mocha"
        ],
        "typeRoots": [
            "./node_modules/@types"
        ]
    },
    "exclude": [
        "./node_modules",
        "./dist"
    ]
}

package.json

{
    "name": "@optima/core-ui-libs",
    "version": "0.1.31",
    "description": "XXX",
    "main": "index.js",
    "types": "index.d.ts",
    "config": {
        "proxy": "http://genproxy:8080/",
        "https-proxy": "http://genproxy:8080/",
        "no-proxy": "10.234.211.120"
    },
    "scripts": {
        "test": "gulp test"
    },
    "author": "Muli",
    "license": "ISC",
    "publishConfig": {
        "registry": "http://10.234.211.120:8081/repository/npm-internal/"
    },
    "dependencies": {
        "axios": "0.16.0",
        "bootstrap-sass": "3.3.7",
        "classnames": "^2.2.5",
        "file-saver": "^1.3.3",
        "karma-chrome-launcher": "^2.2.0",
        "lodash": "4.17.4",
        "moment": "^2.18.1",
        "react-bootstrap": "^0.31.0",
        "react-day-picker": "^5.5.1",
        "react-responsive-component": "^1.1.0",
        "react-scrollchor": "^4.1.0",
        "react-transition-group": "^1.2.0",
        "revalidator": "^0.3.1",
        "uuid": "^3.1.0",
        "xlsx": "^0.11.6"
    },
    "devDependencies": {
        "@types/file-saver": "0.0.1",
        "@types/lodash": "^4.14.55",
        "@types/react": "^15.0.24",
        "@types/react-bootstrap": "0.0.49",
        "@types/react-dom": "^15.5.0",
        "@types/react-redux": "^4.4.40",
        "@types/revalidator": "^0.3.5",
        "@types/xlsx": "0.0.36",
        "core-js": "^2.5.3",
        "karma-chrome-launcher": "^2.2.0",
        "karma-junit-reporter": "^1.2.0",
        "karma-mocha": "^1.3.0",
        "karma-mocha-reporter": "^2.2.5",
        "karma-typescript": "^3.0.9",
        "mocha": "^4.0.1",
        "puppeteer": "^0.13.0",
        "react": "^15.5.4",
        "react-dom": "^15.5.4",
        "react-redux": "^5.0.5",
        "typescript": "^2.3.2",
        "util": "^0.10.3"
    }
}

so...after making the changes i got this:

C:\mulib_workspaces\Optima\ui\FE\Core\node_modules\.bin>gulp test
[14:33:06] Working directory changed to C:\mulib_workspaces\Optima\ui\FE\Core
[14:33:10] Using gulpfile C:\mulib_workspaces\Optima\ui\FE\Core\gulpfile.js
[14:33:10] Starting 'set-env-development'...
[14:33:10] Finished 'set-env-development' after 4.81 ms
[14:33:10] Starting 'i18n'...
[14:33:10] Running lang
[14:33:10] executing >>> node build/translate.js | {"stdio":"inherit"}
[14:33:10] Starting 'lint'...
[14:33:10] Running lint
[14:33:11] Finished 'i18n' after 846 ms
[14:33:12] Finished 'lint' after 1.93 s
[14:33:12] Starting 'test'...
[14:33:12] Running tests
[14:33:12] Package dependencies are OK!
[14:33:12] executing >>> node ../../node_modules/karma/bin/karma start | {"cwd":"C:\\mulib_workspaces\\Optima\\ui\\FE\\Core\\app-core\\fe-common","stdio":"inherit"}
21 12 2017 14:33:19.774:INFO [compiler.karma-typescript]: Compiling project using Typescript 2.6.2
21 12 2017 14:33:31.118:INFO [compiler.karma-typescript]: Compiled 113 files in 10575 ms.
21 12 2017 14:33:41.866:INFO [bundler.karma-typescript]: Bundled imports for 112 file(s) in 10243 ms.
21 12 2017 14:33:44.981:WARN [karma]: No captured browser, open http://localhost:9876/
21 12 2017 14:33:45.011:INFO [karma]: Karma v1.5.0 server started at http://0.0.0.0:9876/
21 12 2017 14:33:45.012:INFO [launcher]: Launching browser ChromeHeadless with unlimited concurrency
21 12 2017 14:33:45.014:ERROR [launcher]: Cannot load browser "ChromeHeadless": it is not registered! Perhaps you are missing some plugin?
21 12 2017 14:33:45.015:ERROR [karma]: Found 1 load error
[14:33:45] Automated tests ended with FAILURE!!! error: process exited with code 1
[14:33:45] Finished 'test' after 33 s

i obviously installed karma-chrome-launcher and even add him to the plugins section of karma.conf.js

not clear to me why he complain about it...

[erikbarke]

@mulmulovich, were you able to solve your issues?