search

cascornelissen / svg-spritemap-webpack-plugin

SVG spritemap plugin for webpack
MIT License
210 stars 51 forks source link

Spritemap plugin does not work with Storybook #155

Closed wrux closed 3 years ago

wrux commented 3 years ago

Description The sprite map plugin does not work in combination with Storybook.

Expected behaviour In my project it works fine in the standard build pipeline, but not with Storybook.

My Storybook config: 

const path = require('path');
const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');

module.exports = {
  addons: [
    '@storybook/addon-backgrounds',
    '@storybook/addon-docs',
    '@storybook/addon-viewport',
    '@storybook/addon-controls',
    '@storybook/addon-knobs',
    '@storybook/addon-a11y',
  ],
  stories: [
    '../components/**/*.stories.js',
  ],
  webpackFinal: async (config) => {
    config.plugins.push(new SVGSpritemapPlugin([
      path.resolve(__dirname, '../resources/icons/**/*.svg'),
    ], {}));
    return config;
  },
};

Actual behaviour

Storybook exists on startup with the following exception:

info => Using default Webpack setup
ERR! TypeError: Cannot read property 'tap' of undefined
ERR!     at site/htdocs/node_modules/svg-spritemap-webpack-plugin/lib/index.js:466:41
ERR!     at SyncHook.eval [as call] (eval at create (site/htdocs/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
ERR!     at SyncHook.lazyCompileHook (site/htdocs/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Compiler.newCompilation (site/htdocs/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:630:30)
ERR!     at site/htdocs/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:667:29
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (site/htdocs/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (site/htdocs/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Compiler.compile (site/htdocs/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:662:28)
ERR!     at site/htdocs/node_modules/@storybook/core/node_modules/webpack/lib/Watching.js:77:18
ERR!     at _next0 (eval at create (site/htdocs/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:34:1)
ERR!     at eval (eval at create (site/htdocs/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:44:1)
ERR!     at watchRunHook (site/htdocs/node_modules/webpack-virtual-modules/index.js:173:5)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (site/htdocs/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:40:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (site/htdocs/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Watching._go (site/htdocs/node_modules/@storybook/core/node_modules/webpack/lib/Watching.js:41:32)
ERR!     at site/htdocs/node_modules/@storybook/core/node_modules/webpack/lib/Watching.js:33:9
ERR!  TypeError: Cannot read property 'tap' of undefined
ERR!     at site/htdocs/node_modules/svg-spritemap-webpack-plugin/lib/index.js:466:41
ERR!     at SyncHook.eval [as call] (eval at create (site/htdocs/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
ERR!     at SyncHook.lazyCompileHook (site/htdocs/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Compiler.newCompilation (site/htdocs/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:630:30)
ERR!     at site/htdocs/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:667:29
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (site/htdocs/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (site/htdocs/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Compiler.compile (site/htdocs/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:662:28)
ERR!     at site/htdocs/node_modules/@storybook/core/node_modules/webpack/lib/Watching.js:77:18
ERR!     at _next0 (eval at create (site/htdocs/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:34:1)
ERR!     at eval (eval at create (site/htdocs/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:44:1)
ERR!     at watchRunHook (site/htdocs/node_modules/webpack-virtual-modules/index.js:173:5)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (site/htdocs/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:40:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (site/htdocs/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at Watching._go (site/htdocs/node_modules/@storybook/core/node_modules/webpack/lib/Watching.js:41:32)
ERR!     at site/htdocs/node_modules/@storybook/core/node_modules/webpack/lib/Watching.js:33:9

System information

  System:
    OS: macOS 11.2.1
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 223.85 MB / 16.00 GB
    Shell: 5.8 - /usr/local/bin/zsh
  Binaries:
    Node: 14.15.5 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.11 - /usr/local/bin/npm
  npmPackages:
    @fullhuman/postcss-purgecss: ^4.0.2 => 4.0.2 
    @storybook/addon-a11y: ^6.1.21 => 6.1.21 
    @storybook/addon-backgrounds: ^6.1.21 => 6.1.21 
    @storybook/addon-controls: ^6.1.21 => 6.1.21 
    @storybook/addon-docs: ^6.1.21 => 6.1.21 
    @storybook/addon-knobs: ^6.1.21 => 6.1.21 
    @storybook/addon-viewport: ^6.1.21 => 6.1.21 
    @storybook/html: ^6.1.21 => 6.1.21 
    @tailwindcss/postcss7-compat: ^2.0.3 => 2.0.3 
    autoprefixer: ^9.8.6 => 9.8.6 
    eslint: ^7.21.0 => 7.21.0 
    eslint-config-google: ^0.14.0 => 0.14.0 
    eslint-config-prettier: ^7.2.0 => 7.2.0 
    eslint-plugin-prettier: ^3.3.1 => 3.3.1 
    html-webpack-plugin: ^5.3.0 => 5.3.0 
    laravel-mix: ^6.0.13 => 6.0.13 
    postcss: ^8.2.7 => 8.2.7 
    postcss-cli: ^8.3.1 => 8.3.1 
    postcss-import: ^12.0.1 => 12.0.1 
    postcss-loader: ^4.2.0 => 4.2.0 
    postcss-nested: ^5.0.5 => 5.0.5 
    prettier-plugin-twig-melody: ^0.4.6 => 0.4.6 
    stylelint: ^13.12.0 => 13.12.0 
    stylelint-order: ^0.8.0 => 0.8.1 
    stylelint-webpack-plugin: ^2.0.0 => 2.1.1 
    svg-spritemap-webpack-plugin: ^3.9.0 => 3.9.0 
    tailwindcss-filters: ^3.0.0 => 3.0.0 
    ts-loader: ^8.0.17 => 8.0.17 
    twig: ^1.15.0 => 1.15.4 
    twigjs-loader: ^1.0.1 => 1.0.2 
    typescript: ^4.2.3 => 4.2.3 
    webpack: ^5.24.4 => 5.24.4

Minimal reproduction

  1. Create a storybook-html project
  2. Install svg-spritemap-webpack-plugin
  3. Use the config posted earlier above
cascornelissen commented 3 years ago

Tried figuring this out but something strange is happening. You seem to be using 3.9 but the stacktrace references L466 which seems totally unrelated to TypeError: Cannot read property 'tap' of undefined.

Is your project public or can you share a repository that reproduces the issue to do some debugging?

cascornelissen commented 3 years ago

Closing this because it's inactive, feel free to comment on this if you have more information ✌🏼