IE11: Symbol is undefined

[doctyper]

Hi, great tool! I get this error when running flow-runtime on IE11:

'Symbol' is undefined
	ReferenceError: 'Symbol' is undefined
	   at Anonymous function (eval code:40:3)
	   at Anonymous function (eval code:34:1)
	   at Anonymous function (eval code:1:31)
	   at eval code (eval code:1:2)
	Evaluating [email protected]/lib/types/Type.js
	Evaluating [email protected]/lib/types/AnyType.js
	Evaluating [email protected]/lib/types/index.js
	Evaluating [email protected]/lib/registerPrimitiveTypes.js
	Evaluating [email protected]/lib/globalContext.js
	Evaluating [email protected]/flow-runtime.js
	Evaluating [email protected]
	Evaluating main.js
	Error loading main.js

Perhaps adding babel-polyfill as a dependency would fix it?

[phpnode]

hey, thanks for reporting this. I don't want to include babel polyfill as a direct dependency because I think that decision should be left to the library consumers. It would be good to add a note about use of Symbol in the readme though.

[doctyper]

@phpnode So that's the thing. I'm adding babel-polyfill at the root of my app but this error is still thrown. I'm guessing flow-runtime is adding references to Symbol before the polyfill is applied, and an error is thrown. Does that make sense?

[doctyper]

I think that's what's happening. Here's a look at the transpiled output of my entry file:

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _flowRuntime = require("flow-runtime");

var _flowRuntime2 = _interopRequireDefault(_flowRuntime);

require("babel-polyfill");

var _domainsConfig = require("./domains.config.js");

var domains = _interopRequireWildcard(_domainsConfig);

// etc

flow-runtime is injected at the top of the file. It subsequently imports ./lib/symbols.js, which defines Symbols, which throws an error in browsers that don't natively support them.

[phpnode]

ok, a couple of work arounds for now:

1. do your require to babel polyfill in a separate file, and mark that file with /* @flow-runtime ignore */, and then require the rest of your app:

/* @flow */
/* @flow-runtime ignore */
import 'babel-polyfill';
import './entryPoint';

or:

2. import flow-runtime yourself in your entry file, after the import 'babel-polyfill';:

/* @flow */
import 'babel-polyfill';
import t from 'flow-runtime'; // the babel plugin will detect this and not import another copy.

// rest of your code goes here

The problem is that we're attaching the import to flow-runtime right at the top of each file, really we should do it after the last possible import statement.

[phpnode]

@doctyper did the work around work for you out of interest?

[doctyper]

I'm not sure. It's still throwing an error, but I think it's because of the use of another unsupported API (generators). I think there's a larger need for a polyfilled, browser-friendly version of this plugin.

[phpnode]

Fixed import ordering and added rollup and browser / commonjs / es2015 builds in v0.2.0