问题
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 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)
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');
};
Steps to reproduce
Run gridsome build from command line.
Environment
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
回答1:
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>
来源:https://stackoverflow.com/questions/59150207/gridsome-build-failing-with-typeerror