Cannot set properties of undefined (setting'render').

[maomincoding]

Hello, I encountered a problem when using Vue-cli to package into the production environment: Cannot set properties of undefined (setting'render').

The following are my few file configurations:

package.json

{
  "name": "vue-cli",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-tsc --noEmit && vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@vue/composition-api": "^1.2.4",
    "core-js": "^3.16.4",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.13",
    "@vue/cli-plugin-typescript": "^4.5.13",
    "@vue/cli-service": "^4.5.13",
    "typescript": "^4.4.2",
    "unplugin-vue2-script-setup": "workspace:*",
    "vue-template-compiler": "^2.6.14",
    "vue-tsc": "^0.3.0"
  }
}

vue.config.js

/* eslint-disable @typescript-eslint/no-var-requires */

const ScriptSetup = require('unplugin-vue2-script-setup/webpack')

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  configureWebpack: {
    plugins: [
      ScriptSetup({
        refTransform: true,
      }),
    ],
  },
  chainWebpack(config) {
    // disable type check and let `vue-tsc` handles it
    config.plugins.delete('fork-ts-checker')

    // disable cache for testing, you should remove this in production
    config.module.rule('vue').uses.delete('cache-loader')
    config.module.rule('js').uses.delete('cache-loader')
    config.module.rule('ts').uses.delete('cache-loader')
    config.module.rule('tsx').uses.delete('cache-loader')
  },
}

[antfu]

Can you share a minimal reproduction? Thanks.

[maomincoding]

Can you share a minimal reproduction? Thanks.

ok!

[maomincoding]

I directly clone the project, packaged in the vue-cli directory.

Then, I put the files in the dist directory on the server, and the following error occurred.

[maomincoding]

Except for the changes to vue.config.js I mentioned above, nothing else has changed. If there is no problem in the development environment, this error will be reported in the production environment.

[maomincoding]

I installed this version：unplugin-vue2-script-setup@0.6.11

[maomincoding]

You can package it in the Vue-cli directory and put it in the production environment.

[maomincoding]

I don't know why.

[brynedwards]

Hi, I also have this issue. It also happens when I try to build the vue-cli example.

First, I change ScriptSetup in vue.config.js:

- const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default
+ const ScriptSetup = require('unplugin-vue2-script-setup/webpack')

Then run npm run build and I see the same error as in the above screenshot of browser console.

I also see this warning in shell output:

 WARNING  Compiled with 1 warning                                                               17:58:06

 warning  in ./src/App.vue?vue&type=script&lang=ts&

"export 'default' (imported as 'mod') was not found in '-!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/ts-loader/index.js??ref--13-2!../node_modules/vue-loader/lib/index.js??vue-loader-options!../node_modules/unplugin/dist/webpack/loaders/transform.js??ref--34-0!./App.vue?vue&type=script&lang=ts&'

NODE_ENV=development npm run build does not print the above warning, and works fine, no error in console.

I have tried NodeJS version v14.18.0 and v16.12.0 and I get the same error.

[maomincoding]

I'm the same as your probleml, and it hasn't been solved so far.

[antfu]

We temporarily close this due to the lack of enough information. Please provide a minimal reproduction to reopen the issue. Thanks.

[maomincoding]

Thanks.

[maomincoding]

@antfu
First of all, I am really sorry for not providing a detailed example.

The following is my system information：

• System:
  OS: Windows 10 10.0.19041
  CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
  Memory: 6.84 GB / 15.84 GB
• Binaries:
  Node: 14.15.0 - C:\Program Files\nodejs\node.EXE
  Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
  npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
• Browsers:
  Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.40)
  Internet Explorer: 11.0.19041.1202

---

I have provided a link to the project, hoping to find the problem.

https://github.com/maomincoding/vue2-cli-script-setup

---

I found the problem like this:

1. First I run the command

yarn

2. Startup project

yarn dev

There is no problem in the development environment.

3. Deploy to production environment

yarn build

At this time, I found this error in the production environment.

---

The above is the problem I encountered, thanks.