TypeError: undefined is not an object

[iam-peekay]

Hello. Sorry for creating another issue. I am just incredibly confused why PhantomJS launcher keeps saying any window objects / fetch is undefined. Here is my karma.conf.js

var path = require('path');
var webpack = require('webpack');
var webpackConfig = require('./config/webpack/webpack.config');

webpackConfig.module = {
  loaders: [
    {
      test: /\.js$/,
      loader: 'babel',
      include: path.join(__dirname, 'app/frontend')
    },
    { test: /\.json$/, loader: 'json-loader' },
    { test: /\.css$/, loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]' },
    { test: /\.scss$/, loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]!resolve-url!sass?outputStyle=expanded' },
    { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' } // inline base64 URLs for <=8k images, direct URLs for the rest
  ],
  noParse: [
    /node_modules\/sinon\//
  ]
};

  module.exports = function (config) {
    config.set({
    browsers: [ 'PhantomJS' ],
    singleRun: true, //just run once by default
    frameworks: [ 'mocha' ], //use the mocha test framework
    files: [
    'app/.config/karma/test.bundle.js' //just load this file
    ],
    preprocessors: {
      'app/frontend/.config/karma/test.bundle.js': [ 'webpack',   'sourcemap' ]  
    },
    reporters: [ 'dots' ],  
    webpack: webpackConfig,
    colors: true,
    webpackServer: {
    noInfo: true
    },
    phantomjsLauncher: {
      exitOnResourceError: true
    }
  });
};

It keeps failing because it says window objects are undefined. If you can provide any insight into what I might be doing wrong here, that'd be awesome.

[dignifiedquire]

window.fetch is native to the browser. PhantomJS is quite old and simply does not support it, so you will need to use a polyfill if you want to use it in PhantomJS, like https://www.npmjs.com/package/whatwg-fetch

[iam-peekay]

@dignifiedquire thank you for your response. I'm actually using the polyfill itself. Here's my webpack.config.js where you can see the polyfill inserted via ProvidePlugin

var path = require('path');
var webpack = require('webpack');
var StatsPlugin = require('stats-webpack-plugin');

var production = process.env.NODE_ENV === 'production';

var config = {
  entry: {
    'application': './app/index'
  },

  output: {
    path: path.join(__dirname, '..', '..', 'public', 'webpack'),
    publicPath: '/webpack/',

    filename: production ? '[name]-[chunkhash].js' : '[name].js'
  },

  resolve: {
    root: path.join(__dirname, '..', '..', 'app')
  },

  plugins: [
    new StatsPlugin('manifest.json', {
      chunkModules: false,
      source: false,
      chunks: false,
      modules: false,
      assets: true
    }),
    // window.featch polyfill
    new webpack.ProvidePlugin({
      'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
    }),
  ],

  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
      },
      {
        test: /\.jpe?g$|\.gif$|\.png$/i,
        loader: 'url-loader?limit=8192'
      }
    ]
  },
};

if (production) {
  config.plugins.push(
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compressor: { warnings: false },
      sourceMap: false
    }),
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify('production') }
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin()
  );
  config.module.loaders.push(
    {
      test: /\.js/,
      loader: 'babel',
      exclude: path.resolve(__dirname, 'node_modules/')
    }
  );
} else {
  config
  config.devServer = {
    headers: { 'Access-Control-Allow-Origin': '*' }
  };
  config.output = {
    filename: 'webpack-bundle.js',
    path: path.join(__dirname, './app/assets/javascripts'),
    publicPath: 'http://localhost:8080/assets'
  },
  // Source maps
  config.devtool = 'cheap-module-eval-source-map';
  config.module.loaders.push(
    {
      test: /\.js/,
      loaders: ['babel','eslint-loader'],
      exclude: path.resolve(__dirname, 'node_modules/')
    }
  );
}

module.exports = config;

[dignifiedquire]

Interesting. Could you a) show me a full stack trace of the errors and b) a small repro on how to test it?