Gridsome 构建因 TypeError 而失败

问题描述

我在启动项目模板上运行 Gridsome 构建时遇到了一些问题.该站点在 localhost 上运行没有问题.我尝试了 npm install gridsome@latest 来更新或安装任何丢失的包.

I'm encountering some trouble running Gridsome build on a starter project template. The site runs on localhost with no problem. I tried npm install gridsome@latest to update or install any missing packages.

Gridsome 构建给了我以下错误:

Gridsome build gives me the following error:

    Could not generate HTML for "/work/":
    TypeError: Cannot read property 'console' of null
      at Object. (C:\Users\Micah\Desktop\my-gridsome-site\node_modules\vue-meta\dist\vue-meta.common.js:103:23)
      at Module._compile (internal/modules/cjs/loader.js:778:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
      at Module.load (internal/modules/cjs/loader.js:653:32)
      at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
      at Function.Module._load (internal/modules/cjs/loader.js:585:3)
      at Module.require (internal/modules/cjs/loader.js:692:17)
      at require (internal/modules/cjs/helpers.js:25:18)
      at C:\Users\Micah\Desktop\my-gridsome-site\node_modules\vue-server-renderer\build.prod.js:1:77671
      at Object. (webpack:/external "vue-meta":1:0)

vue-meta.common.js:103:23 处的代码读取了 var console = _global.console ||{}; 如下图:

The code at vue-meta.common.js:103:23 reads var console = _global.console || {}; as shown below:

var hasGlobalWindow = hasGlobalWindowFn();

var _global = hasGlobalWindow ? window : global;

var console = _global.console || {};
function warn(str) {
  /* istanbul ignore next */
  if (!console || !console.warn) {
    return;
  }

  console.warn(str);
}
var showWarningNotSupported = function showWarningNotSupported() {
  return warn('This vue app/component has no vue-meta configuration');
};

重现步骤

从命令行运行 gridsome 构建.

Run gridsome build from command line.

环境

System:
OS: Windows 10
CPU: (4) x64 Intel(R) Core(TM) i5-4210U CPU @ 1.70GHz
Binaries:
Node: 10.16.3 - C:\Program Files\nodejs\node.EXE
npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.18362.449.0
npmPackages:
gridsome: ^0.7.11 => 0.7.11
gridsome-plugin-tailwindcss: ^2.2.26 => 2.2.26

推荐答案

我认为问题仅在于构建，因为 您的组件缺乏 SSR(服务器端渲染).构建模式下没有窗口.尝试使用 <ClientOnly> 标签将您的组件包装在 vue 的 <template> 标签中，如下所示:

I think the problem is only in build because of lack of SSR (server side rendering) of your component. There is no window in build mode. Try to wrap your component inside vue's <template> tag with <ClientOnly> tag like this:

<template>
  <ClientOnly>
    <my-component />
  </ClientOnly>
</template>

这篇关于Gridsome 构建因 TypeError 而失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！