ReferenceError: Can't find variable: exports

[quirimmo]

Background: I have an AngularJS mixed with an Angular application, using the ng-upgrade module in order to make them live together.

So I have a mixing of ts and js inside the project and I am setting up karma in order to execute all the tests (ts and js ones).

When I execute karma and it parses the js files of the downgraded components, at the end of the js file I have an exports statement, as the following for example:

exports.registerDowngradedComponents = registerDowngradedComponents;

At that line, Karma gives me the following error:

ReferenceError: Can't find variable: exports

Here is my relevant parts of karma.config.js file:

// Docs and references for karma-typescript:

// karma-typescript plugin:
// https://www.npmjs.com/package/karma-typescript
// karma-typescript AngularJS integration and sample:
// https://github.com/monounity/karma-typescript/tree/master/examples/angularjs
// karma-typescript Angular2 integration and sample:
// https://github.com/monounity/karma-typescript/tree/master/examples/angular2
// karma-typescript Gulp integration and sample:
// https://github.com/monounity/karma-typescript/tree/master/examples/gulp

var karmaTypescriptAngular2Transform = require('karma-typescript-angular2-transform');

// Karma configuration
// Generated on Tue Dec 23 2014 13:37:34 GMT+0000 (GMT Standard Time)

module.exports = function (config) {
    config.set({

        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: '',


        // frameworks to use
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: ['jasmine', 'karma-typescript'],


        // list of files / patterns to load in the browser
        files: [
            'node_modules/babel-polyfill/dist/polyfill.js',
            
            // ng2 stuffs
            'node_modules/zone.js/dist/zone.js',
            'node_modules/zone.js/dist/long-stack-trace-zone.js',
            'node_modules/zone.js/dist/proxy.js',
            'node_modules/zone.js/dist/sync-test.js',
            'node_modules/zone.js/dist/jasmine-patch.js',
            'node_modules/zone.js/dist/async-test.js',
            'node_modules/zone.js/dist/fake-async-test.js',
            'node_modules/reflect-metadata/Reflect.js',
            'node_modules/systemjs/dist/system-polyfills.js',
            'node_modules/systemjs/dist/system.js',

            // ts definitions
            'app/**/*.ts',

            'spec/unit/stateMock.js',
            // spec files
            'app/**/*_spec.js',
            'app/**/*_spec.ts',
            // because views get compiled to templateCache
            'app/**/*.html'
        ],


        // all reporters and plugins have to be stated here
        plugins: [
            'karma-typescript',
            'karma-coverage',
            'karma-jasmine',
            'karma-phantomjs-launcher',
            'karma-chrome-launcher',
            'karma-htmlfile-reporter',
            'karma-junit-reporter',
            'karma-ng-html2js-preprocessor'
        ],


        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['progress', 'html', 'coverage', 'junit', 'karma-typescript'],


        htmlReporter: {
            outputFile: 'spec/reports/unit/unit_tests.html'
        },


        coverageReporter: {
            type: 'html',
            dir: 'spec/reports/coverage/',
            reporters: [{
                type: 'lcov',
                subdir: 'lcov'
            }, {
                type: 'html',
                subdir: 'report-html'
            }, {
                type: 'cobertura',
                subdir: '.',
                file: 'cobertura.xml'
            }]
        },


        junitReporter: {
            outputFile: 'spec/reports/unit/test-results.xml',
            suite: ''
        },

        ngHtml2JsPreprocessor: {
            moduleName: 'templates',
            stripPrefix: 'app/'
        },

        preprocessors: {
            '**/*.ts': ['karma-typescript'],
            'app/**/!(*spec|*_spec).js': ['coverage'],
            'app/**/*.html': ['ng-html2js'],
        },

        // start these browsers
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: ['PhantomJS'],

        // TypeScript configuration specification with ng2 options too
        karmaTypescriptConfig: {
            tsconfig: './tsconfig.json',
            bundlerOptions: {
                entrypoints: /_spec\.ts$/,
                transforms: [
                    karmaTypescriptAngular2Transform
                ]
            },
            compilerOptions: {
                lib: ['ES2015', 'DOM']
            }
        }

    });
};

Here my tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2015",
      "dom"
    ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "types": [
      "angular",
      "node",
      "jasmine"
    ]
  }
}

Any idea how to fix that please? I looked to all the questions quite related to it but no luck.

Any help would be really appreciated. Thanks.

[Ian5015]

@quirimmo Have you found a solution for this? I'm running into a similar issue.

[quirimmo]

Hi @lan5015,

Yes I did. In the tsconfig.json specify "amd" as module instead of commonjs. Let me know if it works

[quirimmo]

@Ian515

[Ian5015]

@quirimmo Unfortunately that just flips the problem to Can't find variable: define which seems like the same issue just for a different module system.

[quirimmo]

Could you explain me your project and what you are trying to achieve? same as me using ng-upgrade?

2017-07-25 17:01 GMT+01:00 Timothy Ian Munnerley [email protected]:

@quirimmo https://github.com/quirimmo Unfortunately that just flips the problem to Can't find variable: define which seems like the same issue just for a different module system.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/karma-runner/karma/issues/2749#issuecomment-317782859, or mute the thread https://github.com/notifications/unsubscribe-auth/AATMIxbmWWTgNvRQRMrPoGYcYG0_0w-fks5sRhF0gaJpZM4OGpi8 .

[tmillr]

Edit: sorry wrong repository, I though I was commenting on TypeScript....

I googled my error message and arrived here. It's strange, my current issue is that if I use an import statement I end up with emitted code that relies upon an (and fails since I'm just running a single-script vanilla browser project) "exports" variable even though module is set to "none" in my config.... This is confusing behavior to me especially since the hint for the "module" config property is "Specify module code generation". So I have it on "none" and yet ts is quite literally generating module/wrapper code and making incorrect assumptions. Either it should just leave my import statement untouched (and maybe throw an error or warning) or at the very least fallback to a UMD implementation that would work in all environments or at least check for the existence of a variable before trying to reference/dereference it? The former seeming the most logical to me as opposed to the current default behavior of "module": "none" of just assuming (in my case, incorrectly) I'm in a NodeJS environment all of the sudden and have access to an "exports" variable just because I used a single, browser-native ES6 import "./path/to/module" statement.... Idk what am I missing here?