svg-url-loader works not properly in v4.0.0-alpha.16

[taksenov]

Bug or support request summary

Hello, im use StoryBook in my TypeScript project. Yesterday I noticed that the SVG-images are loading incorrectly, bug is present on image: http://joxi.ru/D2P4QR8IqdZ062

Please specify which version of Storybook and optionally any affected addons that you're running

My dependencies presents below:

  "dependencies": {
    "axios": "^0.18.0",
    "classnames": "^2.2.6",
    "connected-react-router": "^4.4.1",
    "history": "^4.7.2",
    "lodash": "^4.17.10",
    "moment": "^2.22.2",
    "qs": "^6.5.2",
    "react": "^16.4.2",
    "react-custom-scrollbars": "4.2.1",
    "react-dom": "^16.4.2",
    "react-dropzone": "4.2.5",
    "react-loadable": "5.3.1",
    "react-markdown": "3.1.4",
    "react-modal": "^3.5.1",
    "react-native-listener": "1.0.2",
    "react-redux": "^5.0.7",
    "react-redux-toastr": "git+https://github.com/taksenov/react-redux-toastr.git",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-select": "^1.3.0",
    "react-textarea-autosize": "5.2.1",
    "react-transition-group": "^2.4.0",
    "recharts": "^1.1.0",
    "redux": "^4.0.0",
    "redux-actions": "^2.6.1",
    "redux-form": "^7.4.2",
    "redux-saga": "^0.16.0",
    "redux-thunk": "^2.3.0",
    "reselect": "^3.0.1",
    "sanitize.css": "^7.0.0"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^4.0.0-alpha.16",
    "@storybook/addon-knobs": "^4.0.0-alpha.16",
    "@storybook/addon-links": "^4.0.0-alpha.16",
    "@storybook/addon-notes": "^4.0.0-alpha.16",
    "@storybook/addons": "^4.0.0-alpha.16",
    "@storybook/react": "^4.0.0-alpha.16",
    "@tygen/html": "^0.1.0",
    "@tygen/reflector": "^0.1.0",
    "@types/classnames": "^2.2.6",
    "@types/enzyme": "^3.1.13",
    "@types/enzyme-adapter-react-16": "^1.0.3",
    "@types/jest": "^23.3.1",
    "@types/lodash": "^4.14.116",
    "@types/node": "^10.7.1",
    "@types/react": "^16.4.11",
    "@types/react-custom-scrollbars": "^4.0.5",
    "@types/react-dom": "^16.0.7",
    "@types/react-dropzone": "^4.2.2",
    "@types/react-modal": "^3.2.1",
    "@types/react-redux": "^6.0.6",
    "@types/react-redux-toastr": "^7.1.0",
    "@types/react-router": "^4.0.30",
    "@types/react-router-dom": "^4.3.0",
    "@types/react-select": "^1.3.4",
    "@types/react-textarea-autosize": "^4.3.3",
    "@types/react-transition-group": "^2.0.13",
    "@types/redux-logger": "^3.0.6",
    "awesome-typescript-loader": "^5.2.0",
    "css-loader": "^1.0.0",
    "enzyme": "^3.4.4",
    "enzyme-adapter-react-16": "^1.2.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^2.0.0",
    "html-loader": "0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "identity-obj-proxy": "^3.0.0",
    "image-webpack-loader": "^4.3.1",
    "jest": "^23.5.0",
    "mini-css-extract-plugin": "^0.4.2",
    "postcss-cssnext": "3.1.0",
    "postcss-csso": "3.0.0",
    "postcss-focus": "3.0.0",
    "postcss-loader": "^3.0.0",
    "postcss-reporter": "^6.0.0",
    "react-hot-loader": "^4.3.5",
    "react-test-renderer": "^16.4.2",
    "redux-logger": "3.0.6",
    "rimraf": "2.6.2",
    "serviceworker-webpack-plugin": "^1.0.1",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.22.1",
    "ts-jest": "^23.1.4",
    "tsconfig-paths-webpack-plugin": "^3.2.0",
    "tslint": "^5.11.0",
    "tslint-config-airbnb": "^5.10.0",
    "typescript": "^3.0.1",
    "uglifyjs-webpack-plugin": "^1.3.0",
    "webpack": "^4.17.1",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  },

Screenshots / Screencast / Code Snippets (Optional)

Im place SVG extension in 'test' options in my webpack.config.js file.

  // FileLoader *in defaultConfig SVG not working propertly besause "svg-url-loader" dont worked correctly
  newConfig.module.rules.push({
    test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
    loader: require.resolve('file-loader'),
    query: {
      name: 'static/media/[name].[hash:8].[ext]'
    },
    exclude: /node_modules/,
  }, );

and i switch my config to full-control-mode, because svg-url-loader redefines my rule for SVG files in file-loader.

My config file present below:

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

