Browserify-shim Poltergeist/Phantom.JS strict mode issues

475 Views Asked by At

I'm making a Rails project using Browserify. Bootstrap Javascript is loaded via browserify-shim.

When I launch my project and look at it in Firefox, all is right. However, when I'm testing it via Poltergeist (or just starting it with PhantomJS 2.1.1), an error occurs:

 Capybara::Poltergeist::JavascriptError:
   One or more errors were raised in the Javascript code on the page. If you don't care about these errors, you can ignore them by setting js_errors: false in your Poltergeist configuration (see documentation for details).                                                                                                                                                          

   ReferenceError: Strict mode forbids implicit creation of global property 'jQuery'
   ReferenceError: Strict mode forbids implicit creation of global property 'jQuery'
       at http://127.0.0.1:47269/assets/application-038b5f3da112b67153daa218adfed54030ee9e0085fd9586c0bb13fa320b830e.js:12

Here's the line in question:

;jQuery = global.jQuery = require("jquery");

Which, to me, looks like a shim line for jQuery (there's bootstrap.js code following it).

Here's my package.json:

{
  "name": "billy-bones-rails",
  "version": "0.0.1",
  "description": "Billy-bones-rails asset package",
  "main": "index.js",
  "directories": {
    "doc": "doc",
    "test": "test"
  },
  "scripts": {
    "bundle-js": "./node_modules/.bin/browserify app/assets/javascripts/index.js -o app/assets/javascripts/bundle.js",
    "watch-js": "./node_modules/.bin/watchify    app/assets/javascripts/index.js -o app/assets/javascripts/bundle.js -d -v"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/art-solopov/billy-bones-rails.git"
  },
  "author": "Artemiy Solopov",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/art-solopov/billy-bones-rails/issues"
  },
  "homepage": "https://github.com/art-solopov/billy-bones-rails#readme",
  "dependencies": {
    "babel-cli": "^6.8.0",
    "babel-preset-es2015": "^6.6.0",
    "babelify": "^7.3.0",
    "bootstrap": "^3.3.6",
    "browserify": "^13.0.0",
    "browserify-shim": "^3.8.12",
    "jquery": "^2.2.2",
    "normalize.css": "^4.0.0",
    "watchify": "^3.7.0"
  },
  "browser": {
    "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js"
  },
  "browserify": {
    "transform": [
      "browserify-shim",
      [
        "babelify",
        {
          "presets": "es2015"
        }
      ]
    ]
  },
  "browserify-shim": {
    "bootstrap": {
      "depends": [
        "jquery:jQuery"
      ]
    }
  }
}

Can I do anything with this error outside of disabling Poltergeist error reports?

P. S. It should be noted that I'm only able to replicate this error using PhantomJS 2.1.1. Firefox (46 and 48), Chromium and PhantomJS 1.9.0 output no error.

1

There are 1 best solutions below

0
art-solopov On

Apparently, the issue was caused by a combination of babelify misconfiguration and browserify-shim. I added this to my babelify config:

"ignore": "node_modules"

This got rid of the top-level strict mode in the Bootstrap module.