search

shakee93 / vue-toasted

🖖 Responsive Touch Compatible Toast plugin for VueJS 2+
https://shakee93.github.io/vue-toasted/
MIT License
2.21k stars 194 forks source link

Fails to build on netlify due to window not defined #181

Closed rwlaschin closed 4 years ago

rwlaschin commented 4 years ago

< where's the template :( >

After installing "vue-toasted": "^1.1.28" and adding code as indicated. Builds fail on netlify due to the following error

12:51:18 PM: ReferenceError: window is not defined 12:51:18 PM: at Object. (node_modules/vue-toasted/dist/vue-toasted.min.js:1:52548) 12:51:18 PM: at e (node_modules/vue-toasted/dist/vue-toasted.min.js:1:333) 12:51:18 PM: at Object. (node_modules/vue-toasted/dist/vue-toasted.min.js:1:20230) 12:51:18 PM: at e (node_modules/vue-toasted/dist/vue-toasted.min.js:1:333) 12:51:18 PM: at Object. (node_modules/vue-toasted/dist/vue-toasted.min.js:1:2694) 12:51:18 PM: at e (node_modules/vue-toasted/dist/vue-toasted.min.js:1:333) 12:51:18 PM: at Object. (node_modules/vue-toasted/dist/vue-toasted.min.js:1:18976) 12:51:18 PM: at e (node_modules/vue-toasted/dist/vue-toasted.min.js:1:333) 12:51:18 PM: at assets/js/app.64df3221.js:24526:574 12:51:18 PM: at assets/js/app.64df3221.js:24526:583

I believe it is because there is a headless browser that is used to test the initial build and the library uses window/dom to create the toasts.

Package.json { "name": "gridsome-shopify-starter", "scripts": { "start": "gridsome develop", "build": "gridsome build", "develop": "gridsome develop", "explore": "gridsome explore" }, "dependencies": { "@gridsome/plugin-google-analytics": "^0.1.1", "@gridsome/plugin-sitemap": "^0.3.0", "apollo-boost": "^0.4.9", "axios": "^0.19.2", "currency.js": "^1.2.2", "graphql-tag": "^2.10.3", "gridsome": "^0.7.19", "gridsome-plugin-flexsearch": "^1.0.1", "gridsome-plugin-pwa": "^0.0.18", "gridsome-plugin-robots": "^0.2.1", "gridsome-plugin-tailwindcss": "^2.2.48", "gridsome-source-shopify": "^0.1.13", "isomorphic-fetch": "^2.2.1", "lodash": "^4.17.19", "tailwindcss": "^1.7.6", "vue-apollo": "^3.0.3", "vue-scrollto": "^2.18.1", "vue-toasted": "^1.1.28", "vuex": "^3.4.0" }, "devDependencies": { "eslint": "^7.8.1", "eslint-plugin-vue": "^6.2.2" } }

shakee93 commented 4 years ago

you should be excluding vue-toasted on server side. take a look at #11

rwlaschin commented 4 years ago

Thanks. I read there there are some tags I can put to exclude. You wouldn't mind adding that to your docs? ;)

shakee93 commented 4 years ago

Thanks man, will try to add it ;)