ReferenceError: Can't find variable: exports

[charleylla]

hi,when I run karma start there reports an error: ReferenceError: Can't find variable: exports.
here is my karma.conf.js:

// Karma configuration

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'],


    // list of files / patterns to load in the browser
    files: [
      "./src/**/*.js",
      "./test/**/*.spec.js"
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      "./src/**/*.js":["babel"],
      "./test/**/*.spec.js":["babel"]
    },

    
    babelPreprocessor: {
      options: {
        presets: ['env']
      }
    },
    // test results reporter to usex
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: false,


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


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

here is ./src/utils.js:

function throttle(fn,delay){
    let startTime = 0;
    return (...args)=>{
        let timeNow = +new Date();
        if(timeNow - startTime >= delay){
            fn(...args);
            startTime = timeNow;
        }
    }
}

export {
    throttle,
}

and ./src/main.js:

import {
    throttle,
} from "./utils.js";

export default class Praise{
    constructor(box,palm,maxCount){
        this.box = box;
        this.palm = palm;
        this.maxCount = maxCount;
        this._praiseCount = 0;
        this._init();
        this.bindEvents();
    }
    
    _init(){
        this.bindEvents = this.bindEvents.bind(this)
        this.clickHander = throttle(this.clickHander.bind(this),300);
        this.callCollection = this.callCollection.bind(this)
    }

    count(){
        ++this._praiseCount;
        if(this._praiseCount === this.maxCount){
            this._praiseCount = 0;
            return [1,1];
        }

        if(this._praiseCount > this.maxCount){
            this._praiseCount = 0;
            return [1,0];
        }
        console.log(this._praiseCount)
        return [0,1];
    }
    
    clickHander(e){
        const [ _disableFlag, _countFlag] = this.count();
        if(_disableFlag){
            this.box.className = "disable";
        }else{
            this.box.className="";
        }

        if(_countFlag){
            const numberEle = createPraiseNumberElement();
            this.box.appendChild(numberEle);
            setTimeout(()=>{
                numberEle.className = "number number-move";
                this.callCollection(numberEle);
            },50);
        }
    }

    callCollection(element){
        setTimeout(()=>{
            removeElement(element,this.box);
        },500)
    }

    bindEvents(){
        this.palm.addEventListener("mouseup",this.clickHander)
    }
}

function createPraiseNumberElement(){
    const box = document.createElement("div");
    box.className = "number";
    box.innerHTML = "+1";
    return box;
}

function removeElement(ele,parentElement){
    parentElement.removeChild(ele);
    ele = null;
}

I have installed babel-preset-env plugin and karma-babel-preprocessor plugin,how can I deal with this problem?

[shuhei]

Hi, as written in README:

babel and karma-babel-preprocessor only convert ES6 modules to CommonJS/AMD/SystemJS/UMD. If you choose CommonJS, you still need to resolve and concatenate CommonJS modules on your own. We recommend karma-browserify + babelify or webpack + babel-loader in such cases.

[shuhei]

Closing because this issue is inactive for a while.