Sapper(maybe?) throws Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

[andrewdc]

Bug (possibly Sapper related)

mini project here:
cy-unti-test-test

• version: "cypress-svelte-unit-test": "^3.2.0",
• platform: Mac
• expected behavior: imports .svelte files for unit tests
• actual behavior: Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

Full error output:

Opening Cypress...
GET /__/ 200 6.226 ms - -
GET /__cypress/runner/cypress_runner.css 200 6.063 ms - -
GET /__cypress/runner/cypress_runner.js 200 5.018 ms - -
GET /__cypress/static/favicon.ico 200 0.986 ms - -
GET /__cypress/iframes/component/superlink.spec.js 200 3.118 ms - 872
GET /__cypress/runner/fonts/fa-solid-900.woff2 200 5.323 ms - 76120
(!) You have passed an unrecognized option
Unknown input options: client, server, serviceworker. Allowed options: acorn, acornInjectPlugins, cache, context, experimentalCacheExpiry, external, inlineDynamicImports, input, manualChunks, moduleContext, onwarn, perf, plugins, preserveEntrySignatures, preserveModules, preserveSymlinks, shimMissingExports, strictDeprecations, treeshake, watch
We currently have 1 warnings
(!) You have passed an unrecognized option
Unknown input options: client, server, serviceworker. Allowed options: acorn, acornInjectPlugins, cache, context, experimentalCacheExpiry, external, inlineDynamicImports, input, manualChunks, moduleContext, onwarn, perf, plugins, preserveEntrySignatures, preserveModules, preserveSymlinks, shimMissingExports, strictDeprecations, treeshake, watch
We currently have 1 warnings
{
  code: 'ERROR',
  error: Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
      at error (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:217:30)
      at Module.error (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:15145:16)
      at tryParse (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:15034:23)
      at Module.setSource (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:15435:30)
      at ModuleLoader.addModuleSource (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:17429:20)
      at async ModuleLoader.fetchModule (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:17490:9)
      at async /Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:17460:36
      at async Promise.all (index 0)
      at async ModuleLoader.fetchModule (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:17491:9)
      at async Promise.all (index 0)
      at async Promise.all (index 0) {
    code: 'PARSE_ERROR',
    parserError: SyntaxError: Unexpected token (1:0)
        at Object.pp$4.raise (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:3922:13)
        at Object.pp.unexpected (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:1703:8)
        at Object.pp$3.parseExprAtom (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:3321:10)
        at Object.parseExprAtom (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:18500:75)
        at Object.pp$3.parseExprSubscripts (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:3133:19)
        at Object.pp$3.parseMaybeUnary (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:3110:17)
        at Object.parseMaybeUnary (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:18414:29)
        at Object.pp$3.parseExprOps (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:3045:19)
        at Object.pp$3.parseMaybeConditional (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:3028:19)
        at Object.pp$3.parseMaybeAssign (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:3001:19)
        at Object.pp$3.parseExpression (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:2967:19)
        at Object.pp$1.parseStatement (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:1891:45)
        at Object.parseStatement (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:18522:22)
        at Object.pp$1.parseTopLevel (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:1760:21)
        at Object.parse (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:1560:15)
        at Function.parse (/Users/self/src/cy-unit/node_modules/rollup/dist/shared/rollup.js:1583:35) {
      pos: 0,
      loc: [Position],
      raisedAt: 1
    },
    pos: 0,
    loc: {
      column: 0,
      file: '/Users/self/src/cy-unit/Superlink/Superlink.svelte',
      line: 1
    },
    frame: `1: <script>\n   ^\n2:   export let href = "#";\n3:   let slotContent = '';`,
    watchFiles: [
      '/Users/self/src/cy-unit/Superlink/superlink.spec.js',
      '/Users/self/src/cy-unit/Superlink/Superlink.svelte'
    ]
  }
}

GET /__cypress/tests?p=Superlink/superlink.spec.js 200 539.665 ms - 111
GET /__cypress/tests?p=cypress/support/index.js 200 548.126 ms - 232
GET /__cypress/iframes/component/superlink.spec.js 304 1.250 ms - -

GET /__cypress/tests?p=Superlink/superlink.spec.js 200 1.566 ms - 111
GET /__cypress/tests?p=cypress/support/index.js 200 2.817 ms - 232
GET /__cypress/runner/wasm/mappings.wasm 200 1.228 ms - -

I don't have the specialty to totally understand where the problem is here, but my guess is that something in the way Sapper serves up files cannot jive with the way this package imports .svelte files for testing.

Any help welcomed. Thanks in advance!
-adc

[bahmutov]

The config in your example exports an object with 3 configs: 'client', 'server' and 'serviceWorker' which confused the Rollup loader. That's why you see the warning

(!) You have passed an unrecognized option
Unknown input options: client, server, serviceworker. Allowed options:

Hmm, I need to think how to better solve this, or maybe someone can come up with an idea.

A workaround would be to factor out the client Rollup config into a separate file and pass its filename like this issue has implemented bahmutov/cy-rollup#2

Or maybe cy-rollup should handle this scenario, I have opened bahmutov/cy-rollup#23

[Dulanjala007]

it's fixed now, you pass a custom config, in which you only gives client section of the build for the tests
https://github.com/bahmutov/cy-rollup/issues/2#issuecomment-625458128
Readme should be updated to reflect this change that's important for sapper. (first time even making a comment like this so i don't know how to do the update properly, sorry)

[andrewdc]

it's fixed now, you pass a custom config, in which you only gives client section of the build for the tests
https://github.com/bahmutov/cy-rollup/issues/2#issuecomment-625458128
Readme should be updated to reflect this change that's important for sapper. (first time even making a comment like this so i don't know how to do the update properly, sorry)

