Was working, Now not: "Uncaught SyntaxError: Unexpected token '<'"

[JeffWScott]

Current behavior:

My test were working fine. I have added a new dependancy https://www.npmjs.com/package/monaco-editor And now I get this error at the beginning of ALL my tests. This error isn't telling me anything useful.

Desired behavior:

This error has shut down ALL 7 of my specs. I can no longer run any of them.

Test code to reproduce

• clone https://github.com/Lamden/wallet
• sudo npm install
• ./node_modules/.bin/cypress run --spec cypress/integration/unit-tests/firstrun-create-spec.js

Versions

Windows 10 Cypress 3.8.1 Electron 78

[bahmutov]

it seems to me, the svelte loader is going wrong - can you run it with cypress open?

[jennifer-shehane]

There's a lot of variables involved in your example - the entire repo of code to consider. Can you narrow down the reproducible example to the smallest necessary parts? There's too much to consider here to narrow down where the error is originating from.

Also, maybe highlight the commit that began causing the failure? Thanks.

[JeffWScott]

@jennifer-shehane yes you're correct, I should have been more clear.

I created a branch where the cypress tests work. https://github.com/Lamden/wallet/tree/cypress-works You can "npm run test-firstrun-create" to run a test.

This is the master branch where the tests do not work. https://github.com/Lamden/wallet

The difference is this right here. Which is disabling the component that imports Monaco Editor. https://github.com/Lamden/wallet/commit/08c5b48c933fc2c17c34cac7b1859177d4504229

Let me restate my issue, Cypress isn't giving me the error output, stack-trace, etc, to be able to tell me what is wrong. I just don't know enough about cypress to figure out why. Especially since my app builds and runs fine, no errors.

[JeffWScott]

@jennifer-shehane

Hey, I went a step further and refactored the Monaco Editor import out to it's own module.

I can now load or not load the Monaco Editor: https://github.com/Lamden/wallet/blob/master/src/svelte/components/Monaco.svelte

With it turned off I can run all test cases fine. With Monaco Editor loaded I throw this error every time and in every test case.

  1) An uncaught error was detected outside of a test
undefined
  0 passing (623ms)
  1 failing
undefined
  1)  An uncaught error was detected outside of a test:
     Uncaught SyntaxError: Unexpected token '<'

This error originated from your test code, not from Cypress.

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.

Obviously the code builds and the app loads and runs fine in either case.

Does this point to maybe a webpack issue or something? I'd love it if someone can tell me how to get more info from cypress so that I can track this down.

Thanks!

[JeffWScott]

@bahmutov Hey, sorry I didn't see your response there.

cypress open does open the browser and show my test cases. Clicking on one of them opens a new window. I get a notification in the bottom of the window that Cypress has crashed.

I installed cypress-log-to-output but the only output I get in the console is

[cypress-log-to-output] Attempting to connect to Chrome Debugging Protocol

It doesn't get any farther after the crash. I was sure I was going to get some helpful information back from that :)!

[jennifer-shehane]

I was able to narrow this issue down to this specific line:

https://github.com/Lamden/wallet/blob/master/src/svelte/components/Monaco.svelte#L4:L4

When you comment out this line, the tests work.

[JeffWScott]

@jennifer-shehane yes, as I stated above that is the issue. I refactored the code to be able to do that.

I have no idea why cypress does not like this import. Especially considering the app builds completely fine with that import.

[mattbennett]

For future visitors to this issue, we experienced this problem and it turned out to be an nginx misconfiguration. The webserver was returning an HTML file instead of the expected Javascript file.

This was only happening inside CI and it was hard to debug (and slow!) It would be great if Cypress exposed the snippet of code containing the Syntax Error when this happens.

[Berkmann18]

I'm having the same problem on all test suites that worked until recently.

Side note: Why is Cypress' WebGL support inconsistent?

[curicm]

Had same error, for me the issue was having "js" files in /dist folder, instead of /dist/environment_subfolder

[maribies]

I am using React with Vite and had the same error showed up when I started component testing with React Code Mirror. The default file extension was .js but with Vite, they need to be .jsx. After changing that, the component could mount and the test could run.

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.