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

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!

[suyingtao]

run:

$ yarn add vue-loader --dev

can solve.

https://github.com/vuejs/vue-loader/issues/1838

[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.