0

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
M Fukazawa
  • 43
  • 1
  • 6
  • Did you ever solve this? I'm getting this error as well on `gridsome build`. I am using tailwindcss as well. – Stib Aug 07 '20 at 23:39
  • I remade the project and added packages one by one. I believe mine was failing on vue-parallax-js – M Fukazawa Aug 11 '20 at 05:04

1 Answers1

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>
Hermesis
  • 166
  • 7