New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Babel doesn't generate super class constructor call #9261

Open
Usnul opened this Issue Dec 29, 2018 · 7 comments

Comments

Projects
None yet
4 participants
@Usnul
Copy link

Usnul commented Dec 29, 2018

Somehow I end up with without parameters instantiated in super-class.

I have read various issues on babel github, having found nothing similar, I posted the question on stackoverflow, but people there don't seem to like it for some reason, so I'm moving it here :)

here's the actual error:

TypeError: Cannot read property 'push' of undefined
   at new FogOfWarSystem (bundle.js:94436)
   at initializeSystems (bundle.js:94768)
   at Engine.initialize (bundle.js:133654)
   at new Engine (bundle.js:133542)
   at new MainMenu (bundle.js:138502)
   at bundle.js:138635
   at bundle.js:138644

I have a class

class FogOfWarSystem extends System {
	constructor() {
		super();

		this.dependencies.push(Terrain);
	}
}

It inherits from another class called System

class System {
	constructor() {

		/**
		 * Other components which have to be present before the system links component
		 * @type {Array}
		 */
		this.dependencies = [];
	}
}

Somehow the generated code for FogOfWarSystem class looks like this

var FogOfWarSystem =
	/*#__PURE__*/
	function (_System) {
		_inherits(FogOfWarSystem, _System);

	 
		function FogOfWarSystem() {
			var _this;

			_classCallCheck(this, FogOfWarSystem);

			_this = _possibleConstructorReturn(this, _getPrototypeOf(FogOfWarSystem).call(this));

			_this.dependencies.push(Terrain);
			return _this;
		}
...

My setup is for browser, I use rollup, babel and gulp for bundling.

relevant parts of package.json:

  "devDependencies": {
	"@babel/cli": "7.2.3",
	"@babel/core": "7.2.2",
	"@babel/plugin-external-helpers": "7.2.0",
	"@babel/preset-env": "7.2.3",

relevant parts of build task:

const rollup = require('rollup-stream');

const babel = require('rollup-plugin-babel');
const nodeResolve = require('rollup-plugin-node-resolve');

const RollupPluginCommonJS = require('rollup-plugin-commonjs');
const RollupPluginUnassert = require('rollup-plugin-unassert');

const config = {
    input: source,
    output: {
        file: outputFile,
        format: outputFormat
    },

    //included output fields here, due to the fact that rollup-stream module doesn't recognize real rollup.config.js file format
    //see https://github.com/Permutatrix/rollup-stream/issues/24
    file: outputFile,
    format: outputFormat,

    sourcemap: false,
    strict: true,
    plugins: [
        nodeResolve({ browser: true, jsnext: true }),
        RollupPluginCommonJS(),
        RollupPluginUnassert(),
        babel({
            exclude: 'node_modules/**',
            babelrc: false,
            presets: ["@babel/preset-env"],
            plugins: []
        })
    ]
};

return rollup(config).on('error', console.error)

whole package.json:

{
  "name": "-",
  "description": "-",
  "devDependencies": {
	"@types/node": "10.12.18",
	"add": "2.0.6",
	"@babel/cli": "7.2.3",
	"@babel/core": "7.2.2",
	"@babel/plugin-external-helpers": "7.2.0",
	"@babel/preset-env": "7.2.3",
	"babelify": "10.0.0",
	"browser": "0.2.6",
	"bundle-collapser": "1.3.0",
	"cross-env": "5.1.3",
	"dat.gui": "0.7.3",
	"event-stream": "4.0.1",
	"fast-levenshtein": "2.0.6",
	"gl-matrix": "^2.8.1",
	"gulp": "4.0.0",
	"gulp-cached": "1.1.1",
	"gulp-clean": "0.4.0",
	"gulp-concat": "2.6.1",
	"gulp-connect": "5.7.0",
	"gulp-duration": "0.0.0",
	"gulp-error-handle": "1.0.1",
	"gulp-footer": "2.0.1",
	"gulp-header": "2.0.1",
	"gulp-notify": "3.2.0",
	"gulp-remember": "1.0.1",
	"gulp-rename": "1.2.2",
	"gulp-sass": "4.0.2",
	"gulp-sourcemaps": "2.6.4",
	"gulp-uglify": "3.0.0",
	"gulp-uglify-es": "1.0.4",
	"gulp-util": "3.0.8",
	"gulp-watch": "5.0.1",
	"jest": "23.6.0",
	"babel-core": "7.0.0-bridge.0",
	"babel-jest": "23.6.0",
	"jest-puppeteer": "3.7.0",
	"lodash.assign": "4.2.0",
	"msgpack-lite": "0.1.26",
	"node-notifier": "5.3.0",
	"node-sass": "4.11.0",
	"puppeteer": "1.11.0",
	"rollup-plugin-alias": "1.5.1",
	"rollup-plugin-babel": "4.2.0",
	"rollup-plugin-commonjs": "8.4.1",
	"rollup-plugin-html": "0.2.1",
	"rollup-plugin-node-resolve": "3.3.0",
	"rollup-plugin-replace": "2.1.0",
	"rollup-plugin-sass": "0.9.3",
	"rollup-plugin-scss": "0.4.0",
	"rollup-plugin-uglify": "6.0.0",
	"rollup-plugin-unassert": "0.2.0",
	"rollup-plugin-vue": "4.3.2",
	"rollup-stream": "1.24.1",
	"three": "0.99.0",
	"through2": "3.0.0",
	"unassertify": "2.1.1",
	"vinyl": "2.2.0",
	"vinyl-buffer": "1.0.1",
	"vinyl-source-stream": "2.0.0",
	"watchify": "3.11.0",
	"xlsx": "0.14.1"
  },
  "browser": {
	"Hammer": "./app/lib/hammer.min.js",
	"LZMA": "./app/lib/lzma_worker.js",
	"msgpack-lite": "./app/lib/msgpack-lite/msgpack.min.js"
  },
  "scripts": {
	"start": "npm install & gulp default"
  },
  "dependencies": {}
}

whole build task:

function makeReleaseBundler(name, source, destination, sourceRoot) {
	process.env.NODE_ENV = 'production';

	const rollup = require('rollup-stream');
	const buffer = require('vinyl-buffer');
	const uglify = require('gulp-uglify-es').default;

	const babel = require('rollup-plugin-babel');
	const nodeResolve = require('rollup-plugin-node-resolve');

	const RollupPluginUnassert = require('rollup-plugin-unassert');

	const replace = require('rollup-plugin-replace');

	const outputFile = destination + '/' + name;
	const outputFormat = 'iife';

	const config = {
		input: source,
		output: {
			file: outputFile,
			format: outputFormat
		},

		//included output fields here, due to the fact that rollup-stream module doesn't recognize real rollup.config.js file format
		//see https://github.com/Permutatrix/rollup-stream/issues/24
		file: outputFile,
		format: outputFormat,

		sourcemap: false,
		strict: true,
		plugins: [
			replace({
				'process.env.NODE_ENV': JSON.stringify('production')
			}),
			RollupPluginAlias({
			}),
			nodeResolve({ browser: true, jsnext: true }),
			RollupPluginCommonJS(),
			RollupPluginHtml(),
			RollupPluginSass({
				insert: true,
				include: '**/*.scss',
				exclude: [],
				options: { includePaths: ['node_modules/'] }
			}),
			RollupPluginUnassert(),
			babel({
				exclude: 'node_modules/**',
				babelrc: false,
				presets: ["@babel/preset-env"],
				plugins: []
			})
		]
	};

	return rollup(config).on('error', console.error)
		.pipe(require('vinyl-source-stream')("uncompressed-" + name))
		.pipe(gulp.dest(destination))
		// buffering is required as uglify doesn't work on streams
		.pipe(buffer())
		//minify the code
		.pipe(uglify()).on('error', console.error)
		//set file name for output
		.pipe(rename(name))
		//write out the files
		.pipe(gulp.dest(destination));
}


gulp.task('release-build', () => {
	return makeReleaseBundler('bundle.js', './app/src/main.js', './public', '');
});
@babel-bot

This comment has been minimized.

Copy link
Collaborator

babel-bot commented Dec 29, 2018

Hey @Usnul! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community
that typically always has someone willing to help. You can sign-up here
for an invite.

@loganfsmyth

This comment has been minimized.

Copy link
Member

loganfsmyth commented Dec 31, 2018

The code

_getPrototypeOf(FogOfWarSystem).call(this)

is the super call.

Would you be able to make a reproducible repository we could look at?

@Usnul

This comment has been minimized.

Copy link

Usnul commented Dec 31, 2018

@loganfsmyth
thanks for a response, I stripped down my setup and made a separate repo, there's still a lot of redundant stuff, but I didn't want to mess too much with the build process itself.

https://github.com/Usnul/babel-7-super-constructor-call

here's what i get with that:

var FogOfWarSystem =
/*#__PURE__*/
function (_System) {
  _inherits(FogOfWarSystem, _System);

  function FogOfWarSystem() {
	var _this;

	_classCallCheck(this, FogOfWarSystem);

	_this = _possibleConstructorReturn(this, _getPrototypeOf(FogOfWarSystem).call(this));

	_this.dependencies.push(Terrain);

	return _this;
  }

  return FogOfWarSystem;
}(System);

and same error:

FogOfWarSystem.js:8 Uncaught TypeError: Cannot read property 'push' of undefined
	at new FogOfWarSystem (FogOfWarSystem.js:8)
	at main.js:3
	at main.js:3
@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Dec 31, 2018

What is the transpiled output of System?

@Usnul

This comment has been minimized.

Copy link

Usnul commented Dec 31, 2018

@nicolo-ribaudo
Here:

var System = function System() {
  _classCallCheck(this, System);

  /**
   * Other components which have to be present before the system links component
   * @type {Array}
   */
  this.dependencies = [];
};
@loganfsmyth

This comment has been minimized.

Copy link
Member

loganfsmyth commented Jan 1, 2019

This appears to be an issue with Rollup itself. The behavior is failing because this line is not present in your final compiled output:

if (superClass) setPrototypeOf(subClass, superClass);

My guess would be that Rollup's dead-code elimination is breaking things in this case. Your build uses rollup-stream which uses rollup@0.49.3, which is from September 2017. We just jumped from 0.68.2 to 1.0.0, so your version is quite old. Before you do anything else, I'd recommend updating Rollup to see if that addresses the issue.

@Usnul

This comment has been minimized.

Copy link

Usnul commented Jan 1, 2019

Thanks @loganfsmyth

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment