IE11: TypeError: Unable to get property 'oldUrl' of undefined or null reference

[negomi]

Do you want to request a feature, report a bug or ask a question? Report a bug

What is the current behavior? This error is thrown:

TypeError: Unable to get property 'oldUrl' of undefined or null reference
  at oldUrl(~/svg-sprite-loader/runtime/browser-sprite.build.js:647:0)

What is the expected behavior? The error should not be thrown.

If the current behavior is a bug, please provide the steps to reproduce, at least part of webpack config with loader configuration and piece of your code. From Webpack config:

{
  test: /\.svg$/,
  exclude: [
    path.resolve(__dirname, './public/img/load-from-url')
  ],
  loaders: [
    'svg-sprite-loader?' + JSON.stringify({
      symbolId: '[name]_[hash]'
    }),
    'svgo-loader?' + JSON.stringify({
      plugins: [
        {removeTitle: true},
        {convertColors: {shorthex: false}},
        {convertPathData: false}
      ]
    })
  ]
}

Please tell us about your environment:

• Node.js version: 7.9.0
• webpack version: 1.15.0
• svg-sprite-loader version: 3.0.1
• OS type & version: Windows 10

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc) It seems like event.detail doesn't exist:

[kisenka]

@negomi please update to the latest loader version, looks like this bug was fixed.

[negomi]

Unfortunately this is still not fixed.

I traced the line back to svg-baker-runtime: https://github.com/kisenka/svg-baker/blob/53f8796d0382a921e718591d48dbe1896d7599d4/packages/svg-baker-runtime/src/browser-sprite.js#L117

It uses event.detail, which doesn't seem to exist in IE11 :/

[kisenka]

@negomi looks like custom event initialization method in svg-baker works in IE11 (stackoverflow, MDN).

[kisenka]

@negomi ping

[negomi]

Hi @kisenka, sorry for the delayed response.

I agree it looks like it should work, but our error tracker is still reporting the issue.

I'm not sure what's causing it exactly, though I wonder if this is related: https://connect.microsoft.com/IE/feedback/details/789773/ie-increments-event-detail-on-clicks-over-different-locations

If it is due to that and/or not possible to fix, would it be possible to check for the existence of event.detail to at least stop that code from throwing?

if (event.detail) {
    const { oldUrl, newUrl } = event.detail;
    this.updateUrls(oldUrl, newUrl);
}

I know it's not ideal, but will let you know if I find any more information.

[BorodinDK]

I ran into the same problem on IE11

• Node.js version: 7.9.0
• Webpack: 3.10.0
• svg-sprite-loader version: 3.6.2
• OS type & version: Windows 7

[phun-ky]

We have experienced this issue for over a year now..

"svg-sprite-loader": "^3.7.1", "webpack": "^4.5.0",

[kisenka]

@phun-ky could you please create repo with minimal setup to demonstrate a problem (package.json, webpack config, SVG image and piece of your code). If you don't want to create a repository - you can create a gist with multiple files.

[didnotwant]

Hi @kisenka — I encountered this error on Edge 41.16299.492.0 (EdgeHTML 16) and also in some newer version (but I don’t remember the version number, it had EdgeHTML 17). I use svg-sprite-loader@^3.5.2 in my project. After deeper digging I ended up with a conclusion that in Edge using names existing in window namespace for functions is not a good idea: they cannot be replaced. See: this is the place where you fire dispatchEvent function: https://github.com/kisenka/svg-sprite-loader/blob/a7d9ab2bd2445737b36cff1519948fad9532cec3/examples/browser-sprite/build/sprite.js#L888 and you think this is your custom one but it’s not. What’s fired here is the original dispatchEvent (window.dispatchEvent) method so the second argument (the object) will never be passed. Let’s make a quick test. Put the code:

var dispatchEvent = function (name, data) {
  console.log(name, data);
};
dispatchEvent('foo', {
  foo: 'bar',
});

into Edge’s dev console and you will see Invalid argument error since this is actually the original method which expects EventObject. But we don’t get such error because you pass a string there and it works (I don’t know why). Maybe the cause is a collission with event name or any other else?

Summing things up: probably the error exists because of names collission with those ones living in window namespace. I can’t prepare a test environment consisting of your code but you should be able to do it and change all names that might me affected.

[didnotwant]

I made a mistake in my previous comment. The case of forcing properties in Edge from window exists only in global scope.

So: when one tries to create e.g. var event = <some custom property> or var dispatchEvent = <some custom function> and then wants to use it (console.log(event) or dispatchEvent(…)), the native one from window will be used.

I’m not sure if this information may be useful.

[xirclebox]

I just ran across this very issue today. Has the work/investigation into fixing been dropped?