sass example doesnt seem to work.

[Revilotom]

When running the tests in cypress-react-unit-test/examples/sass-and-ts I get the error below:

Error: Webpack Compilation Error
/private/tmp/cypress-react-unit-test/support/index.js
Module not found: Error: Can't resolve 'cypress-react-unit-test/dist/hooks' in '/private/tmp/cypress-react-unit-test/support'
resolve 'cypress-react-unit-test/dist/hooks' in '/private/tmp/cypress-react-unit-test/support'
  Parsed request is a module
  using description file: /private/tmp/cypress-react-unit-test/package.json (relative path: ./support)
    aliased with mapping 'cypress-react-unit-test': '/private/tmp/cypress-react-unit-test' to '/private/tmp/cypress-react-unit-test/dist/hooks'
      using description file: /private/tmp/cypress-react-unit-test/package.json (relative path: ./support)
        Field 'browser' doesn't contain a valid alias configuration
        using description file: /private/tmp/cypress-react-unit-test/package.json (relative path: ./dist/hooks)
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            /private/tmp/cypress-react-unit-test/dist/hooks doesn't exist
          .wasm
            Field 'browser' doesn't contain a valid alias configuration
            /private/tmp/cypress-react-unit-test/dist/hooks.wasm doesn't exist
          .mjs
            Field 'browser' doesn't contain a valid alias configuration
            /private/tmp/cypress-react-unit-test/dist/hooks.mjs doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            /private/tmp/cypress-react-unit-test/dist/hooks.js doesn't exist
          .json
            Field 'browser' doesn't contain a valid alias configuration
            /private/tmp/cypress-react-unit-test/dist/hooks.json doesn't exist
          as directory
            /private/tmp/cypress-react-unit-test/dist/hooks doesn't exist
[/private/tmp/cypress-react-unit-test/dist/hooks]
[/private/tmp/cypress-react-unit-test/dist/hooks.wasm]
[/private/tmp/cypress-react-unit-test/dist/hooks.mjs]
[/private/tmp/cypress-react-unit-test/dist/hooks.js]
[/private/tmp/cypress-react-unit-test/dist/hooks.json]
 @ /private/tmp/cypress-react-unit-test/support/index.js 4:0-45
 @ ./cypress/support/index.js
 @ multi ./cypress/support/index.js

Am I doing something wrongly?

[bahmutov]

Did you run npm install in that folder first? https://github.com/bahmutov/cypress-react-unit-test/tree/master/examples/sass-and-ts#example-sass-and-ts

You need npm install to correctly link cypress-react-unit-test

[Revilotom]

@bahmutov Thanks for the response!
Yes I first ran npm install in the parent directory and then within "sass-and-ts" but I still get the same error!

[bahmutov]

Hmm this is weird - because this example is being tested on CI as you can see ... what’s your NPM and Node versions and operating system?

…

Sent from my iPhone

On Jun 13, 2020, at 19:42, Revilotom ***@***.***> wrote:  @bahmutov Thanks for the response! Yes I first ran npm install in the parent directory and then within "sass-and-ts" but I still get the same error! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[Revilotom]

Yes its passing on CI so maybe there is a problem with my local environemnt..

$ node --version
v14.0.0
$ npm --version
6.14.4

MacOS Catalina 10.15.4

[Revilotom]

npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.4.1 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.4.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN cypress-image-snapshot@3.1.1 requires a peer of cypress@^3.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN happo.io@5.4.0 requires a peer of babel-core@^6.0.0 || ^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN react-google-maps@9.4.5 requires a peer of @types/googlemaps@^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-google-maps@9.4.5 requires a peer of @types/markerclustererplus@^2.1.29 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@8.0.2 requires a peer of webpack@^4.36.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself

Ah this might be the problem. Do I have install all these dependencies myself?

npm WARN sass-loader@8.0.2 requires a peer of webpack@^4.36.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.

I tried manually installing webpack version 4.43:

npm install webpack

And then re running npm install which gets rid of the webpack warning however I still get the same error. Do I have manually install all of the peer dependencies for this example?

Sorry for such a noob question!

[bahmutov]

Ohh, I think I know!

The code from src is built into dist folder - so when you git clone the project, you need to build it

# from the root of the project
npm i
npm run build
# then from the example
npm i

[bahmutov]

If you want to contribute to this project @Revilotom you can submit a PR with README update in every example :)

[Revilotom]

@bahmutov Ahh thank you so much for explaining! It is working fine now! It makes sense that I need to build the project before it can be imported.. silly me haha.

It would be an honour to contribute to your work! Expect a PR from me soon!

[Revilotom]

@bahmutov #299
If you like the way this looks then Ill do the same for other examples. Otherwise let me know what to change!

[bahmutov]

Looking good, closing this issue