Last migration update wroke the import via ts (problem with vite.config.ts and new nxViteTsPaths method) #18492
Comments
|
@fsgreco I see you found the related PR! @barbados-clemens tagging you here just for reference. |
|
@fsgreco I just tried this on with nx latest and didn't see the issue. The steps I took is to make a new react integrated workspace and then generated a react library with vite/vitest. |
|
Sorry for not specifying this, but my project is
It should give you the error: |
|
Okay this looks to be related to buildable libs, and something about the returned path vite doesn't like. i.e. when resolving to the path defined in the tsconfig.base.json, vite throws the error that it can't understand the package.json export fields, what I imagine is bc those files don't exist as those export fields are for when the project is built as a final artifact. When running serve, I can see the file is correctly resolved. side note: I also get error from vite about styled-components as well. (see full error log below) I will need to look more into how to control this behavior with vite. Full Debug Output❯ nx serve frontend
[Nx Vite TsPaths] Found tsconfig at /Users/caleb/Work/sandbox/vite-plugin-issues/tsconfig.base.json [Nx Vite TsPaths] first parsed tsconfig: { [Nx Vite TsPaths] Found tsconfig at /Users/caleb/Work/sandbox/vite-plugin-issues/tsconfig.base.json [Nx Vite TsPaths] fallback parsed tsconfig: { [Nx Vite TsPaths] Resolved @myorg/ui-demo to /Users/caleb/Work/sandbox/vite-plugin-issues/packages/ui-demo/src/index.ts ✘ [ERROR] Failed to resolve entry for package "@myorg/ui-demo-buildable". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-scan] This error came from the "onResolve" callback registered here: The plugin "vite:dep-scan" was triggered by this import ✘ [ERROR] Failed to resolve entry for package "styled-components". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-scan] This error came from the "onResolve" callback registered here: The plugin "vite:dep-scan" was triggered by this import ✘ [ERROR] Failed to resolve entry for package "styled-components". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-scan] This error came from the "onResolve" callback registered here: The plugin "vite:dep-scan" was triggered by this import |
|
@fsgreco okay so some new info. I noticed if I remove the 'workspaces' entry from the package.json and reinstall deps. it starts working. Something about the npm workspace setup is whats causing the issue, almost like vite doesn't use the plugin to resolve the file but instead does it own resolution first and errors instead of passing it off to the plugin? forcing the plugin to resolve first with 'enforce: pre' doesn't seem to work either. |
|
Hi @fsgreco, so figured out what was going on here. mainly using so when you setup to use the This all happens before the nx vite tspaths plugin can run so it can't resolve that dep first. So there are 2 work arounds here
"targets": {
"build": {
"options": {
"outputPath": "packages/ui-demo/dist"
}
}
}2b. Set {
"name": "@myorg/ui-demo",
"version": "0.0.1",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"import": "./dist/index.mjs",
"require": "./dist/index.js"
}
}
}so now when vite loads your project, it will correctly find the built code. This will require your project is built fist. So you'll want to make sure the {
"targetDefaults": {
"build": {
"dependsOn": ["^build"]
},
"serve": {
"dependsOn": ["^build"]
}
}You can learn more about ( Hopefully that helps and explains more as to what is happening here. |
|
This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context. |
Current Behavior
My libs where created with
@nx/react:libgenerators, they result in libs with this kind ofpackage.json:{ "name": "@myself/lib-name", "version": "0.0.1", "main": "./index.js", "types": "./index.d.ts", "exports": { ".": { "import": "./index.mjs", "require": "./index.js" } } }Now, after the last update (made via
nx migrate latestandnx migrate --run-migrations)I notice that the
vite.config.tsfiles changed the way they get myviteTsConfigPaths.From this:
To this:
The problem is that now I have this error:
Expected Behavior
It should simply import the packages by reading the base ts config file. Vite is not reading it.
GitHub Repo
No response
Steps to Reproduce
This problem appears after a migration from "nx": "16.1.3" to the latest 16.6.0 (idem for
@nx/vitefrom v16.1.3 to v16.6.0)@nx/react:lib@nx/react:appand import some component from@yourname/ui.nx s your-react-appnx migrate latestandnx migrate --run-migrationsNx Report
Failure Logs
No response
Operating System
Additional Information
I manage to "solve" this by changing the
package.jsonof my library, eliminating "exports" and changing "main" to the .ts file, but I'm feeling this is not an ideal solution:{ "name": "@myself/lib-name", "version": "0.0.1", "main": "./src/index.ts", "types": "./index.d.ts", }The text was updated successfully, but these errors were encountered: