Phantomjs: Print styles cause JS global errors

Created on 5 Apr 2016  路  13Comments  路  Source: ariya/phantomjs

I'm working on an ember-cli project and doing command-line and CI testing using PhantomJS. For reference, here are the versions of each in my environment:

  • PhantomJS: 2.1.1
  • Ember-CLI: 2.4.3
  • Node: 4.4.0

My application is using a bootstrap-based theme and running the tests (ember test) results in something like the following

Built project successfully. Stored in "/usr/src/app/tmp/class-tests_dist-ldz4msD2.tmp".
not ok 1 PhantomJS 2.1 - Global error: SyntaxError: Unexpected EOF at http://localhost:7357/assets/vendor.js, line 90337
    ---
        Log: |
            { type: 'error',
              text: 'SyntaxError: Unexpected EOF at http://localhost:7357/assets/vendor.js, line 90337\n' }
    ...
not ok 2 PhantomJS 2.1 - Global error: Error: Could not find module ember-metal/core required by: ember-testing/index at http://localhost:7357/assets/test-support.js, line 62
    ---
        Log: |
            { type: 'error',
              text: 'Error: Could not find module ember-metal/core required by: ember-testing/index at http://localhost:7357/assets/test-support.js, line 62\n' }
    ...
not ok 3 PhantomJS 2.1 - Global error: ReferenceError: Can't find variable: define at http://localhost:7357/assets/archive-ui.js, line 9

    ---
        Log: |
            { type: 'error',
              text: 'ReferenceError: Can\'t find variable: define at http://localhost:7357/assets/archive-ui.js, line 9\n' }
    ...
not ok 4 PhantomJS 2.1 - Global error: ReferenceError: Can't find variable: define at http://localhost:7357/assets/tests.js, line 1
    ---
        Log: |
            { type: 'error',
              text: 'ReferenceError: Can\'t find variable: define at http://localhost:7357/assets/tests.js, line 1\n' }
    ...
not ok 5 PhantomJS 2.1 - Global error: ReferenceError: Can't find variable: define at http://localhost:7357/assets/test-loader.js, line 3
    ---
        Log: |
            { type: 'error',
              text: 'ReferenceError: Can\'t find variable: define at http://localhost:7357/assets/test-loader.js, line 3\n' }
    ...
not ok 6 PhantomJS 2.1 - Global error: ReferenceError: Can't find variable: EmberENV at http://localhost:7357/3988/tests/index.html?hidepassed, line 39
    ---
        Log: |
            { type: 'error',
              text: 'ReferenceError: Can\'t find variable: EmberENV at http://localhost:7357/3988/tests/index.html?hidepassed, line 39\n' }
    ...

At this point, the process hangs and it has to be Ctrl+C'd.

After some searching, I found a similar issue in ember-cli (https://github.com/ember-cli/ember-cli/issues/3894). This one said it had something to do with print styles, so I looked and found that bootstrap applies some similar print styles to what is in the issue.

So, I decided to comment those out and the tests run as expected. If I don't comment those out and downgrade phantom to 1.9.8, tests also run as expected.

Most helpful comment

I believe our issue may be an @import url("//fonts.googleapis.com/css?family=Inconsolata:400,700"); in our CSS. If remove this line tests run consistently.

Also, if I add this to the phantom runner then things also work:

page.onResourceRequested = function(requestData, networkRequest) {
  if (requestData.url.match('fonts.googleapis.com')) {
    networkRequest.abort();
  }
};

All 13 comments

No luck with any other solution here?

I haven't been able to find a solution that helps except downgrading to 1.9.8.

I'm having this same issue in my app. From what I can tell, any @media queries cause an issue for Phantom.

Actually, on further inspection this issue seems to be somewhat intermittent. The @media queries appear to be a false alarm for me.

More details:

  • With full CSS file intact (include @media queries): 5 out of 20 runs ran without syntax errors.
  • With @media queries removed from CSS: 8 out of 20 runs ran without syntax errors.
  • With CSS file empty: 20 out of 20 runs ran without syntax errors.

This leads me to believe that there is something wrong with CSS parsing, but it's not specifically related to @media queries.

Also, whenever the run fails, I get the following error in my console: [CRITICAL] QNetworkReplyImpl: backend error: caching was enabled after some bytes had been written. As I don't get it when the run succeeds, I suspect it's related.

Confirmed that running phantomjs with --disk-cache=true (per #13165) gets rid of the critical error, but does not prevent the intermittent syntax error issue.

I believe our issue may be an @import url("//fonts.googleapis.com/css?family=Inconsolata:400,700"); in our CSS. If remove this line tests run consistently.

Also, if I add this to the phantom runner then things also work:

page.onResourceRequested = function(requestData, networkRequest) {
  if (requestData.url.match('fonts.googleapis.com')) {
    networkRequest.abort();
  }
};

This problem crippled my CI builds, going to downgrade as well.

I was seeing these with my ember-electron app even w/ phantomjs 1.9.8, node 4.x, and commenting out all @media blocks in CSS. It turned out to be completely unrelated to phantomjs in my case: I had specified some non-default paths for my application in ember-cli-build.js and app/index.html but not in tests/index.html so when I attempted to connect to the stuck test server with a browser I could these assets failing to load (and thus why there was a "Could not find module..." error).

@awochna I have just seen an almost identical slew of errors from in an ember-cli project I am working on. I saw a similar string of errors when running ember test. Swapping the versions of phantom did not solve the issue. Also, disabling all CSS that used @import for both the app and the tests/index.html did not solve the issue.
TLDR, a sub dependency in my project must have had a syntax error that crept into vendor.js. I created a repo that reproduces this stack trace almost exactly: https://github.com/efx/poc-bug. (see the README to reproduce)
Based on that, I think the fault lies with ember-cli.
Note that while phantom reported an error somewhere in vendor.js the stacktrace was completely inaccurate in my project, but is accurate in poc-bug.
Environment:

ember-cli: 2.5.1
node: 6.2.1
os: darwin x64

I have the same problem in a React application:
[CRITICAL] QNetworkReplyImpl: backend error: caching was enabled after some bytes had been written
I don't know the cause of the problem, sometimes the execution fails and after the execution is correct, with no changes.

Let's merge this issue into #13165

This still fails quite randomly on 2.1 and downgrading to 1.9.8 would give another issue https://github.com/testem/testem/issues/1021

Was this page helpful?
0 / 5 - 0 ratings