Fantastic guys. I will test this out shortly.
Thanks so much for putting a fix in for this!

[TheBeachMaster]

Still having this issue, not sure if the fix works

GET /__/ 200 5.299 ms - -
GET /__cypress/runner/cypress_runner.css 200 3.177 ms - -
GET /__cypress/runner/cypress_runner.js 200 1.482 ms - -
GET /__cypress/runner/fonts/fa-solid-900.woff2 200 0.654 ms - 76120
GET /__cypress/iframes/component/auth/login_component_spec.js 200 3.109 ms - 929
(!) You have passed an unrecognized option
Unknown input options: client, server, serviceworker. Allowed options: acorn, acornInjectPlugins, cache, context, experimentalCacheExpiry, external, inlineDynamicImports, input, manualChunks, moduleContext, onwarn, perf, plugins, preserveEntrySignatures, preserveModules, preserveSymlinks, shimMissingExports, strictDeprecations, treeshake, watch
We currently have 1 warnings
(!) You have passed an unrecognized option
Unknown input options: client, server, serviceworker. Allowed options: acorn, acornInjectPlugins, cache, context, experimentalCacheExpiry, external, inlineDynamicImports, input, manualChunks, moduleContext, onwarn, perf, plugins, preserveEntrySignatures, preserveModules, preserveSymlinks, shimMissingExports, strictDeprecations, treeshake, watch
We currently have 1 warnings
{
  code: 'ERROR',
  error: Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
      at error (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:5211:30)
      at Module.error (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:9726:16)
      at tryParse (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:9640:23)
      at Module.setSource (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:10037:30)
      at ModuleLoader.addModuleSource (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:18170:20)
      at async ModuleLoader.fetchModule (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:18224:9)
      at async Promise.all (index 1)
      at async ModuleLoader.fetchStaticDependencies (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:18248:34)
      at async Promise.all (index 0)
      at async ModuleLoader.fetchModule (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:18225:9)
      at async Promise.all (index 0) {
    code: 'PARSE_ERROR',
    parserError: SyntaxError: Unexpected token (1:0)
        at Object.pp$4.raise (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:15427:13)
        at Object.pp.unexpected (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:13119:8)
        at Object.pp$3.parseExprAtom (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:14826:10)
        at Object.pp$3.parseExprSubscripts (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:14629:19)
        at Object.pp$3.parseMaybeUnary (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:14606:17)
        at Object.parseMaybeUnary (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:19027:29)
        at Object.pp$3.parseExprOps (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:14541:19)
        at Object.pp$3.parseMaybeConditional (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:14524:19)
        at Object.pp$3.parseMaybeAssign (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:14492:19)
        at Object.pp$3.parseExpression (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:14458:19)
        at Object.pp$1.parseStatement (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:13307:45)
        at Object.pp$1.parseTopLevel (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:13176:21)
        at Object.parse (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:12978:15)
        at Function.parse (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:12999:35)
        at tryParse (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:9627:23)
        at Module.setSource (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:10037:30)
        at ModuleLoader.addModuleSource (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:18170:20)
        at async ModuleLoader.fetchModule (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:18224:9)
        at async Promise.all (index 1)
        at async ModuleLoader.fetchStaticDependencies (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:18248:34)
        at async Promise.all (index 0)
        at async ModuleLoader.fetchModule (/Users/kennedyotieno/git/redischat/node_modules/rollup/dist/shared/rollup.js:18225:9) {
      pos: 0,
      loc: [Position],
      raisedAt: 1
    },
    id: '/Users/kennedyotieno/git/redischat/src/components/auth/Login.svelte',
    pos: 0,
    loc: {
      file: '/Users/kennedyotieno/git/redischat/src/components/auth/Login.svelte',
      line: 1,
      column: 0
    },
    frame: '1: <script>\n' +
      '   ^\n' +
      '2:   import { goto, stores } from "@sapper/app";\n' +
      '3:   const { session } = stores();',
    watchFiles: [
      '/Users/kennedyotieno/git/redischat/src/components/auth/login_component_spec.js',
      '/Users/kennedyotieno/git/redischat/src/components/auth/Login.svelte'
    ]
  }
}

GET /__cypress/tests?p=src/components/auth/login_component_spec.js 200 804.803 ms - 111
GET /__cypress/tests?p=cypress/support/index.js 200 808.102 ms - 232
GET /__cypress/iframes/component/auth/login_component_spec.js 304 1.074 ms - -

GET /__cypress/tests?p=src/components/auth/login_component_spec.js 200 1.413 ms - 111
GET /__cypress/tests?p=cypress/support/index.js 200 2.602 ms - 232
GET /service-worker.js 200 32.157 ms - -
GET /client/index.bd9d6bd3.js 200 34.107 ms - -
GET /client/index.27cffd42.js 200 33.616 ms - -
GET /client/[username].c526705f.js 200 31.702 ms - -
GET /client/index.d7059ef4.js 200 30.338 ms - -
GET /client/_layout.e20ffd61.js 200 30.444 ms - -
GET /service-worker-index.html 200 14.711 ms - -
GET /client/index.334d77b8.js 200 24.356 ms - -
GET /client/sapper-dev-client.1e7a4a5e.js 200 22.750 ms - -
GET /client/_layout.474b8281.js 200 28.890 ms - -
GET /client/client.02b8d83d.js 200 23.132 ms - -
GET /__cypress/runner/fonts/fa-regular-400.woff2 200 1.366 ms - 13600

[vuonghungvinh]

@TheBeachMaster I have the same error, did you find the solution?

[TheBeachMaster]

@vuonghungvinh I never managed to fix this, and now that Sapper has been deprecated in favor of Svelte Kit try using svelte-testing-library

[vuonghungvinh]

@TheBeachMaster Thank you