Failure to resolve baseUrl in next.js library's component-test executor

maxsultan-aumni commented 3 months ago

Current Behavior

Nx is unable to resolve the baseUrl for a library inside thhe NxTsconfigPathsWebpackPlugin although baseUrl exists in tsconfig.base.json and we have extended that file all the way to the local tsconfig.json in cypress and tsconfig.json in the library. This causes imports from other libraries with paths specified in tsconfig.base.json to throw a module resolution error.

Expected Behavior

Nx should be able to resolve the base url when running cypress component tests in a next library

GitHub Repo

https://github.com/maxsultan-aumni/nx-next-cypress-component-minimal-repro

Steps to Reproduce

Create a new nx integrated monorepo (react, next, styled components)
Add a next library (shared-components)
Add a component test target the the next library
Add a second library (utils)
Import from utils in shared-components
Run nx component-test shared-components

Nx Report

NX   Report complete - copy this into the issue template

Node           : 20.12.0
OS             : darwin-arm64
Native Target  : aarch64-macos
npm            : 10.5.0

nx (global)        : 19.5.6
nx                 : 19.5.6
@nx/js             : 19.5.6
@nx/jest           : 19.5.6
@nx/linter         : 19.5.6
@nx/eslint         : 19.5.6
@nx/workspace      : 19.5.6
@nx/cypress        : 19.5.6
@nx/devkit         : 19.5.6
@nx/eslint-plugin  : 19.5.6
@nx/next           : 19.5.6
@nx/react          : 19.5.6
@nrwl/tao          : 19.5.6
@nx/web            : 19.5.6
@nx/webpack        : 19.5.6
typescript         : 5.5.4
---------------------------------------
Registered Plugins:
@nx/next/plugin
@nx/cypress/plugin
@nx/eslint/plugin
@nx/jest/plugin
@nx/webpack/plugin

Failure Logs

> nx run shared-components:component-test

> cypress run --component

DevTools listening on ws://127.0.0.1:61572/devtools/browser/f0b306c0-0e00-4f9d-835c-cc06daa50465
2024-08-06 11:42:34.106 Cypress[72925:3078344] WARNING: Secure coding is not enabled for restorable state! Enable secure coding by implementing NSApplicationDelegate.applicationSupportsSecureRestorableState: and returning YES.
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://127.0.0.1:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/msultan/Desktop/aumni/test/next-cypress-component/shared-components/public' directory
tsconfig-paths-webpack-plugin: Found no baseUrl in tsconfig.json, not applying tsconfig-paths-webpack-plugin
tsconfig-paths-webpack-plugin: Found no baseUrl in tsconfig.json, not applying tsconfig-paths-webpack-plugin
tsconfig-paths-webpack-plugin: Found no baseUrl in tsconfig.json, not applying tsconfig-paths-webpack-plugin
tsconfig-paths-webpack-plugin: Found no baseUrl in tsconfig.json, not applying tsconfig-paths-webpack-plugin
tsconfig-paths-webpack-plugin: Found no baseUrl in tsconfig.json, not applying tsconfig-paths-webpack-plugin
tsconfig-paths-webpack-plugin: Found no baseUrl in tsconfig.json, not applying tsconfig-paths-webpack-plugin
tsconfig-paths-webpack-plugin: Found no baseUrl in tsconfig.json, not applying tsconfig-paths-webpack-plugin
tsconfig-paths-webpack-plugin: Found no baseUrl in tsconfig.json, not applying tsconfig-paths-webpack-plugin
Entrypoint main [big] 535 KiB = runtime.js 33.5 KiB main.js 501 KiB
chunk (runtime: runtime) cypress-support-file.css, cypress-support-file.js (cypress-support-file) 1.71 KiB (javascript) 75 bytes (css/mini-extract) [rendered]
chunk (runtime: runtime) main.js (main) (id hint: vendors) 173 KiB [initial] [rendered] reused as split chunk (cache group: defaultVendors)
chunk (runtime: runtime) runtime.js (runtime) 9.42 KiB [entry] [rendered]
chunk (runtime: runtime) spec-0.js (spec-0) 2.24 KiB [rendered]
chunk (runtime: runtime) vendors-node_modules_cypress_react18_dist_cypress-react_esm-bundler_js.js (id hint: vendors) 1.02 MiB [rendered] split chunk (cache group: defaultVendors)
chunk (runtime: runtime) vendors-node_modules_next_link_js-node_modules_react_jsx-dev-runtime_js-node_modules_styled-c-65fa85.js (id hint: vendors) 237 KiB [rendered] split chunk (cache group: defaultVendors)
chunk (runtime: runtime) vendors-node_modules_react_index_js.js (id hint: vendors) 85.7 KiB [rendered] split chunk (cache group: defaultVendors)

