bug: build fails when NuxtUI module prop global is set to true and TresJS with cientos is present

[toddeTV]

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/nuxt is enabled in the project and present as dependency
• The dependency @tresjs/cientos is present (enabling in TresJS nuxt module config is not needed)
• The nuxt module @nuxt/ui is enabled in the project and present as dependency
• The NuxtUI module config global is set to true

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:

1. pull the provided reproduction repro (see URI above)
2. go inside the pulled repo folder
3. pnpm i
4. pnpm build -> will now break with the provided error

Reproduction without my linked demo repo, own example reproduction:

1. pnpm dlx nuxi@latest init issue-report-nuxt-ui-1748-tresjs-cientos-404 -t ui with pnpm as package manager
   (see NuxtUI starter project in installation guide for more information)

2. cd issue-report-nuxt-ui-1748-tresjs-cientos-404

3. pnpm i (just to be sure)

4. pnpm build -> should work (just to test and be sure)

5. Now lets add a small code that leads to the build error:

6. pnpm i -D @tresjs/nuxt @tresjs/cientos

7. In nuxt.config.ts: Add @tresjs/nuxt to the modules & set global to true in 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
     },
   })
   

8. 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 global to undefined or false, or removing it so that the default undefined will 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:

• issue #1748 in @nuxt/ui
• issue #404 in @tresjs/cientos

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[toddeTV]

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
    ],
  },
})

[nwittwer]

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"

[Lucho2027]

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

[TheAlexLichter]

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 🤔