Nx: Cypress errors when shared lib is imported

[golfadas]

Importing from a shared lib into cypress e2e spec, breaks the build process with:

The plugins file is missing or invalid.

Your pluginsFile is set to '...dist/out-tsc/apps/my-app-e2e/src/plugins/index.js', but either the file is missing, it contains a syntax error, or threw an error when required. The pluginsFile must be a .js or .coffee file.

Please fix this, or set 'pluginsFile' to 'false' if a plugins file is not necessary for your project.

Reproduction steps

• create-nx-workspace farm
• ng generate jest
• ng generate application myApp ( pick cypress )
• ng generate lib fixtures --no-module
• ng e2e ( everything is fine )
• Export a const from a shared lib into a cypress spec.
• ng e2e ( build is broken )

Reproduction Repo
https://github.com/golfadas/farm

Angular & node versions
Angular CLI: 7.0.1
Node: 10.12.0
OS: darwin x64
Angular: 7.0.2

[paesku]

Hi folks, I currently struggle with a similar problem.
I'd like to have my .po-ts within my libs/foo unfortunately I face the same error as mentioned above.
Any ideas how to setup cypress to make this work?

[skorunka]

Facing same issue when referencing a code in cypress spec file from a lib folder.

[paesku]

I'd like to mention, that when I move support code outside the support folder, the copy process completely messes up.

Example:

// top level
- apps
   --app-1
   --app-1-e2e
      --src
         --fixtures
         --integration
         --plugins
         --support
             app.po.ts // this file is importing and exporting code from foo.po.ts
   --po
     foo.po.ts 

Then the out-tsc will completely pull out the fixtures folder from the src folder and will look like this:

// out-tsc
- apps
   --app-1-e2e
      --src
         --app-1-e2e
            --src
               --integration
               --plugins
               --support
         --fixtures
         --po 
            foo.po.ts 

[skorunka]

No feedback from the NX team :(

[markgoho]

For multiple apps reusing helpers, importing interfaces, etc. would be super helpful but basically everything causes the build to break. Is there anyone that could look into this?

[hevans90]

This is causing us a lot of pain, help!!

[yglin]

Same problem here.

Currently to me the inconvenience is that I can not use serialization functions of my custom data types.
Such as dates, I have to convert string to date explicitly in my support file.
This makes 2 duplicate serialization code for a same data type, one in shared library and another in e2e specs.
When the custom data types grow complex this could be nightmare...

Not sure if this demand breaks the concept of e2e test: to simulate a totally ignorant user, IDK.

Please help, or can someone give a clue about how the typescript compiler arrange _out-tsc/_ files, when there are shared library codes imported ?

[Amakaev]

Same issue.
Have a lib with all my app Models, can't use them in cypress.

[skydever]

this seems related to #1238

[skydever]

in #263 I shared my setup, I am using code from a lib within my cypress tests.

I think in #1238 @diginikkari also has a solution (there is a repo linked within the issue), but notice in both solutions the path mappings do not work...

[diginikkari]

Yep, I have been sharing models with cypress and also with firebase cloud functions in my nx-workspace, but only by using relative paths, which is not optimal.

I think that now with custom builders support, I need to figure out how to make builder with using webpack for all apps in my workspace which are now using tsc. Problem is that because of angular I have been spoiled to not need to learn webpack before 😉

[FrozenPandaz]

Hi all, thanks for your patience waiting for a response.

I bring good news though. :)
I've been experimenting creating a Cypress plugin which would use Webpack to preprocess files. This would allow importing from tsconfig paths. 🎉

[bahmutov]

Hey, I have described how to use TypeScript type aliases in Cypress tests in this blog post: https://glebbahmutov.com/blog/using-ts-aliases-in-cypress-tests/

Hint: you need to configure both webpack and tsconfig

[markgoho]

Hey @bahmutov thanks for sharing this article. It's super awesome to see you popping into this repo to help out. 😍

I think this may help Jason out, but for the end user, it's pretty rare for us to alter the webpack config directly. I think (and I hope Jason agrees) we're all looking for Nx to solve this in a way that doesn't require us to eject from the Angular CLI.

[FrozenPandaz]

@bahmutov Can we simplify this for users by making a separate package under @cypress that sets up typescript?

Here's my PoC: https://github.com/FrozenPandaz/demos/commit/7f7ad5766a32f2220499fae511ce013b0d65456b#diff-be5a146c9304da3c97d343c015bb4287R23

[bahmutov]

We are actually switching to Webpack internally soon https://github.com/cypress-io/cypress/pull/4103 - this would simplify things. Handles js, ts, coffeescript, jsx/tsx, and scss

[FrozenPandaz]

That's absolutely fantastic! 🎉Let me try it locally.

[FrozenPandaz]

Works perfectly except it cannot resolve typescript paths. Left a comment to help address this https://github.com/cypress-io/cypress/pull/4103#issuecomment-502189714. This is super exciting!

[FrozenPandaz]

Nevermind. Perhaps I misunderstood @bahmutov This is only for building cypress, not the runner? Is supporting loading TS planned somewhere?

[paesku]

@vsavkin @FrozenPandaz thank you so much <3