"TypeError: loaders is not iterable" after upgrade to v4

[markplewis]

"TypeError: loaders is not iterable" after upgrade to v4

[bensampaio]

According to webpack documentation: rule.use must be a list not an object. Here: https://webpack.js.org/configuration/module/#rule-use. So you should change your loader config to:

{
  test: /\.svg$/,
  include: path.resolve(__dirname, "src/images"),
  use: [{
    loader: SvgStorePlugin.loader,
    options: {
      name: "svgs/sprite.svg",
      iconName: argv.mode === "development" ? "[name]" : "[name]-[hash:5]"
    }
  }]
}

[mrobrian]

For anyone else running into this issue and struggling to resolve it:

ALL of your rules, not just the rules for this plugin, need to have an array for the use parameter. While the Webpack documentation does say it should be an array or a function, it actually still accepts an object (as of webpack v4.28.4), but that will cause this loader to error.

[markplewis]

Thanks @bensampaio, that solved my problem! However, I swear that my Webpack build was previously working correctly, using the use: {} syntax. I upgraded from Webpack 4.19.1 to 4.25.1 at the same time that I upgraded external-svg-sprite-loader from 3.4.1 to 4.0.1, so maybe something changed with Webpack. At any rate, it looks like I was using use incorrectly, so thanks for alerting me to the problem. Also, thank you for this great loader!

[rekker]

Holy moly, sorry totally missed that.. that fixed it!!! Thank you!

[rekker]

It still keeps throwing the "TypeError: loaders is not iterable" error for me :

TypeError: loaders is not iterable
    at SvgStorePlugin.injectSpritesIntoRules (../node_modules/external-svg-sprite-loader/lib/SvgStorePlugin.js:177:35)
    at SvgStorePlugin.apply (../node_modules/external-svg-sprite-loader/lib/SvgStorePlugin.js:51:14)
    at webpack (../node_modules/webpack/lib/webpack.js:51:13)
...

Running webpack 4.41.2

My abbreviated webpack.config.js :

const SvgStorePlugin = require('external-svg-sprite-loader')

const webpackBaseConfig = function(env) {
  return {
    module: {
      rules: [
        {
          test: /\.svg$/,
          include: path.resolve(__dirname, "../src/imgs/icons"),
          use: [{
            loader: SvgStorePlugin.loader,
            options: {
              name: "icons-sprite.svg"
            }
          }]
        }
      ]
    },
    plugins: [
      new SvgStorePlugin(),
    ]
  }
}

Should this have been fixed or am I doing something not right?

[bensampaio]

@rekker the plugin searches in your webpack rules for occurrences of SvgStorePlugin.loader so it could be that the problem is in another rule in your config. Can you share the complete config?

[rekker]

Sure thing:

// Require Webpack
const webpack = require('webpack')

// Node's built-in path module, which prevents file path issues between operating systems
// Use NodeJS helper module to define correct absolute file reference paths
const path = require('path')

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
//const ExtractTextPlugin = require('extract-text-webpack-plugin');

// Generates an HTML5 file for you that includes all your webpack bundles in the body using script tags
const HtmlWebpackPlugin = require('html-webpack-plugin')

// const RobotstxtPlugin = require('robotstxt-webpack-plugin').default;

const WebpackNotifierPlugin = require('webpack-notifier')

//const SpriteLoaderPlugin = require('svg-sprite-loader/plugin')
const SvgStorePlugin = require('external-svg-sprite-loader')
//const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');

const CopyWebpackPlugin = require('copy-webpack-plugin')

const devMode = process.env.NODE_ENV !== 'production'

// MAIN WEBPACK CONFIGURATION
const webpackBaseConfig = function(env) {
  return {
    // Location of the index.js file
    // Where Webpack's begins it module compilation process
    entry: {
      // File containing our custom code
      global: './src/javascripts/global.js',

      // File containing our custom routes
      router: './src/javascripts/router.js',

      // File containing code from third party libraries
      vendor: ['jquery', 'picturefill', 'svg4everybody', 'slick-carousel']
    },

    // Newly compiled file configuration
    output: {
      // Save location of the newly compiled output file
      path: path.resolve(__dirname, '../web/build'),

      // What to call the newly compiled output file
      // [name] will be replaced with the entry objects key value.
      filename: '[name].config.base.js',

      // Path webpack will reference for looking for public files. Important for dynamic codesplitting
      publicPath: 'build/'
    },

    // Module Rules Systems => Configuration for webpack loaders
    module: {
      rules: [
        {
          test: /\.svg$/,
          include: path.resolve(__dirname, "../src/imgs/icons"),
          use: [{
            loader: SvgStorePlugin.loader,
            options: {
              name: "icons-sprite.svg"
            }
          }]
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        },
        {
          test: /\.scss$/,
          exclude: /node_modules/,
          use: [
            'style-loader',
            MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader'
          ]
        },
        {
          test: /\.(png|jpg|jpeg)$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 25000, // less 25k
                name: 'assets/images/[name].[ext]'
              }
            },
            {
              loader: 'image-webpack-loader'
            }
          ]
        }
      ]
    },

    // Don't follow/bundle these modules, but request them at runtime from the environment
    // externals: {
    //     Modernizr: 'modernizr'
    // },

    // Plugins => Configure webpack plugins
    plugins: [
      // The DefinePlugin allows you to create global constants which can be configured at compile time.
      // Note: process.env.NODE_ENV is set within npm "scripts"
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }),

      //new SpriteLoaderPlugin(),
      new SvgStorePlugin(),
      //new SVGSpritemapPlugin(),

      //new CopyWebpackPlugin([
      //  { from: './templates', to: 'static-templates' }
      //], { ignore: [
      //'./web/static-templates/_webpack.templates/_webpack.template.wrapper.twig'
      //]
      //}),
      // Generates an HTML5 file for you that includes all your webpack bundles in the body using script tags
      // NOTE: Add excludeChunks: ['fallback']
      new HtmlWebpackPlugin({
        template: './src/webpack.templates/_webpack.template.wrapper.twig',
        filename:
          '../../templates/_webpack.templates/_webpack.template.wrapper.twig'
      }),
      new WebpackNotifierPlugin({alwaysNotify: true})
    ]
  }
}

module.exports = webpackBaseConfig

[bensampaio]

I think the problem is your babel-loader configuration. As I mentioned above in this thread, according to the webpack docs, use is meant to be an array. It seems to work as an object but that is not documented so I don't know wether that's by coincidence or intended. This plugin traverses your config based on the multiple use cases described in the webpack docs. Since I would rather not make the traversing more complex I suggest you change your babel-loader config to this:

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: [{
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }]
},

Webpack docs of use: https://webpack.js.org/configuration/module/#ruleuse
My previous comment on this subject for reference: #58 (comment)