Vuetify 2.4.2 breaks Gridsome 0.7.23 build

Question

I'm encountering some trouble building Gridsome with Vuetify.

According to https://gridsome.org/docs/assets-css/#vuetify, in order to use Vuetify with Gridsome you need to install vuetify and webpack-node-externals and modify

//main.js

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import DefaultLayout from '~/layouts/Default.vue'

export default function (Vue, { appOptions, head }) {
  head.link.push({
    rel: 'stylesheet',
    href: 'https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css',
  })
  
  head.link.push({
    rel: 'stylesheet',
    href: 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900',
  });
  
  const opts = {} //opts includes, vuetify themes, icons, etc.
  Vue.use(Vuetify)
  
  appOptions.vuetify = new Vuetify(opts);
  
  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout)
}

and gridsome.server.js

const nodeExternals = require('webpack-node-externals')

module.exports = function (api) {
  api.chainWebpack((config, { isServer }) => {
    if (isServer) {
      config.externals([
        nodeExternals({
          allowlist: [/^vuetify/]
        })
      ])
    }
  })

  api.loadSource(store => {
    // Use the Data store API here: https://gridsome.org/docs/data-store-api
  })
}

Gridsome build failed after gridsome.server.js is modified, and this is the error

PS E:\Dev\Projects\gridsome-vuetify-test> gridsome build
Gridsome v0.7.23

Initializing plugins...
Load sources - 0s
Create GraphQL schema - 0.03s
Create pages and templates - 0.03s
Generate temporary code - 0.04s
Bootstrap finish - 1.29s
Compile assets - 6.72s
Execute GraphQL (3 queries) - 0.01s
Could not generate HTML for "/about/":
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: E:\Dev\Projects\gridsome-vuetify-test\node_modules\@babel\runtime\helpers\esm\unsupportedIterableToArray.js
require() of ES modules is not supported.
require() of E:\Dev\Projects\gridsome-vuetify-test\node_modules\@babel\runtime\helpers\esm\unsupportedIterableToArray.js from E:\Dev\Projects\gridsome-vuetify-test\node_modules\vue-server-renderer\build.prod.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename unsupportedIterableToArray.js to end in .cjs, change the requiring 
code to use import(), or remove "type": "module" from E:\Dev\Projects\gridsome-vuetify-test\node_modules\@babel\runtime\helpers\esm\package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at E:\Dev\Projects\gridsome-vuetify-test\node_modules\vue-server-renderer\build.prod.js:1:77645
    at Object.YbeR (webpack:/external "@babel/runtime/helpers/esm/unsupportedIterableToArray":1:0)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Module.O/VM (assets/js/app.46242f68.js:1744:35)
    at __webpack_require__ (webpack/bootstrap:25:0)

Everything ran perfectly until I modified gridsome.server.js, I tried to look around but yet to find anything.

Vuetify 2.4.2 breaks Gridsome 0.7.23 build

0 Answers0