​​Uncaught ReferenceError: exports is not defined​​

[kayzerkan]

Good Morning,

I'm sorry if I'm doing something wrong, this is my first Post on Github. My colleagues and I use Wallaby for our Angular7 applications. After alot of fiddling around we got Wallabyjs working. After some time we started to test HTTP Requests via Angulars HttpClientTestingModule and HttpTestingController, both from '@angular/common/http/testing'. But when using those I always get ​​"Uncaught ReferenceError: exports is not defined"​​ at "var testing2 = ($$w(54, 3), require('@angular/common/http/testing'));". I assume somethings wrong with my wallaby.js, but I can't figure out what. Thank you in advance.

var wallabyWebpack = require('wallaby-webpack');
var path = require('path');

var compilerOptions = Object.assign(
    require('./------/config/tsconfig.json').compilerOptions, // censored company information
    require('./test/unit/tsconfig.json').compilerOptions);

module.exports = function (wallaby) {

    var webpackPostprocessor = wallabyWebpack({
        entryPatterns: [
            'src/wallabyTest.js',
            'test/**/*.spec.js'
        ],

        module: {
            rules: [
                { test: /\.css$/, loader: ['raw-loader'] },
                { test: /\.html$/, loader: 'raw-loader' },
                { test: /\.ts$/, loader: '@ngtools/webpack', include: /node_modules/, query: { tsConfigPath: 'tsconfig.json' } },
                { test: /\.js$/, loader: 'angular2-template-loader', exclude: /node_modules/ },
                { test: /\.styl$/, loaders: ['raw-loader', 'stylus-loader'] },
                { test: /\.less$/, loaders: ['raw-loader', { loader: 'less-loader', options: { paths: [__dirname] } }] },
                { test: /\.scss$|\.sass$/, loaders: ['raw-loader', 'sass-loader'] },
                { test: /\.(jpg|png|svg)$/, loader: 'url-loader?limit=128000' }
            ]
        },

        resolve: {
            extensions: ['.js', '.ts'],
            modules: [
                path.join(wallaby.projectCacheDir, 'src/app'),
                path.join(wallaby.projectCacheDir, 'src'),
                'node_modules'
            ],
        },
        node: {
            fs: 'empty',
            net: 'empty',
            tls: 'empty',
            dns: 'empty'
        }
    });

    return {
        files: [
            { pattern: './src/**/*.+(ts|css|less|scss|sass|styl|html|json|svg)', load: false },
            { pattern: './test/**/*.config.ts', ignore: false },
            { pattern: './package.json', load: false }, // we use the version in one function so this ones needed
            { pattern: './test/**/*.spec.ts', ignore: true },
            { pattern: './test/**/*.d.ts', ignore: true },
        ],

        tests: [
            { pattern: './test/**/*.spec.ts' },
        ],

        testFramework: 'jasmine',

        compilers: {
            '**/*.ts': wallaby.compilers.typeScript({
                compilerOptions,
            })
        },

        env: {
            kind: 'chrome'
        },

        postprocessor: webpackPostprocessor,

        setup: function () {
            window.__moduleBundler.loadTests();
        },

        debug: true
    };
};

Our wallabyTest.ts doesn't deviate much from the one shown in the ngCliWebpackSample example.

Visual Studio Code v1.24.0 on Windows 7

[ArtemGovorov]

We have cloned the ngCliWebpackSample sample repo, added some code using @angular/common/http/testing:

+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';

+HttpClientTestingModule//?
+HttpTestingController//?

but everything seems to be working as expected for us:

If the error only shows up on your machine while working fine for your colleagues, then try the following:

• check the following folders existence on your disk:

  C:\Users\username\.vscode\extensions\node_modules
  C:\Users\username\.vscode\node_modules
  C:\Users\username\node_modules
  C:\Users\node_modules
  C:\node_modules

• if any of those exist - delete them.

If the issue can be reproduced by other members of your team too, please provide a sample repo demonstrating the issue, we are happy to take a look and investigate.

[kayzerkan]

Thanks for the quick response! They don't have the same problem. I tried reinstalling everything already. I should have noted, that the my tests pass and get executed perfectly via wallaby despite the error message and I can do the same Live Evaluation you did in your screenshot of both modules on my machine fine. Still tells me that exports is not defined when I open the "Wallaby.js Tests"-console.

[ArtemGovorov]

@kayzerkan Thanks for the clarification. Does Wallaby show any tests as failing in the Wallaby.js Tests console?

[kayzerkan]

No they all pass. Also when I start up wallaby, it doesn't show any errors at all. When I change something in the spec file where I have the Http Tests, the error occurs.