ERROR in ./src/lib/shared-components.tsx 20:0-52
Module not found: Error: Can't resolve '@next-cypress-component/utils' in '/Users/msultan/Desktop/aumni/test/next-cypress-component/shared-components/src/lib'

webpack compiled with 1 error (78b83e6fb656ee69)
No errors found.

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        13.13.2                                                                        │
  │ Browser:        Electron 118 (headless)                                                        │
  │ Node Version:   v20.12.0 (/Users/msultan/.asdf/installs/nodejs/20.12.0/bin/node)               │
  │ Specs:          1 found (shared-components.cy.tsx)                                             │
  │ Searched:       **/*.cy.{js,jsx,ts,tsx}                                                        │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  shared-components.cy.tsx                                                        (1 of 1)

  1) An uncaught error was detected outside of a test

  0 passing (238ms)
  1 failing

  1) An uncaught error was detected outside of a test:
     Error: The following error originated from your test code, not from Cypress.

  > Cannot find module '@next-cypress-component/utils'

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.
      at webpackMissingModule (http://localhost:8080/__cypress/src/spec-0.js:18:50)
      at 4365 (http://localhost:8080/__cypress/src/spec-0.js:18:154)
      at Function.__webpack_require__ (http://localhost:8080/__cypress/src/runtime.js:23:42)

  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      0                                                                                │
  │ Failing:      1                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  1                                                                                │
  │ Video:        false                                                                            │
  │ Duration:     0 seconds                                                                        │
  │ Spec Ran:     shared-components.cy.tsx                                                         │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

  (Screenshots)

  -  /Users/msultan/Desktop/aumni/test/next-cypress-component/dist/cypress/shared-com    (2560x1440)
     ponents/screenshots/shared-components.cy.tsx/An uncaught error was detected outs               
     ide of a test (failed).png                                                                     

====================================================================================================

  (Run Finished)

       Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✖  shared-components.cy.tsx                 240ms        1        -        1        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✖  1 of 1 failed (100%)                     240ms        1        -        1        -        -  

Warning: command "cypress run --component" exited with non-zero status code
—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 NX   Ran target component-test for project shared-components (12s)

   ✖  1/1 failed
   ✔  0/1 succeeded [0 read from cache]

Package Manager Version

No response

Operating System

[X] macOS
[ ] Linux
[ ] Windows
[ ] Other (Please specify)

Additional Information

We were able to get this working correctly by opening node_modules/@nx/webpack/src/plugins/nx-typescript-webpack-plugin/nx-tsconfig-paths-webpack-plugin.js and adding a baseUrl on line 32

compiler.options.resolve.plugins.push(new tsconfig_paths_webpack_plugin_1.TsconfigPathsPlugin({
            configFile: !path.isAbsolute(this.options.tsConfig)
                ? path.join(devkit_1.workspaceRoot, this.options.tsConfig)
                : this.options.tsConfig,
            extensions: Array.from(extensions),
            mainFields: ['module', 'main'],
            baseUrl: '/Users/msultan/Desktop/aumni/test/next-cypress-component'
        }));

running rm -rf node_modules/.cache

rerunning nx component-test shared-components

ryanolson-aumni commented 3 months ago

We worked around this by adding a tsconfig.json like:

{
  "extends": "./tsconfig.base.json"
}

In the root of the project. Definitely feels hacky.

maxsultan-aumni commented 3 months ago

Any update on this?

maxsultan-aumni commented 2 months ago

Any update on this?

astrodomas commented 1 week ago

Got the same issue as of nx v20

ryanolson-aumni commented 1 week ago

@ndcunningham ?

astrodomas commented 1 week ago

We worked around this by adding a tsconfig.json like:

{ "extends": "./tsconfig.base.json" } In the root of the project. Definitely feels hacky.

where exactly did you add this?

astrodomas commented 1 week ago

ryanolson-aumni commented 5 days ago

We worked around this by adding a tsconfig.json like: { "extends": "./tsconfig.base.json" } In the root of the project. Definitely feels hacky.

where exactly did you add this?

At the root of the whole monorepo

nrwl / nx