[4] Webpack turns "this" to undefined in class definitions

[drcmda]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

See #6357 (comment) and babel/babel#7264

Webpack turns the method in this code:

import React from 'react'

class A {
    constructor() {
        this.b = 1
    }
    method(a = this.b) {
        console.log(a)
    }
}

into

    method(a = undefined.b) {
        console.log(a)
    }

probably confusing the top-level with class-level. Curiously without the import (any import) it seems to be fine.

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

MacOS High Sierra, Node 9.4.0, Webpack 4 beta.0

[TheLarkInn]

This has been fixed with #6380 by @ooflorent

[drcmda]

@TheLarkInn @sokra is this in 4.0.0-beta.1 ? It still doesn't seem to work ...

[ooflorent]

@drcmda Could you have a look at https://github.com/webpack/webpack/pull/6380/files#diff-01500706b1ed8ba9c79ef1fb8489c553R25? I've added a test (which passes). Maybe you're encountering another issue. Could you create minimal reproducible sample?

[drcmda]

@ooflorent it's the same as above. If you just run it without an import statement at the top, it works. But the moment you have an import, it's back to undefined.

import React from 'react' // <---- any import will do

class A {
    constructor() {
        this.foo = 1
    }
    method(arg = this.foo) {  // gets transformed to: undefined.foo
        console.log(arg)
    }
}

new A().method()

[drcmda]

@ooflorent there's another thing that's curious, it only happens with the following setup:

const options = {
    presets: [
        ['@babel/preset-env', { modules: false, targets: { browsers: 'last 2 Chrome versions' } }],
    ],
    plugins: [
        '@babel/plugin-transform-classes',
    ],
}

WIthout plugin-transform-classes i run into other errors that have to do with hot-reloading, but i've had this one in it for over a year now. But it's that transform that seems to have an impact, if i remove it, the example runs.

[ooflorent]

import instructs webpack to run the plugin that convert this into undefined. Since you are applying babel’s transforms it probably conflicts with one of them because the plugin is ran after Babel.

[sqal]

Hi guys. Has this issue been fixed in webpack 4? I just upgraded my project to Webpack 4.5.0 and this problem appears to be still present (in any webpack 4 version).

Here's a reproduction - https://github.com/sqal/webpack-4-bug-reproduction. Run npm run build and check the output in build/app.js. You can see that in Class example, this in default parameter value is kept as expected, but in second example, where i export just an object with some function, this is still replaced with undefined.

I would appreciate if someone could take a look at it. Thank you :)

[ooflorent]

I'll try to fix this.

[tatobari]

Sorry for jumping in without any contributions. This issue looks pretty alive and I might be having the same issue.

Could this be the reason why some bundles I'm importing, SwiperJS ESM Bundle, for example, read undefined once compiled where the original files read this? This began happening as soon as I've updated to Webpack 4.

[ooflorent]

I’ve opened a PR with a fix. Everything should be back to normal once it would be merged.

[OndrejPiza]

Hi,

I know it is closed, but I have similiar issue. In ctor, "this" is undefined. I have webpack from master branch.

"-- webpack@4.5.0 (github:webpack/webpack#55fb1da1935c44ebbe5e274a4f785eeaa79a3125)" - which is the last commit.

[ooflorent]

@OndrejPiza this has been fixed on master and not released yet. If you still encounter a bug, please open a new issue with a reproduction example.

[OndrejPiza]

@ooflorent Sorry, my bad, mistake was somewhere else. Now it's wokring.

[kamalendugarai]

@ooflorent Has this fixed been released in current webpack version. My webpack version is 4.29.0 and the same thing happening to me. I have imported one of my project's dependency i.e. jquery plugin and within that file in class definition they passed "this" alias for window but webpack turned that into "undefined".

[ifeltsweet]

This is still happening with v4.30.0

[alexander-akait]

you still have old webpack package, maybe you use global webpack installation

[ifeltsweet]

After a bit of reading I think this is Babel to blame - https://stackoverflow.com/questions/34973442/how-to-stop-babel-from-transpiling-this-to-undefined-and-inserting-use-str