Error: No element indexed by 1

I get this error when I’m packaging the bundle for production.

~/node_modules/webpack/node_modules/webpack-core/node_modules/source-map/lib/source-map/array-set.js:84
      throw new Error('No element indexed by ' + aIdx);
      ^
  Error: No element indexed by 1
    at ArraySet_at [as at] (~/node_modules/webpack/node_modules/webpack-core/node_modules/source-map/lib/source-map/array-set.js:84:11)
    at SourceMapConsumer_parseMappings [as _parseMappings] (~/node_modules/webpack/node_modules/webpack-core/node_modules/source-map/lib/source-map/source-map-consumer.js:410:44)
    at SourceMapConsumer.Object.defineProperty.get (~/node_modules/webpack/node_modules/webpack-core/node_modules/source-map/lib/source-map/source-map-consumer.js:73:14)
    at SourceMapConsumer_eachMapping [as eachMapping] (~/node_modules/webpack/node_modules/webpack-core/node_modules/source-map/lib/source-map/source-map-consumer.js:139:24)
    at Function.SourceNode_fromStringWithSourceMap [as fromStringWithSourceMap] (~/node_modules/webpack/node_modules/webpack-core/node_modules/source-map/lib/source-map/source-node.js:84:26)

My config file:

var webpack = require('webpack');
var commonsPlugin = webpack.optimize.CommonsChunkPlugin;
var dirDescription = webpack.ResolverPlugin.DirectoryDescriptionFilePlugin;
var path = require('path');
var fs = require('fs');
var autoprefixer = require('autoprefixer');


// The build is DEV by default
var isDev = JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true'));
// Pass the BUILD_RELEASE flag to pack it for production
var isPrerelease = JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'));

var definePlugin = new webpack.DefinePlugin({
  __PRERELEASE__: ('true' === isPrerelease),
  __DEV__: ('false' === isPrerelease)
});

var entryFileNameTemplate = isPrerelease === 'true' ? '[name]-[hash].js' : '[name].js';
var commonFileNameTemplate = isPrerelease === 'true' ? 'common-[hash].js' : 'common.js';

var plugins = [
    definePlugin,
    // Generates an extra chunk, which contains common modules shared between at least minChunks entry points. You must load the generated chunk before the entry point:
    // The second argument is the name of the chunk, as gleaned from the entrypoint hash above. Update it new entrypoints are added
    new commonsPlugin('common.js',commonFileNameTemplate,2),
    new webpack.ResolverPlugin(new dirDescription('bower.json', ['main']))
  ];


var outputLocation = __dirname + '/assets/bundles';

var entries = {
  bootstrap: 'bootstrap-sass!./entry/bootstrap.config.js',
  App: './entry/AppEntry'
};

// Output the assets to a separate folder for prerelease build.
var outputLocation = __dirname + '/public/assets';

// Minimize all javascript output of chunks. Loaders are switched into minimizing mode. You can pass an object containing UglifyJs options.
var uglifyPlugin = webpack.optimize.UglifyJsPlugin;
plugins.push(
  new uglifyPlugin({
    comments: false,
    compress: {
      warnings: false,
      drop_console: true,
      dead_code: true
    },
    mangle: {
      reserved: '$,require,exports,L,d3,webpackJsonp'
    }
  })
);

var CompressionPlugin = require("compression-webpack-plugin");
plugins.push(
  new CompressionPlugin({
      asset: "{file}.gz",
      algorithm: "gzip",
      regExp: /\.js$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
  })
);

// The stats json contains a useful property assetsByChunkName which is a object containing chunk name as key and filename(s) as value.
plugins.push(
  function() {
    this.plugin("done", function(stats) {

      var assets = {};
      stats.toJson()['assets'].forEach(function(item){
        if(/(jpg|gif|png|js)$/.test(item.name)){
          // assets.push(item.name);
          var np = item.name.match(/^(.*)-\w+(\..+)$/);
          if(np){
            assets[np[1]+np[2]] = np[0];
          }
        }
      });
      var manifest = {assets: assets}
      require("fs").writeFileSync(
        path.join(__dirname, 'assets', "manifest.json"), JSON.stringify(manifest));
    });
  }
)

// Search for equal or similar files and deduplicate them in the output. This comes with some overhead for the entry chunk, but can reduce file size effectively.
plugins.push(new webpack.optimize.DedupePlugin());

