Two.js: `var root = this` breaks in bundlers.

[trusktr]

Using var root = this seems to be breaking Rollup.js bundle. The resulting bundle looks something like

(function() {
"use strict"
commonjsGlobal.Two = (function() {
// Inside here it Two.js code...

var root = this // but this is not window

// ...

})()

})()

The issue is here: https://github.com/jonobr1/two.js/blob/e791c2c57cc799522d8795fdb5d9c3bbb12005e6/src/two.js#L3

My Rollup bundle is importing Two from the two.js npm package.

[jonobr1]

Unfortunately, the npm module breaks with bundlers. The dev branch shouldn't though! I'm still making some final adjustments before tagging the branch... Sorry for the inconvenience!

[GoToLoop]

void function () {
  const root = this; // global window object now!

  commonjsGlobal.Two = void function () {
    console.log(root === window);
  }();
}();

[GoToLoop]

(() => {
  commonjsGlobal.Two = void function () {
    const root = this; // global window object too!
    console.log(root === window);
  }();
})();

[trusktr]

@jonobr1 Ah, okay, cool! Let me give that a go.

@GoToLoop I don't have control over that code to do that, it is generated by Rollup. I mean, I could do a post-bundle transform, but I'm trying to avoid that.

[trusktr]

@jonobr1 I see it doing var root = this in dev. Here's a PR: https://github.com/jonobr1/two.js/pull/242

[trusktr]

I ended up making this postinstall script and adding it to package.json:

#!/usr/bin/env node

// a function wrapper is needed for older versions of Node.
~function() {
    "use strict"

    const fs = require('fs')
    const path = require('path')
    const filePath = path.resolve('node_modules', 'two.js', 'build', 'two.js')

    let data = fs.readFileSync(filePath).toString()

    data = data.replace(
        /var root = this/g,
        "var root = typeof window != 'undefined' ? window : typeof global != 'undefined' ? global : null"
    )

    fs.writeFileSync(filePath, data)
}()

[trusktr]

After doing that, I am able to import Two in Rollup-bundled code.

[jonobr1]

Sorry for the delay, I'll take a look at the PR tomorrow. Preemptive high-five!

[trusktr]

The PR might not be complete, I haven't looked at how build works. I think you can easily modify it though, the fix is really simple.

[ming-codes]

Is this fixed? I'm still getting the error.

There's actually a more standard way to reference the global context: self

[jonobr1]

Are you using the latest dev or alpha build? It should be fixed there.

[ming-codes]

I'm using 0.7.0-alpha.1. Not sure if it's the latest. It's not exactly the same error, but it's similar in the context object being undefined

[jonobr1]

I'll look into the self thing. Thanks for the heads up on that!

[jonobr1]

Sorry one more question @ming-codes, are you trying to use two.js in Node or an ES6 environment? Just trying to reproduce the undefined issue.

[ming-codes]

I'm trying to bundle it with Rollup. It's the same use case as @trusktr.

Here's the config.

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import sourceMaps from 'rollup-plugin-sourcemaps';
import camelCase from 'lodash.camelcase';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';

const pkg = require('./package.json');

const libraryName = pkg.name;

export default {
  input: `src/${libraryName}.test.js`,
  output: [
    { file: pkg.main, name: camelCase(libraryName), format: 'umd' },
    { file: pkg.module, format: 'es' },
  ],
  sourcemap: true,
  // Indicate here external modules you don't wanna include in your bundle (i.e.: 'lodash')
  external: [],
  watch: {
    include: 'src/**',
  },
  plugins: [
    // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
    commonjs(),
    // Allow node_modules resolution, so you can use 'external' to control
    // which external modules to include in the bundle
    // https://github.com/rollup/rollup-plugin-node-resolve#usage
    resolve(),

    // Resolve source maps to the original source
    sourceMaps(),

    serve({
      contentBase: ['dist', 'src', 'node_modules/mocha'],
    }),

    livereload()
  ],
};

[jonobr1]

@ming-codes, I was able to bundle the project fine without errors, but I'm not sure how rollup-serve works. Maybe we could take this conversation offline so I could get access to your repository and debug further? Thanks for reaching out!

[ming-codes]

Master branch seems to be fine, but it has other issues..

[jonobr1]

🤔, master branch is the same as the v0.7.0-alpha.1. Have you tried the dev branch?

Ming has updated his progress here