The wallabyFieldId always points to '@angular/common/http/testing'

[ArtemGovorov]

Interesting, have you tried deleting node modules in folders listed at https://github.com/wallabyjs/public/issues/1937#issuecomment-445723579?

Not sure what's causing it, we may need a sample repo where we could reproduce it locally (however it seems like you may just ignore the error as it doesn't seem to affect anything).

[kayzerkan]

Tried that, I had no node_modules in the folders you described. I tried deleting the ones in my project. Does it matter if I did the manual wallaby installation as described here?

[ArtemGovorov]

The offline installation shouldn't matter. It looks like there's something wrong with webpack compilation of the @angular/common/http/testing module, but it's hard to tell what exactly without a reproducible example.

[kayzerkan]

Sadly I can't provide a sample repo with the error. The error is in the company repo and I have no idea how to reproduce it in a sample repo. Is there any way I can try to find the problem myself? I tried explicitly adding the testing module to the files and resolve module properties of the wallaby.js config file. But that didn't help.

[ArtemGovorov]

Sadly I can't provide a sample repo with the error. The error is in the company repo and I have no idea how to reproduce it in a sample repo.

I'd suggest:

• playing with the ngCliWebpackSample sample repo to see if you can reproduce it there,
• or copy&pasting your company repo into a new folder, removing all tests but one where the issue can be reproduced, removing all dependencies, removing all tests but one empty it('...'), deleting all code but configs, so that there is nothing company related is left, and sharing the result.

[ArtemGovorov]

Is there any way I can try to find the problem myself?

You may try opening the http://localhost:port/____wallaby-bundle.js file in your browser (note that port in the URL changes every time Wallaby is started), and search for the @angular/common/http/testing module to see what't wrong with webpack bundling of it (or search for the exports in the bundle file, but there may be a few false positives/comments).

[kayzerkan]

I just noticed, we have some outdated libraries, maybe that will solve the problem. If that doesn't help I guess I will just ignore it. Will post an update.

[ArtemGovorov]

@kayzerkan Others in your team would probably be getting the same error then, but surely still worth trying.

[kayzerkan]

I just asked my colleagues if they encountered the same problem and they've told me they've been working on another project and didnt even have the time to set up their wallaby yet (we bought the keys like 2-3 weeks ago). I don't know if that changes anything. Sadly updating the dependencies didn't help.

[kayzerkan]

Is there any way I can try to find the problem myself?

You may try opening the http://localhost:port/____wallaby-bundle.js file in your browser (note that port in the URL changes every time Wallaby is started), and search for the @angular/common/http/testing module to see what't wrong with webpack bundling of it (or search for the exports in the bundle file, but there may be a few false positives/comments).

I didn't see this at first sorry. How can I find out the port? Is it the same when I open the wallaby app from vs code?

Edit: Alright after some clicking around and following the sandbox0.html and sandbox.html from the wallaby.js Console, I found exports not defined error on this line.

$_$w(53, 0), Object.defineProperty(exports, '__esModule', { value: true });

Does this help?

[ArtemGovorov]

How can I find out the port?

It's the same as in the error message displayed when you start Wallaby and encounter the error.

I don't know if that changes anything. Sadly updating the dependencies didn't help. I found exports not defined error on this line. $_$w(53, 0), Object.defineProperty(exports, '__esModule', { value: true });

This code is supposed to be a part of a function and the exports should be a parameter of the function.

The best and fastest option for us to help is to follow the instructions to reproduce the issue and share a sample with us.

[kayzerkan]

I can't do that would take me way too long considering all our architecture. Sorry. Should I just ignore the error then?

I tried what you described in https://github.com/wallabyjs/public/issues/1937#issuecomment-445747756 and found no '@angular/common/http/testing' module. '@angular/common' was included.

[ArtemGovorov]

I can't do that would take me way too long considering all our architecture. Sorry. Should I just ignore the error then?

Sure, you may the ignore the error as it doesn't seem to affect the test run.

If you however manage to create a sample repo maybe later at some point, we would still appreciate sharing it with us as we'd like to get to the bottom of the problem and fix it for you.

[kayzerkan]

So now I worked on some other tests and noticed that the missing package is arbitrary. So my problem doesn't lie with the angular package itself. Something breaks when I change a test (simple copy and paste of the same code is enough) in a spec after the start of wallaby

[ArtemGovorov]

This may mean that your test depends on some other tests to be executed first. An easy way to start troubleshooting it is to add //file.only comment anywhere in the test file, and restart Wallaby. It will make Wallaby only run this test file in isolation (and no other test files).

[kayzerkan]

First off my updated wallaby.js:

