webpack: 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
};
About this issue
- Original URL
- State: closed
- Created 9 years ago
- Comments: 17 (2 by maintainers)
Commits related to this issue
- Remove devtool from cli and use `eval` for config `devtool` shouldn't be declared at cli call given we already do that at the main config. I noticed that `eval-source-map` started throwing error as t... — committed to survivejs/react-book by bebraw 9 years ago
- Fix travis unit test failure Hack around whatever this root issue is https://github.com/webpack/webpack/issues/1071 — committed to kpdecker/jsdiff by kpdecker 9 years ago
So this is 100% a sourcemap issue. I got webpack running, but without sourcemaps 👎
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:
I switched it from inline source maps to external source maps:
And now it works - I can import this module in my project and webpack doesn’t output this error
Having the same issue with
webpack -p
. Disabling source maps withdevtool: 'eval'
also fixes the issue. (thanks @volkanunsal). It would be nice if webpack didn’t choke on the source maps though.