root in strict mode refer to undefined

[SuperOl3g]

!function(root, factory) {
    "function" == typeof define && define.amd ? // AMD. Register as an anonymous module unless amdModuleId is set
    define([], function() {
        return root.svg4everybody = factory();
    }) : "object" == typeof exports ? module.exports = factory() : root.svg4everybody = factory();
}(this, function() { ... 

My bundler (webpack + babel) add 'use sctrict' to every module automatically so that this in last line is undefined

[rich-martinez]

I am having the same problem. How can we set this up to be able to pass something else?

[SuperOl3g]

If you use webpack this can help you
https://webpack.github.io/docs/shimming-modules.html

require("imports?this=>window!./file.js") or require("imports?this=>global!./file.js")

[ButuzGOL]

+1

[shawnbot]

Yeah, this is no good. I think it'd be better to convert lib/svg4everybody.js into a CJS module so that bundlers can do what they do best, rather than bundling the generated UMD. This would mean:

1. Turn lib/svg4everybody.js into a CJS module, a la module.exports = svg4everybody;
2. Update package.json with "main": "lib/svg4everybody.js" (instead of dist/)
3. Update the build task as needed to generate the right UMD

How's this sound?

[ButuzGOL]

Temporary solution
https://github.com/webpack/imports-loader

module : {
    loaders : [
      {
        test: require.resolve("svg4everybody"),
        loader: "imports?this=>window"
      }
    ]
  }

[ButuzGOL]

@shawnbot I think its good to support 3 types
But I think everybody moving to CJS

[cwackerman]

I was experiencing a similar issue with webpack + babel, where import would throw:

Uncaught TypeError: Cannot set property 'svg4everybody' of undefined

Turned out that I had forgotten to exclude the node_modules directory from the babel-loader:

loaders: [{
    test: /\.jsx?$/,
    exclude: /(node_modules)/,
    loader: 'babel'
}]

Maybe you need to do the same?

[damienmcd]

I am seeing the same behaviour with gulp-babel. I'm not using Webpack or any other bundler.
gulp-babel is adding "use strict" to the main.min.js but getting a console error of "Cannot set property 'svg4everybody' of undefined".
Is there any update on this?

[damienmcd]

I've got this issue fixed for now. The solution involves using a different Babel preset that does not change this to undefined. The preset I used is babel-preset-es2015 and then add the following to a .babelrc file:

{
  "presets": [ [ "es2015", { modules: false } ] ]
}

I'll continue testing on projects that are browser facing and don't require modules.

[srudolph-credera]

+1

@damienmcd just tried your approach (thanks!) and it worked for some browsers (Chrome for instance), but not older ones like IE10/11, where I'm still getting this passed in as undefined. Anyone else seeing the same?

FWIW: I ended up taking the approach of including the lib JS file instead of the dist version.

[dezman]

Can we all just say window when we mean window.

[ghost]

Same issue here:

Cannot set property 'svg4everybody' of undefined

Installed svg4everybody via yarn add svg4everybody.

Webpack-config (using webpack-stream):

module: {
    rules: [
        {
            test: /.js$/,
            use: [
                {
                    loader: "babel-loader"
                }
            ]
        }
    ]
}

main.js

import svg4everybody from 'svg4everybody';

[ghost]

After a little bit more research I fixed this by adding node_modules to the exclude path (as said before by @cwackerman). Although I needed some packages from the node_modules-folder to be transpiled. Fixed it by excluding them from the exclude:

module: {
    rules: [
        {
            test: /.js$/,
            exclude: /node_modules(?!\/foundation-sites|flickity)/,
            use: [
                {
                    loader: "babel-loader"
                }
            ]
        }
    ]
}

[christiansany]

Had the same issue.
I found the answer of @arjenkroeze interesting, but I actually need almost all my packages transpiled, so I excluded only svg4everybody from transpiling via babel. This worked for me :)

module: {
    loaders: [
        {
            test: /\.js?$/,
            exclude: /node_modules\/svg4everybody/,
            loader: 'babel-loader',
        },
    ],
},

[DanielRuf]

I have the same issue when using the script in a file with use strict.
Uncaught TypeError: Cannot set property 'svg4everybody' of undefined
module.exports = factory() : root.svg4everybody = factory();

[DanielRuf]

Possible duplicate of #162

[DanielRuf]

See #171

[eeve]

{
    "presets": ["@babel/preset-env"],
    "ignore": ["./src/files/**/*.js"]
}

add ignore option

ref: https://babeljs.io/docs/en/options#ignore

[DanielRuf]

exclude is typically recommended @eeve ;-)