var wallabyWebpack = require('wallaby-webpack');
var path = require('path');

var compilerOptions = Object.assign(
    require('./node_modules/-----/config/tsconfig.json').compilerOptions,
    require('./src/tsconfig.json').compilerOptions,
    require('./test/unit/tsconfig.json').compilerOptions);

module.exports = function (wallaby) {

    var webpackPostprocessor = wallabyWebpack({
        entryPatterns: [
            'test/unit/wallabyTest.js',
            'test/unit/**/*.spec.js'
        ],

        module: {
            rules: [
                { test: /\.css$/, loader: ['raw-loader'] },
                { test: /\.html$/, loader: 'raw-loader' },
                { test: /\.ts$/, loader: '@ngtools/webpack', include: /node_modules/, query: { tsConfigPath: 'tsconfig.json' } },
                { test: /\.js$/, loader: 'angular2-template-loader', exclude: /node_modules/ },
                { test: /\.styl$/, loaders: ['raw-loader', 'stylus-loader'] },
                { test: /\.less$/, loaders: ['raw-loader', { loader: 'less-loader', options: { paths: [__dirname] } }] },
                { test: /\.scss$|\.sass$/, loaders: ['raw-loader', 'sass-loader'] },
                { test: /\.(jpg|png|svg)$/, loader: 'url-loader?limit=128000' }
            ]
        },

        resolve: {
            extensions: ['.js', '.ts'],
            modules: [
                path.join(wallaby.projectCacheDir, 'src/app'),
                path.join(wallaby.projectCacheDir, 'src'),
                'node_modules'
            ],
        },
        node: {
            fs: 'empty',
            net: 'empty',
            tls: 'empty',
            dns: 'empty'
        }
    });

    return {
        files: [
            { pattern: 'test/unit/wallabyTest.ts', load: false },
            { pattern: 'test/unit/**/*.config.ts', load: false },
            { pattern: 'src/app/app-version.json', load: false },
            { pattern: 'src/app/**/*.ts', load: false },
            { pattern: 'src/app/**/*.html', load: false },
            { pattern: 'test/unit/test.ts', load: false },
            { pattern: './test/**/*.spec.ts', ignore: true },
            { pattern: './test/**/*.d.ts', ignore: true },
        ],

        tests: [
            { pattern: './test/unit/**/*.spec.ts' },
        ],

        testFramework: 'jasmine',

        compilers: {
            '**/*.ts': wallaby.compilers.typeScript({
                compilerOptions,
            })
        },

        env: {
            kind: 'chrome'
        },

        postprocessor: webpackPostprocessor,

        setup: function () {
            window.__moduleBundler.loadTests();
        },

        debug: true,
    };
};

When putting //file.only anywhere on the file (line 1) I get:

​​Uncaught ReferenceError: exports is not defined​​ ​​at http://localhost:60623/test/unit/-----.service.spec.js?1544529205713&wallabyFileId=31:19​​

It always points to a service or component, but I include all the necessary files in my wallaby.js (which I updated)

When putting //file.only after my imports before my first describe method I get:

​​Uncaught ReferenceError: exports is not defined​​ at ​test/unit/-----.service.spec.ts:8​

Where line 8 is where I put //file.only

Hope this helps a bit.

[ArtemGovorov]

Thanks for sharing the details.

Firstly, the issue is not related to any missing files, looks like you are including all files in the files list correctly (the issue would be a different one otherwise).

From the error message it looks like something is not being compiled by Webpack correctly (for some reason).

• Is the error reproduced if you add //file.only to the ... .service.spec.ts (line 1) and remove all imports?
• Is the error reproduced if you add //file.only to the ... .service.spec.ts (line 1) and remove some imports (one by one to find the one causing the issue)?

[kayzerkan]

Alright I created a new spec.ts file with a expect(true).toBe(true) test and added the imports from the other file one by one. Without imports I had no problem at all. I could add as many tests as I wanted. After adding any import (it really didn't matter which one), wallaby ran all the tests, despite the "// file.only" and threw exports is not defined. After moving "// file.only" after the imports it only ran my new test but still had the exports not defined error.

[ArtemGovorov]

I think I have spotted the issue (which would actually take less than a minute to spot/troubleshoot if we had a sample repo to play with). There's a slight, but important deviation in your config from our ngCli sample, try this change:

        tests: [
-            { pattern: './test/**/*.spec.ts' },
+            { pattern: './test/**/*.spec.ts', load: false },
        ],

[kayzerkan]

That really did it. I didn't see that one even 'tho I checked the ngCli sample yesterday again. Thank you for your help and especially your patience. Top notch support.