Nuxt3 build ERROR [commonjs--resolver]

[jojco]

Hi, I have problem during building process on Nuxt3. Can somebody help me?

my package.json

{
  "devDependencies": {
    "nuxt": "3.0.0-rc.11",
  },
  "dependencies": {
    "three": "^0.143.0",
    "troisjs": "^0.3.4"
  }
}

ℹ Client built in 16353ms                                                                                                                                                                                                12:01:06
ℹ Building server...                                                                                                                                                                                                     12:01:06

 ERROR  [commonjs--resolver] Unexpected keyword 'false'                                                                                                                                                                  12:01:13
file: /app/node_modules/troisjs/build/trois.module.js:629:13
627:       this.addListener("init", cb);
628:     },
629:     onMounted(cb) {
                  ^
630:       this.addListener("mounted", cb);
631:     },

 ERROR  Unexpected keyword 'false'                    

[arcyleung]

There is something strange happening in Rollup or one of the plugins, causing the source to become transformed into "false && onMounted(cb)"

More specifically this line in rollup.js throws the error, I am no expert but will try to dig further.

[andysay]

any updates?

[jojco]

In my case I had component in the parent component and I thought child component will inherit from it, but It looks like I was wrong. I take directly before in the one component (or .client postfix on component), after that everything works fine. My fault.

[arcyleung]

For my case, I resolved it by adding transpile: ['troisjs'] into my nuxt.config.ts build options as specified in this doc. I had forgotten it was a module!

[jojco]

For my case, I resolved it by adding transpile: ['troisjs'] into my nuxt.config.ts build options as specified in this doc. I had forgotten it was a module!

I already had set this before, but yes It can have same result if you don't have this settings.

[insyri]

In my case I had component in the parent component and I thought child component will inherit from it, but It looks like I was wrong. I take directly before in the one component (or .client postfix on component), after that everything works fine. My fault.

Could you expand on this? I'm having this issue as well and I'm having trouble following your comment here.

[jojco]

In my case I had component in the parent component and I thought child component will inherit from it, but It looks like I was wrong. I take directly before in the one component (or .client postfix on component), after that everything works fine. My fault.

Could you expand on this? I'm having this issue as well and I'm having trouble following your comment here.

I had Nuxt set on hybrid rendering ssr: true. And I had component in separate .vue file where was child component renderer.vue inside them I had troisjs component. This was wrong ,after I put directly inside renderer.vue before , everything works fine. (Remember you must have build: { transpile:['troijs'] } as well.)

[mateoKutnjak]

In my case I had component in the parent component and I thought child component will inherit from it, but It looks like I was wrong. I take directly before in the one component (or .client postfix on component), after that everything works fine. My fault.

Could you expand on this? I'm having this issue as well and I'm having trouble following your comment here.

I had Nuxt set on hybrid rendering ssr: true. And I had component in separate .vue file where was child component renderer.vue inside them I had troisjs component. This was wrong ,after I put directly inside renderer.vue before , everything works fine. (Remember you must have build: { transpile:['troijs'] } as well.)

So you put html tag inside .vue component file which used Trois.js renderer?

So I should NOT do something like

<ClientOnly>
   <ComponentWhichUsesTroisJSRenderer/>
</ClientOnly>

[insyri]

From what I'm seeing, no. You want everything troisjs related client side.

Sidenote, I switched to another website framework; I couldn't resolve this issue for about 3 weeks.

[mateoKutnjak]

Which one?

[insyri]

Not Nuxt and not Vue; I'm not using troisjs either.

[jojco]

In my case I had component in the parent component and I thought child component will inherit from it, but It looks like I was wrong. I take directly before in the one component (or .client postfix on component), after that everything works fine. My fault.

Could you expand on this? I'm having this issue as well and I'm having trouble following your comment here.

I had Nuxt set on hybrid rendering ssr: true. And I had component in separate .vue file where was child component renderer.vue inside them I had troisjs component. This was wrong ,after I put directly inside renderer.vue before , everything works fine. (Remember you must have build: { transpile:['troijs'] } as well.)

So you put html tag inside .vue component file which used Trois.js renderer?

So I should NOT do something like

<ClientOnly>
   <ComponentWhichUsesTroisJSRenderer/>
</ClientOnly>

Yes exactly. You should use something like

<ClientOnly>
  <Renderer>
    <Scene/>
    ...
  </Renderer>
</ClientOnly>

And remember as well transpile it.

Sorry for the late reply, I'm already building similar library from the scratch. Do you solve it ?

[cccccccccccccccccnrd]

Still having this issue -- any updates on this? I have ssr: false and transpile: ['troisjs', 'threejs'] set.

Nevermind, just resolved it by adding the .client suffix to the component containing troisjs.