<script setup> not working on root component in production build

[raukaute]

Version

4.5.11

Environment info

System:
    OS: Windows 10 10.0.19041
    CPU: (4) x64 Intel(R) Core(TM) i5-6600K CPU @ 3.50GHz
  Binaries:
    Node: 15.7.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 7.4.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.423.0), Chromium (88.0.705.68)
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Create new project with vue create testing (select vue3)

In App.vue change <script></script> block to

<script setup>
/* eslint-disable */
import HelloWorld from "./components/HelloWorld.vue";
</script>

works:
Run: npm run serve -> Everything works as expected;

does not work:
Run: npm run build
Serve dist directory (e.g. http-server) -> nothing gets rendered

What is expected?

Render App

What is actually happening?

App does not get rendered

---

I somehow have the feeling, that this was working before. This is only happening on the root App component.
When I look the imported object, I don't see any render function.

Cheers!

[iamxyj]

me too
when i use <script setup> and defineProps
run serve no problem
run build the component who use script setup render empty

[zizyzhang]

一样的问题

[gzzhanghao]

Set parallel: false works for me:

// vue.config.js
module.exports = {
  parallel: false
}

It seems like thread-loader didn't pass mode: 'production' to loader context (code).

That makes isProd check failed in resolveScript, which cause inconsistency between select loader and index loader.

[mitow7821]

Downgrade from 3.0.11 to vue 3.0.0 and adding code above solved problem in my case.

[anmilleriii]

I have also encountered this issue, but not just for the root component (with all SFCs).

I have not traced the cause, but a (verbose) workaround that has worked for me is to append a manual export of the setup() method to SFCs which use the <script setup> syntax.

In each SFC, append the following after the <script setup> block:

// Component.vue
<script setup>
 ...
</script>

<script>
export default {
    setup() {
        return
    }
}
</script>

Using Vue 3.1.1:

// package.json
{
"vue": "3.1.1",
"@vue/compiler-sfc": "3.1.1"
}

I had actually noted that serving the production dist directory (vue-cli-service serve --mode production) intermittently worked with no change in config/code. I was not yet able to determine why this was the case.

[bodograumann]

Just got stuck on this issue for hours, trying to reproduce it locally, where I usually only do development builds. I guess that is what you get for using experimental features 😞

The reason, it is so hard to pin-point, is that after a local development build the node_modules/.cache is primed with correct compilation results. Then in the production build, some of these are reused and yield a correct build. Only when you delete the cache (or run npm ci) and directly start the production build, will you get the error locally.

[bodograumann]

@XHalso: Your question seems offtopic. My guess would be, that the ref is only available after the component was mounted, not during setup(). If you have further question please come join us in discord!

[suyingtao]

run:

$ yarn add vue-loader --dev

can solve.

vuejs/vue-loader#1838

[talrasha007]

run:

$ yarn add vue-loader --dev

can solve.

vuejs/vue-loader#1838

this works for me.

[haoqunjiang]

I think this issue is fixed since vue-loader@16.3.0 if it's indeed caused by the thread-loader bug mentioned above.