TypeError: Cannot destructure property `createComponentInstance` of 'undefined' or 'null'.

[Edge00]

Version

3.0.0

Reproduction link

https://codepen.io/none

Steps to reproduce

1. install @vue/server/renderer
2. use code as packages/server-render/readme.md shows
3. start koa server
4. TypeError: Cannot destructure property createComponentInstance of 'undefined' or 'null'. showed in terminal.

What is expected?

ssr success

What is actually happening?

ssrUtils is null so can't read https://github.com/vuejs/vue-next/blob/5ae7380b4a9144c6a2873d0181a0f21a9a090018/packages/server-renderer/src/render.ts#L32 from none

[posva]

I tried the example on the readme and it doesn't throw an error. Please don't open issues without a reproduction

[thomasgauthier]

I came across this problem and realized it was because I was using Vue 2 instead of Vue 3.

npm install vue@^3.0.0 did the trick.

[thomasgauthier]

After hitting the problem again in a webpack environment I realized this export is the culprit.

The ssrUtils object in Vue 3 only gets exported in CommonJS builds. When the target isn't node, Webpack by default uses the esm file if defined in the module field of a package.json (which @vue/runtime-core does define). The fix was adding this line to my webpack config :

resolve: { mainFields: ['main', 'module'] }

[FossPrime]

@posva I had the same issue with this config on Ubuntu.. I just made a new project with the latest vue-cli... it's quite broken :/

I simply ran npm run test:unit to get the catastrophic failure error

please reopen

{
  "useTaobaoRegistry": false,
  "presets": {
    "foss": {
      "useConfigFiles": false,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-typescript": {
          "classComponent": false,
          "useTsWithBabel": true
        },
        "@vue/cli-plugin-pwa": {},
        "@vue/cli-plugin-router": {
          "historyMode": false
        },
        "@vue/cli-plugin-vuex": {},
        "@vue/cli-plugin-eslint": {
          "config": "standard",
          "lintOn": [
            "save"
          ]
        },
        "@vue/cli-plugin-unit-mocha": {},
        "@vue/cli-plugin-e2e-webdriverio": {
          "webdrivers": [
            "chrome",
            "firefox"
          ]
        }
      },
      "vueVersion": "3",
      "cssPreprocessor": "dart-sass"
    }
  }
}

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Xeon(R) CPU E5-1620 v3 @ 3.50GHz
  Binaries:
    Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
    Yarn: Not Found
    npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm
  Browsers:
    Chrome: 84.0.4147.135
    Firefox: 81.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-helper-vue-transform-on:  1.0.0-rc.2 
    @vue/babel-plugin-jsx:  1.0.0-rc.3 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.5.7 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.5.7 
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.7 
    @vue/cli-plugin-e2e-webdriverio: ~4.5.0 => 4.5.7 
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.7 
    @vue/cli-plugin-pwa: ~4.5.0 => 4.5.7 
    @vue/cli-plugin-router: ~4.5.0 => 4.5.7 
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.7 
    @vue/cli-plugin-unit-mocha: ~4.5.0 => 4.5.7 
    @vue/cli-plugin-vuex: ~4.5.0 => 4.5.7 
    @vue/cli-service: ~4.5.0 => 4.5.7 
    @vue/cli-shared-utils:  4.5.7 
    @vue/compiler-core:  3.0.0 
    @vue/compiler-dom:  3.0.0 
    @vue/compiler-sfc: ^3.0.0 => 3.0.0 
    @vue/compiler-ssr:  3.0.0 
    @vue/component-compiler-utils:  3.2.0 
    @vue/eslint-config-standard: ^5.1.2 => 5.1.2 
    @vue/eslint-config-typescript: ^5.0.2 => 5.1.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/reactivity:  3.0.0 
    @vue/runtime-core:  3.0.0 
    @vue/runtime-dom:  3.0.0 
    @vue/server-renderer: ^3.0.0 => 3.0.0 
    @vue/shared:  3.0.0 
    @vue/test-utils: ^2.0.0-0 => 2.0.0-beta.6 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^7.0.0-0 => 7.0.1 
    typescript: ~3.9.3 => 3.9.7 
    vue: ^3.0.0 => 3.0.0 
    vue-eslint-parser:  7.1.1 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.3 (16.0.0-beta.8)
    vue-router: ^4.0.0-0 => 4.0.0-beta.13 
    vue-style-loader:  4.1.2 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^4.0.0-0 => 4.0.0-beta.4 
  npmGlobalPackages:
    @vue/cli: 4.5.7

[FossPrime]

For the curious: The penalty in disabling treeshaking with @thomasgauthier 's workaround on a vanilla project is roughly 32KB of additional js in the vendor's chunk, one KB extra the app chunk. The more dependencies you have, the worse the workaround gets... specially with vuetify and lager projects that rely on trees hacking, this could be a deal breaker.

without the workaround:

  dist/js/chunk-vendors.c82f361d.js          116.27 KiB        41.76 KiB
  dist/js/app.bebed4a8.js                    7.79 KiB          2.66 KiB

With the workaround:

> learn-admin@0.1.0 build /home//git/tdps/learn-admin
 DONE  Compiled successfully in 7994ms                                  10:29:18 AM

  File                                       Size              Gzipped

  dist/js/chunk-vendors.cbcaf196.js          147.36 KiB        54.23 KiB
  dist/js/app.8df3054c.js                    8.14 KiB          2.75 KiB

Here is my vue.config.js for a totally vanilla install

[@starship testfoss] (master *)$ cat vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // mutate config for production...
    } else {
      return { resolve: { mainFields: ['main', 'module'] } }
    }
  }
}

[Vitaminaq]

我发现使用JSX语法后，它将使用createComponentInstance，然后将报告错误。有没有好的解决方案

[Vitaminaq]