The sprite status is blocked: origin (webpack --mode production)

[maximryabov22011988]

The sprite status is blocked: origin (webpack --mode production)

[bensampaio]

@maximryabov22011988 I checked your webpack config but I couldn't find anything wrong with it. On which browsers are you experiencing this problem?

[maximryabov22011988]

This issue occurred in Chrome latest version. I was very surprised by this problem, maybe, already worked with svg and use when making sites. Have you tried making the production assembly and then opening index.html in the dist folder? And everything opened as expected?

[maximryabov22011988]

Or do I just need to make a production assembly and upload the contents of the dist folder somewhere to the server? Maybe I'm doing something wrong ?!

[bensampaio]

I am not able to build your assets. I followed the following steps:

1. Cloned your repo
2. Run npm i
3. Run npm run build and got the following error:

ERROR in ./src/index.js
Module not found: Error: Can't resolve './components/base/Icon' in '/Users/bensampaio/Downloads/webpack-broker-master/src'
 @ ./src/index.js 3:0-42 8:71-75

[maximryabov22011988]

I'm sorry. I updated the production build. Now it works. And i deploy production build to gh-pages: https://maximryabov22011988.github.io/webpack-broker/

[maximryabov22011988]

And fixed this error:
ERROR in ./src/index.js Module not found: Error: Can't resolve './components/base/Icon' in

[maximryabov22011988]

Sprite in url(background-image) work correctly. But sprite in html with USE tag don't work. In production build i use publicPath ../. Maybe this is the reason?

In development mode i use publicPath / and sprite in html and in background-image work correctly. But such publicPath don't work in production mode

[bensampaio]

@maximryabov22011988 that's definitly the reason. If you check the network tab in the Chrome inspector you'll see an error loading the sprive.svg file. The browser is trying to load "https://maximryabov22011988.github.io/images/sprite.svg" which doesn't exist. What you want is: "https://maximryabov22011988.github.io/webpack-broker/images/sprite.svg". So I don't think you need to change the publicPath at all. Why are you using ../?

[maximryabov22011988]

After compiling the production build, sprite file put in the image folder and app.css file is in the css folder. If i remove the public path '../', then the sprite in the background-image stops working. And the sprite in html still does not work.

Structure dist folder after production build:

• index.html
• css
• images
• js
• favicon

css, js, images, favicon are folders

[bensampaio]

The publicPath option refers to a URL path not a file system path so when you use ../ you are trying to get something from outside your application scope. Your configuration looks very much like mine so I think that you don't even need to set the publicPath option. Did you try that?

If that doesn't work then I would say you need to set the publicPath to /images/ but I really think you don't need this option at all. This option is only there for when your assets are placed in a CDN.

[maximryabov22011988]

I made the dist folder structure more flat. Sprite in html is now loaded without error, but not displayed.

Under the development mode, the sprite in the html and the css works correctly (https://prnt.sc/qk19jm).

In production mode, the css is displayed correctly, but the html, although it has loaded, isn't displayed (https://prnt.sc/qk1dde)

[maximryabov22011988]

I found a problem place ... There seems to be a problem with the id mismatch. SVG uses this id http://prntscr.com/qk1sro

But in the sprite itself there is no such name id https://prnt.sc/qk1tup. What else is happening here is minification. What do you think could be the problem?

[maximryabov22011988]

#72 (comment)

Yes, I tried it completely without this option publicPath, but this, unfortunately, did not solve the problem.

[bensampaio]

I tried to clone your repo again and managed to fix your issue locally by changing webpack/loaders/svgSprite.js to the following:

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

module.exports = (env) => ({
  loader: SvgStorePlugin.loader,
  options: {
    name: 'images/sprite.svg',
    iconName: '[name]-[hash:6]',
  },
});

Can you confirm that this works?

[maximryabov22011988]

After changing the structure, the sprite began to load with gh-pages. Now app.css, app.js, sprite.svg put to the root of the project, where index.html lies

[maximryabov22011988]

For some reason, everything works on the dev server. But gh-pages are not. Although there are no file upload errors

[maximryabov22011988]

#72 (comment)
Yes, it is work!!!

I found a problem place ... There seems to be a problem with the id mismatch. SVG uses this id http://prntscr.com/qk1sro

But in the sprite itself there is no such name id https://prnt.sc/qk1tup. What else is happening here is minification.

This behavior can be seen at https://maximryabov22011988.github.io/webpack-broker/

On the dev server in the sprite have the correct id. In html - http://prntscr.com/qk7fby, in sprite - http://prntscr.com/qk7ftf

What do you think could be the problem?

[maximryabov22011988]

Maybe the problem is that I set mode: 'production' in the webpack config and the svgo plugin minifies the id? In development mode id don't minify.

[bensampaio]

I looked into it but so far I don't understand the issue. I use this plugin in production and never found this problem. Minification is only done per symbol in the sprite by the loader. Are you minifying the sprite as well?

[maximryabov22011988]

Now I turned off the minification of the svg. Now the problem is that after production build and deploy to gh-pages production, the sprite, although it is in the markup, is not displayed (screenshot - https://drive.google.com/file/d/1Vl-7PM1rj3h3j-Q9dpMkhC6nirCnYvPb/view?usp=drivesdk )

Now the problem is reproducing on
https://maximryabov22011988.github.io/webpack-broker/

Alfa icon don't displayed
https://prnt.sc/qk1sro
although the sprite loaded without errors

At the same time, the Alpha icon is displayed on the dev server.

What do you think it could be?

[bensampaio]

It seems that the viewbox attribute of your svg elements is set to undefined. I noticed in your webpack config that you changed the svgo configuration. svgo removes the viewports by default but that is required for this loader to work. So you should make sure that { removeViewBox: false } is part of your svgo config.

In short your config should look like this:

{
  loader: SvgStorePlugin.loader,
  options: {
    name: 'images/sprite.svg',
    iconName: '[name]-[hash:6]',
    svgoOptions: {
      plugins: [{ cleanupIDs: false }, { removeUnknownsAndDefaults: false }, { removeViewBox: false }],
    },
  },
}

I added this to the README to make more clear how to configure SVGO.

[maximryabov22011988]

Thanks a lot!!!! You helped me a lot! It all worked! Thanks for the great plugin!

[bensampaio]

No problem! I'm happy it all worked out! Happy spriting!