Tresjs
bug: build fails when NuxtUI module prop `global` is set to `true` and TresJS with cientos is present
Describe the bug
If the following criteria are met in the project, the build command pnpm build will fail with the error below.
Criteria:
- The nuxt module
@tresjs/nuxtis enabled in the project and present as dependency - The dependency
@tresjs/cientosis present (enabling in TresJS nuxt module config is not needed) - The nuxt module
@nuxt/uiis enabled in the project and present as dependency - The NuxtUI module config
globalis set totrue
Error:
Cannot use pnpm build bc the build fails with the following error:
$ pnpm build
> nuxt-app@ build /issue-report-nuxt-ui-1748-tresjs-cientos-404
> nuxt build
Nuxt 3.11.2 with Nitro 2.9.6 11:03:36 AM
[nuxt:tailwindcss 11:03:39 AM] WARN You have provided functional plugins in tailwindcss.config in your Nuxt configuration that cannot be serialized for Tailwind Config. Please use tailwind.config or a separate file (specifying in tailwindcss.configPath) to enable it with additional support for IntelliSense and HMR.
ℹ Using default Tailwind CSS file nuxt:tailwindcss 11:03:39 AM
ℹ Building client... 11:03:41 AM
ℹ vite v5.2.11 building for production... 11:03:41 AM
node_modules/.pnpm/@[email protected][email protected][email protected]_@[email protected]_@[email protected]_@_cqvxtylvfpkverkt5obk5rowla/node_modules/@nuxt/ui/dist/runtime/components/forms/Radio.vue (128:68): Error when using sourcemap for reporting an error: Can't resolve original location of error.
ℹ ✓ 135 modules transformed. 11:03:50 AM
ERROR x Build failed in 8.84s 11:03:50 AM
[11:03:50 AM] ERROR Nuxt Build Error: node_modules/.pnpm/@[email protected][email protected][email protected]_@[email protected]_@[email protected]_@_cqvxtylvfpkverkt5obk5rowla/node_modules/@nuxt/ui/dist/runtime/components/forms/Radio.vue (128:68): The left-hand side of an assignment expression must be a variable or a property access. (Note that you need plugins to import files that are not JavaScript)
file: /issue-report-nuxt-ui-1748-tresjs-cientos-404/node_modules/.pnpm/@[email protected][email protected][email protected]_@[email protected]_@[email protected]_@_cqvxtylvfpkverkt5obk5rowla/node_modules/@nuxt/ui/dist/runtime/components/forms/Radio.vue:128:68
126: _withDirectives(_createElementVNode("input", _mergeProps({
127: id: _ctx.inputId,
128: "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((("pick" in _ctx ? _ctx.pick : __unimport_unref_(...
^
129: name: _ctx.name,
130: required: _ctx.required,
at getRollupError (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:394:41)
at ParseError.initialise (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:11332:28)
at convertNode (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:13082:10)
at convertProgram (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:12399:12)
at Module.setSource (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:14243:24)
at async ModuleLoader.addModuleSource (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:18896:13)
ELIFECYCLE Command failed with exit code 1.
Reproduction
https://github.com/toddeTV/issue-report-nuxt-ui-1748-tresjs-cientos-404
Steps to reproduce
Reproduction with a prepared demo repository:
- pull the provided reproduction repro (see URI above)
- go inside the pulled repo folder
-
pnpm i -
pnpm build-> will now break with the provided error
Reproduction without my linked demo repo, own example reproduction:
-
pnpm dlx nuxi@latest init issue-report-nuxt-ui-1748-tresjs-cientos-404 -t uiwithpnpmas package manager (see NuxtUI starter project in installation guide for more information) -
cd
issue-report-nuxt-ui-1748-tresjs-cientos-404 -
pnpm i(just to be sure) -
pnpm build-> should work (just to test and be sure) -
Now lets add a small code that leads to the build error:
-
pnpm i -D @tresjs/nuxt @tresjs/cientos -
In
nuxt.config.ts: Add@tresjs/nuxtto the modules & setglobaltotruein the NuxtUI settings.
The nuxt config should then look something like this:export default defineNuxtConfig({ devtools: { enabled: true }, modules: [ '@nuxt/ui', '@tresjs/nuxt', ], ui: { global: true, // this will break on `pnpm build` -> if set to `false` | `undefined` the build will work }, }) -
pnpm build-> will now break with the provided error
How to solve the bug
To get the build working again, one of two things can be done:
- Either setting the NuxtUI module config
globaltoundefinedorfalse, or removing it so that the defaultundefinedwill be used in the background. - Or remove the dependency
@tresjs/cientos(e.g.pnpm remove @tresjs/cientos)
But the combination I want in my project setup with build upon code cannot be built.
System Info
Global:
- Operating System: Linux (Ubuntu v23.10)
- Node v20.11.1
- pnpm v9.0.1
- (npm v10.2.4)
- (npx v10.2.4)
Project:
- Nuxt Version: 3.11.2
- CLI Version: 3.11.1
- Nitro Version: 2.9.6
- Builder: -
- User Config: devtools, modules, ui
- Runtime Modules: @nuxt/[email protected], @tresjs/[email protected]
- Build Modules: -
TresJS dependencies:
- @tresjs/nuxt: ^2.1.1 => 2.1.1
- @tresjs/cientos: ^3.8.0 => 3.8.0
Used Package Manager
pnpm
Cross bug report
Because I am not sure whether this is a @nuxt/ui or @tresjs/cientos issue and what falls under which jurisdiction, I reported this bug twice:
Code of Conduct
- [X] I agree to follow this project's Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] The provided reproduction is a minimal reproducible example of the bug.
BTW:
It is not needed to enable @tresjs/cientos in nuxt.config.ts:
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
// [...]
tres: {
modules: [
// '@tresjs/cientos', // <- not needed to encounter the problem
],
},
})
I'm also hitting the same error, even during development. Was able to reproduce that it seems like only once @tresjs/cientos is installed (via package.json) that the issue appears.
Appears to ONLY affect URadio and URadioGroup components, though? I'm able to use UAlert, UButton, UToggle, etc. without any issues, and without any configuration in nuxt.config.ts (no global option defined).
The error traces back to the same as yours above:
The left-hand side of an assignment expression must be a variable or a property access
...node_modules/@nuxt/ui/dist/runtime/components/forms/Radio.vue:128:68
- Node: v20.13.1
- NPM: 10.5.2
- Nuxt: 3.11.2
-
@nuxt/ui: "^2.16.0-28594879.3b97563" -
@tresjs/cientos: "^3.9.0" -
@tresjs/nuxt: "^2.1.2"
Currently hitting the same problem. Node: v20.9.0 Nuxt: 3.11.2 nuxt/ui: 2.17.0 tresjs/cientos: 3.9.0 tresjs/nuxt: 2.1.2 types/three: 0.165.0
The reason for this issue is an auto import name conflict. @tresjs/cientos provides pick as auto import which is then picked up via nuxt ui instead of the own pick - only in some components like Radio.
That's why it only appears when using global: true (all components made available) or when using distinct components.
As nuxt/ui defines pick (but uses non-script-setup CAPI) it might even be a bug issue with unimport 🤔