// Assign the module and chunk ids by occurrence count. Ids that are used often get lower (shorter) ids. This make ids predictable, reduces to total file size and is recommended.
// plugins.push(new webpack.optimize.OccurenceOrderPlugin());




// Generate source maps
devtool = isPrerelease === 'true' ? '@source-map' : null;


module.exports = {

  // 'context' sets the directory where webpack looks for module files you list in
  // your 'require' statements
  context: __dirname + '/assets',

  // 'entry' specifies the entry point, where webpack starts reading all
  // dependencies listed and bundling them into the output file.
  // The entrypoint can be anywhere and named anything - here we are calling it
  // '_application' and storing it in the 'assets/javascripts' directory
  entry: entries,

  // 'output' specifies the filepath for saving the bundled output generated by
  // wepback.
  // It is an object with options, and you can interpolate the name of the entry
  // file using '[name]' in the filename.
  // You will want to add the bundled filename to your '.gitignore'.
  output: {
    filename: entryFileNameTemplate,
    // We want to save the bundle in a bundles director
    path: outputLocation,
    // But we will expose it from the assets endpoint
    publicPath: '/assets/'
    , sourceMapFilename: '[file].map'
  },

  devtool: devtool,

  resolve: {
    // you can now require('file') instead of require('file.coffee')
    extensions: ['', '.js', '.json', '.coffee'],
    // Now you can require('file') instead of require('../../file')
    root: [__dirname + '/assets', path.join(__dirname, 'vendor/assets/components'), path.join(__dirname,'vendor/assets/javascripts')]
  },

  postcss: [ autoprefixer({ browsers: ['last 2 version'] }) ],

  // The 'module' and 'loaders' options tell webpack to use loaders.
  // @see http://webpack.github.io/docs/using-loaders.html
  module: {
    loaders: [
      // Pattern matches the coffeescript files with JSX markup
      // Pattern matches the coffeescript files
      {
        test: /\.js$/,
        loaders: ['babel?stage=1','jsx?harmony&stripTypes&target=es6&nonStrictEs6module'],
        exclude: /node_modules\/(?!react-bootstrap)|(bootstrap(-sass)?\.config.*)/
      },
      // Pattern matches the coffeescript files
      {
        test: /\.coffee$/,
        loaders: ['babel?stage=1','jsx?harmony', 'coffee']
      },
      // the url-loader uses DataUrls.
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url?limit=10000&minetype=application/font-woff'
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&minetype=application/octet-stream"
      },
      // the file emits files.
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file"
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&minetype=image/svg+xml"
      },
      {
        test: /\.scss$/,
        // Query parameters are passed to node-sass
        loader: 'style!css!postcss-loader!sass?outputStyle=expanded&includePaths[]=' + (path.resolve(__dirname, './node_modules'))
      },
      {
        test: /bootstrap-sass\/assets\/javascripts\//,
        // This is needed so that each bootstrap js file required by bootstrap-webpack has access to the jQuery object
        loader: 'imports?jQuery=jquery'
      },
      {
        test: /\.css$/,
        loader: 'style!css!postcss-loader'
      },
      // the url is like the file, but it inlines the image if it's below a certain file size.
      {
        test: /\.(png|jpg)$/,
        loader: 'url?limit=8192&name=[name]-[hash].[ext]'
      }
    ]
  },


  plugins: plugins
};

[ccorcos]

So this is 100% a sourcemap issue. I got webpack running, but without sourcemaps 👎

[catamphetamine]

So, I found the issue in my case:

If you do some Googling https://www.google.ru/search?newwindow=1&safe=off&es_sm=93&q="No+element+indexed+by+1"&oq="No+element+indexed+by+1"&gs_l=serp.3...25063.25245.0.25668.2.2.0.0.0.0.62.119.2.2.0....0...1c.1.64.serp..2.0.0.-ZDOlWEKDQU

You’ll get the idea that its because of somehow malformed source maps of the corresponding npm module being imported in the project https://github.com/mozilla/source-map/issues/76

My module was built with babel like this:

"babel-transpiled-modules": "babel ./source --optional runtime --out-dir ./babel-transpiled-modules --source-maps inline"

I switched it from inline source maps to external source maps:

"babel-transpiled-modules": "babel ./source --optional runtime --out-dir ./babel-transpiled-modules --source-maps"

And now it works - I can import this module in my project and webpack doesn’t output this error