Issue with browserify-shim

[reggi]

I seem to be running in circles with this.

The original issue is in thlorenz/browserify-shim#145

If I run -t [browserify-shim] and use normal CommonJS syntax require() then the browserify bundle works perfectly.

If I run -t [babelify --only \"./index.js\" browserify-shim] and use es6import` syntax I get an error within my imported shimmed dependency (polymer).

There's a simple demo here:

https://github.com/reggi/demo-browserify-polymer-es6

Why would it compile perfectly without babelify and when I specify --only it have a different effect on my included shimmed dependency?

[sebmck]

If I run -t [babelify --only \"./index.js\" browserify-shim] and use es6import syntax I get an error within my imported shimmed dependency (polymer).

Because the --only argument will only run babelify on index.js. Checking out that repo and running:

$ npm run babel-before

Works without a problem.

[reggi]

Hey @sebmck thanks for the response! I'm getting an error. The only way I can get it to run is without using babelify. The only reason it works is because I'm not using es6 imports in that repo 😿

For SEO:

 function element(name, prototype) {
    if (typeof name !== 'string') {
      var script = prototype || document._currentScript;
      prototype = name;
      name = script && script.parentNode && script.parentNode.getAttribute ?
          script.parentNode.getAttribute('name') : '';
      if (!name) {
        throw 'Element name could not be inferred.';
      }
    }
    if (getRegisteredPrototype(name)) {
      throw 'Already registered (Polymer) prototype for element ' + name;
    }
    // cache the prototype
    registerPrototype(name, prototype);
    // notify the registrar waiting for 'name', if any
    notifyPrototype(name);
  }
bundle-babel-before.js:3 Uncaught TypeError: Cannot set property 'esprima' of undefined
bundle-babel-after.js:6387 Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type 'HTML' may not be inserted inside nodes of type '#document'.
bundle-without-babel.js:10400 Uncaught TypeError: Cannot read property 'resolveDom' of undefined

[reggi]

@sebmck It's just apparent that it's a babilfy issue then because it works without babelify. That's why I wen't with --only to stop babelify from processing polymer.

[sebmck]

@reggi You should be ignoring bower_components anyway with:

$ browserify -t [babelify --ignore \"bower_components\" browserify-shim]

Since otherwise bower_components will be unnecessarily transformed.

[zertosh]

@reggi I took a quick look at your repo and es6-polymer-babel-index-shimmed.js works with:

# backslashes for readability only
node ./node_modules/.bin/browserify ./index-es6.js \
  -t [ babelify --ignore bower_components ] \
  -t browserify-shim \
  --debug \
  > es6-polymer-babel-index-shimmed.js

You need to ignore bower_components because since it's not node_modules, browserify will apply the babelify transform to it. Also, transforms need to specified separately.

If you're curious about why polymer didn't like to get babeled, it's because it doesn't seem to work in strict mode. If you turn off that babel transform, it also works:

node ./node_modules/.bin/browserify ./index-es6.js \
  -t [ babelify --blacklist strict ] \
  -t browserify-shim \
  --debug \
  > es6-polymer-babel-index-shimmed.js

Though, it's more efficient to simply ignore bower_components since you don't want it transformed at all.

PS: There is no --test flag. You probably meant --debug for source maps.

[zertosh]

This seems resolved to me.