// IDEA: Use full-control-mode from https://storybook.js.org/configurations/custom-webpack-config/
// In [email protected] config stored here: /node_modules/@storybook/core/dist/server/config/defaults/webpack.config.js
module.exports = (newConfig, env) => {

  // TypeScript
  newConfig.module.rules.push({
    test: /\.(ts|tsx)?$/,
    use: "awesome-typescript-loader",
    include: [/stories/, /components/, /shared/, /Storybook/,
      /utils/, /containers/
    ],
    exclude: /node_modules/
  });

  // PostCSS
  newConfig.module.rules.push({
    test: /\.pcss$/,
    exclude: /node_modules/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        query: {
          localIdentName: '[hash:base64:6]',
          modules: true,
        }
      },
      {
        loader: 'postcss-loader'
      }
    ]
  });

  // FileLoader *in defaultConfig SVG not working propertly besause "svg-url-loader" dont worked correctly
  newConfig.module.rules.push({
    test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
    loader: require.resolve('file-loader'),
    query: {
      name: 'static/media/[name].[hash:8].[ext]'
    },
    exclude: /node_modules/,
  }, );

  // CSS
  newConfig.module.rules.push({
    test: /\.css$/,
    use: [require.resolve('style-loader'), {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1
      }
    }]
  });

  // MediaFiles
  newConfig.module.rules.push({
    test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
    loader: require.resolve('url-loader'),
    query: {
      limit: 10000,
      name: 'static/media/[name].[hash:8].[ext]'
    }
  });

  // Mini CSS extract plugin settings
  newConfig.plugins.push(
    new MiniCssExtractPlugin({
      filename: '[name].[hash:5].css',
      chunkFilename: '[id].[hash:5].css',
    }),
  );

  // TS config plugin
  newConfig.resolve.plugins = [
    new TsconfigPathsPlugin({
      configFile: path.resolve(__dirname, '../tsconfig.json'),
    }),
  ];

  // Resolved extensions
  newConfig.resolve.extensions.push(".tsx");
  newConfig.resolve.extensions.push(".ts");
  newConfig.resolve.extensions.push(".js");
  newConfig.resolve.extensions.push(".pcss");

  return newConfig;
};

[majames]

I believe I may be having the same issue, currently using storybook in full-control mode with typescript and getting this output from svg importing:

"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='128' height='128' style='enable-background:new 0 0 128 128;'%3E %3Cpath d='M63.79,8.64C1.48,8.64,0,78.5,0,92.33c0,13.83,28.56,25.03,63.79,25.03 c35.24,0,63.79-11.21,63.79-25.03C127.58,78.5,126.11,8.64,63.79,8.64z' style='fill:%23FCC21B;'/%3E %3Cg%3E %3Cpath d='M42.21,66.47c-4.49,0.04-8.17-4.27-8.22-9.62c-0.05-5.37,3.55-9.75,8.04-9.79 c4.48-0.04,8.17,4.27,8.22,9.64C50.3,62.06,46.7,66.43,42.21,66.47z' style='fill:%232F2F2F;'/%3E %3Cpath d='M86.32,66.47c4.48-0.01,8.11-4.36,8.1-9.71c-0.01-5.37-3.66-9.7-8.14-9.69 c-4.49,0.01-8.13,4.36-8.12,9.73C78.18,62.15,81.83,66.48,86.32,66.47z' style='fill:%232F2F2F;'/%3E %3C/g%3E %3Cpath d='M36.19,81.17 c13.73,16.67,41.89,16.67,55.62,0' style='fill:none;stroke:%232F2F2F;stroke-width:6;stroke-linecap:round;stroke-miterlimit:10;'/%3E %3C/svg%3E"

My webpack.config.js simply looks like:

module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('ts-loader')
  });

  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

[Brian-McBride]

It does seem that the file-loader works just fine.
@majames I did a quick hack for my webpack.config.js that does a replace. It probably has too many tests, but I just didn't want things to blow up later until this bug is fixed.

module.exports = (baseConfig, env, config) => {
  
  // Remove old rules
  config.module.rules = config.module.rules.filter(item => !(item.test && typeof item.test === 'object' && item.test.test && (item.test.test('t.svg') || (item.test.test('t.png')))));
  // Add in updated image rule
  config.module.rules.push({
    test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
    loader: require.resolve('file-loader'),
    query: {
      name: 'static/media/[name].[hash:8].[ext]'
    }
  });

  // Add typescript loader:
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('awesome-typescript-loader')
  });
  config.resolve.extensions.push('.ts', '.tsx');

  return config;
};

[majames]

Ok cool, I wanted to use the raw-loader to just load the plain text in (and dangerously set it into a react component) but the same approach of filtering out the pre-existing rules should work for me 🙂

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[Brian-McBride]

Hey there stale bot. I took your digital advice and opened a pull request:
#4260

Anyone on this issue know of any compelling reason to keep svg-url-loader in the repo when url-loader will do the job?