Definitions in <script setup> works with options API in dev build but not in production

[Aniruddh-J]

Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9kE1ugzAQha8y9YZECljdUpKqu96gG28oDIHIfxobWgn57h0giaJW6sb2m+f59GZm8eZ9MY0oSlGFhgYfIWAc/UnZwXhHEWYg7CBBR85Axl8zZZVtnA0RTDjDcfF32Ttq7eDDkW6fsr2yldxwDGIR0XhdR2QFUPXPp3lem1OqJKu1Olg/Rphy41rURyXYV4KtSj50s7xzAfB7jdhiV4+aoy41AONGG7Hd7W8FgNgPodjSbklfs5fNS8vFxz2vOIht8tzUvrgEZ3k3K0hdjaBEeUMrwRtZtBJ9jD6UUoauWTZ6CYWjs+RXQZxnMFhgMPknua+AxGAlDg8MycUJKSe0LRLSf8xfX/9wryMlkX4Ach+j6Q==

Steps to reproduce

Use <script setup> and options API both, and the production build will ignore whatever is defined in <script setup>.

What is expected?

If the dev build supports both APIs working simultaneously without any warning, the production builds should also support it.

What is actually happening?

Options API in production build doesn't recognize whatever is defined in <script setup>.

System Info

No response

Any additional comments?

One can switch the mode in the provided SFC playground and see the difference.

[Aniruddh-J]

Probably related to #6242

[LinusBorg]

or more closely, #6241

None of these use case were intended for <script setup> so there's likely a couple of variations of this same basic problem to be found.

[Aniruddh-J]

Any update on this? We have a huge project that utilizes both Options API and Composition API. If a solution is likely not to be available in the foreseeable future, then maybe anyone here could help with how to disable dev-tools from the dev build?

[LinusBorg]

We have a huge project that utilizes both Options API and Composition API.

Are you saying that you have build lots of components with the above pattern and haven't tested a prod build until now?

If a solution is likely not to be available in the foreseeable future

It might be a few more days or a week or two. We also need to discuss how we want to approach this issue generally as I need to stress again, this use case was not really intended for script-setup. From the intended use described in the RFC, this should not work in dev either, and so we are hesitant to now support it.

maybe anyone here could help with how to disable dev-tools from the dev build?

There's no way to do that, really.

You can make the compiler compile more like in dev if you are using Vite, though it's a hack and I can't say I recommend it:

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      // @ts-ignore
      devServer:
        process.env.NODE_ENV === 'production'
          ? {
              config: {
                base: '/',
                server: {
                  hmr: false,
                },
              },
            }
          : undefined,
    }),
  ],
  // ....

When there's a devServer option, Vite will not inline the render function for production. The additional options are there because if that option exists, the compiler will read these two properties during compilation.

Warning This is a hack, I haven't tested it thoroughly. There is no guarantee this will continue to work in future releases.

Do with this what you think is best for your situation.

[Aniruddh-J]

Are you saying that you have build lots of components with the above pattern and haven't tested a prod build until now?

Yes, it's an incoming project, so we didn't have control over it before the previous dev handed it over to us. So when we ran the production build, it failed.

Thanks for the snippet. Unfortunately, the project uses Laravel Mix.

[Aniruddh-J]

Sorry to bug you guys.

Any news on this?

[LinusBorg]

No. As I'm worried you are waiting for a solution that will never arrive, let me specify how we see this situation:

• the dev behavior is unintended and needs to be fixed.
• the prod behavior is correct

So in case you are waiting for a fix that will make your above code work, I'm sorry to disappoint you. You will need to fix the code on your end, i.e. by converting the script-setup block into a normal setup() function. If you need support on how to approach this, feel free to ask in a discussion thread or on discord.

[Aniruddh-J]

I am not waiting for the above code to work in production, as we have already moved the existing codebase to composition API.

I am waiting for a fix for potential app-breaking differences between the dev and production build.

If this behavior is unintended, then either documentation should cover it:

https://vuejs.org/api/sfc-script-setup.html

Or the dev build should break, just like the production build.

[LinusBorg]

Yes, we intend to fix this in dev, we just haven't gotten around to it.

[ChachaZhou]

I have the same issue, when I updated Vite to v3.3.2 and @vue/compiler-sfc to v3.2.41, it shows error like this:
Error: [@vue/compiler-sfc] <script setup> cannot contain ES module exports. If you are using a previous version of <script setup>, please consult the updated RFC at https://github.com/vuejs/rfcs/pull/227.