How to fix Module build failed: ReferenceError: document is not defined on vue-material and webpack?

Question

Node.js

Good afternoon everyone!

[email protected]:/var/php/www/TC.develop/template/test5$ yarn run dev
yarn run v1.9.2
$ encore dev
Running webpack ...

 ERROR  Failed to compile with 2 errors                                                                                                                                                           20:17:32

 error  in ./assets/js/client.js

Module build failed: ReferenceError: document is not defined
    at Vue.themeTarget (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:1929:9)
    at Watcher.get (/var/php/www/TC.develop/template/test5/node_modules/vue/dist/vue.runtime.common.js:3140:25)
    at Watcher.evaluate (/var/php/www/TC.develop/template/test5/node_modules/vue/dist/vue.runtime.common.js:3247:21)
    at Vue.computedGetter [as themeTarget] (/var/php/www/TC.develop/template/test5/node_modules/vue/dist/vue.runtime.common.js:3505:17)
    at Vue.handler (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:1943:32)
    at Vue.$watch (/var/php/www/TC.develop/template/test5/node_modules/vue/dist/vue.runtime.common.js:3611:10)
    at createWatcher (/var/php/www/TC.develop/template/test5/node_modules/vue/dist/vue.runtime.common.js:3569:13)
    at initWatch (/var/php/www/TC.develop/template/test5/node_modules/vue/dist/vue.runtime.common.js:3551:7)
    at initState (/var/php/www/TC.develop/template/test5/node_modules/vue/dist/vue.runtime.common.js:3315:5)
    at Vue._init (/var/php/www/TC.develop/template/test5/node_modules/vue/dist/vue.runtime.common.js:4626:5)
    at new Vue (/var/php/www/TC.develop/template/test5/node_modules/vue/dist/vue.runtime.common.js:4727:8)
    at Object.defineProperty.value (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:1917:19)
    at __webpack_require__ (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:35:30)
    at Object.defineProperty.value (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:252:16)
    at __webpack_require__ (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:35:30)
    at Object.defineProperty.value (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:13575:17)
    at __webpack_require__ (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:35:30)
    at module.exports.rawScriptExports (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:78:18)
    at /var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:81:10
    at webpackUniversalModuleDefinition (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:8:20)
    at Object.<anonymous> (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:15:3)
    at Module._compile (internal/modules/cjs/loader.js:654:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
    at Module.load (internal/modules/cjs/loader.js:566:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
    at Function.Module._load (internal/modules/cjs/loader.js:498:3)
    at Module.require (internal/modules/cjs/loader.js:598:17)
    at require (internal/modules/cjs/helpers.js:11:18)
    at /var/php/www/TC.develop/template/test5/node_modules/babel-core/lib/transformation/file/options/option-manager.js:178:20
    at Array.map (<anonymous>)

 error  in ./assets/js/server.js

Module build failed: ReferenceError: document is not defined
    at Vue.themeTarget (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:1929:9)
    at Watcher.get (/var/php/www/TC.develop/template/test5/node_modules/vue/dist/vue.runtime.common.js:3140:25)
    at Watcher.evaluate (/var/php/www/TC.develop/template/test5/node_modules/vue/dist/vue.runtime.common.js:3247:21)
    at Vue.computedGetter [as themeTarget] (/var/php/www/TC.develop/template/test5/node_modules/vue/dist/vue.runtime.common.js:3505:17)
    at Vue.handler (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:1943:32)
    at Vue.$watch (/var/php/www/TC.develop/template/test5/node_modules/vue/dist/vue.runtime.common.js:3611:10)
    at createWatcher (/var/php/www/TC.develop/template/test5/node_modules/vue/dist/vue.runtime.common.js:3569:13)
    at initWatch (/var/php/www/TC.develop/template/test5/node_modules/vue/dist/vue.runtime.common.js:3551:7)
    at initState (/var/php/www/TC.develop/template/test5/node_modules/vue/dist/vue.runtime.common.js:3315:5)
    at Vue._init (/var/php/www/TC.develop/template/test5/node_modules/vue/dist/vue.runtime.common.js:4626:5)
    at new Vue (/var/php/www/TC.develop/template/test5/node_modules/vue/dist/vue.runtime.common.js:4727:8)
    at Object.defineProperty.value (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:1917:19)
    at __webpack_require__ (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:35:30)
    at Object.defineProperty.value (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:252:16)
    at __webpack_require__ (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:35:30)
    at Object.defineProperty.value (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:13575:17)
    at __webpack_require__ (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:35:30)
    at module.exports.rawScriptExports (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:78:18)
    at /var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:81:10
    at webpackUniversalModuleDefinition (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:8:20)
    at Object.<anonymous> (/var/php/www/TC.develop/template/test5/node_modules/vue-material/dist/vue-material.js:15:3)
    at Module._compile (internal/modules/cjs/loader.js:654:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
    at Module.load (internal/modules/cjs/loader.js:566:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
    at Function.Module._load (internal/modules/cjs/loader.js:498:3)
    at Module.require (internal/modules/cjs/loader.js:598:17)
    at require (internal/modules/cjs/helpers.js:11:18)
    at /var/php/www/TC.develop/template/test5/node_modules/babel-core/lib/transformation/file/options/option-manager.js:178:20
    at Array.map (<anonymous>)

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

webpack.config.js

var Encore = require('@symfony/webpack-encore');

Encore
    // the project directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // the public path used by the web server to access the previous directory
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())

    // create hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    .enableVueLoader()
    .enableSassLoader()
    .addEntry('js/client', './assets/js/client.js')
    .addEntry('js/server', './assets/js/server.js')

    .configureBabel(function(babelConfig) {
        babelConfig.plugins = ["transform-object-rest-spread", 'vue-material']
    })
;

module.exports = Encore.getWebpackConfig();

package.json

{
  "name": "test5",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@symfony/webpack-encore": "^0.12.0",
    "axios": "^0.17.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.0.3",
    "vue": "^2.5.9",
    "vue-loader": "^13.5.0",
    "vue-router": "^3.0.1",
    "vue-server-renderer": "^2.5.9",
    "vue-template-compiler": "^2.5.9",
    "vuex": "^3.0.1",
    "vue-material": "^1.0.0-beta-10.2"
  },
  "private": true,
  "scripts": {
    "dev-server": "encore dev-server",
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production"
  },
  "dependencies": {


  }
}

Answer 1

if you have ssr, then they have a bug there, there is a solution in the issue https://github.com/vuematerial/vue-material/issues/243