TypeError: Cannot read property 'preference' of undefined #78
Comments
|
Actually you need to serve all the files, not only app.js. A script is injected in the header. What is the purpose of your extension? |
|
@Atinux I serve a single
|
|
You can see the app in the project I shared with you. The app is inside the |
|
The extension is to work with salesforce data while coding. Now Im launching a webapp built with nuxt that is also connected to vscode to enable "window mode" using PWA |
|
Here is the app running without any problem from vscode when removing this module.
|
|
What HTML file to you serve actually? The one generated in dist/ ? |
Yes. But I serve it in memory instead of reading from the file. I just copied the html nuxt generated, added a proces.env to set the app.js version from the cdn. The rest is the same. this.panel.webview.html = this.prepareView(`<!doctype html><html lang="en" data-n-head="%7B%22lang%22:%7B%221%22:%22en%22%7D%7D"> <head> <title>salesforce-query-editor</title> <meta data-n-head="1" charset="utf-8"> <meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"> <meta data-n-head="1" data-hid="description" name="description" content=""> <meta data-n-head="1" data-hid="charset" charset="utf-8"> <meta data-n-head="1" data-hid="mobile-web-app-capable" name="mobile-web-app-capable" content="yes"> <meta data-n-head="1" data-hid="apple-mobile-web-app-title" name="apple-mobile-web-app-title" content="Salesforce Query Editor"> <meta data-n-head="1" data-hid="theme-color" name="theme-color" content="#ffffff"> <meta data-n-head="1" data-hid="og:type" name="og:type" property="og:type" content="website"> <meta data-n-head="1" data-hid="og:title" name="og:title" property="og:title" content="Salesforce Query Editor"> <meta data-n-head="1" data-hid="og:site_name" name="og:site_name" property="og:site_name" content="Salesforce Query Editor"> <meta data-n-head="1" data-hid="og:description" name="og:description" property="og:description" content="This Web App helps Salesforce Developers to write Queries."> <link data-n-head="1" data-hid="shortcut-icon" rel="shortcut icon" href="/_nuxt/icons/icon_64x64.72c43d.png"> <link data-n-head="1" data-hid="apple-touch-icon" rel="apple-touch-icon" href="/_nuxt/icons/icon_512x512.72c43d.png" sizes="512x512"> <link data-n-head="1" rel="manifest" href="/_nuxt/manifest.dce3af21.json" data-hid="manifest"> <script data-n-head="1" src="https://js.stripe.com/v3/" crossorigin="anonymous"></script> <script data-n-head="1" data-hid="adsbygoogle-script" async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script data-n-head="1" data-hid="adsbygoogle">window.__abg_called||((window.adsbygoogle=window.adsbygoogle||[]).push({google_ad_client:"ca-pub-2402391224743305",enable_page_level_ads:!1,overlays:{bottom:!1}}),window.__abg_called=!0)</script> <script src="https://cdn.jsdelivr.net/npm/${process.env.PACKAGE_NAME}/dist/_nuxt/app.js"></script></head> <body> <div id="__nuxt"><style>#nuxt-loading{background:#fff;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #000;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{}}</script> </body></html>`, htmlPath);
|
|
Ohhhhh maybe after adding the colors-module, nuxt generates another html file with a script for configuring the color. And because I did not update my html, im seeing this exception. I will verify this again. One moment. |
|
Yes, that was the reason. After adding the module, nuxt generates another html with this script. Sorry for that <script data-n-head="1" data-hid="nuxt-color-mode-script" data-pbody="true">!function(){"use strict";var e=window,s=document,o=s.documentElement,a=["dark","light"],t=window.localStorage.getItem("nuxt-color-mode")||"system",c="system"===t?l():t,i=s.body.getAttribute("data-color-mode-forced");function r(e){var s=""+e+"-mode";o.classList?o.classList.add(s):o.className+=" "+s}function n(s){return e.matchMedia("(prefers-color-scheme"+s+")")}function l(){if(e.matchMedia&&"not all"!==n("").media)for(var s of a)if(n(":"+s).matches)return s;return"light"}i&&(c=i),r(c),e["__NUXT_COLOR_MODE__"]={preference:t,value:c,getColorScheme:l,addClass:r,removeClass:function(e){var s=""+e+"-mode";o.classList?o.classList.remove(s):o.className=o.className.replace(new RegExp(s,"g"),"")}}}();
</script> |
|
No worries! Please ping me when your extension is out with Nuxt under the hood 🙌 |
|
@Atinux I've launched the extension https://marketplace.visualstudio.com/items?itemName=allanoricil.salesforce-soql-editor |
|
Any chance to share with me the source code, I am curious to see how it works :) |
|
@Atinux I'm selling the code. I'm leaving my job at the moment because I'm not enjoying and I will need money. So I launched it hoping people would buy licenses or buy the source code. |
Version
@nuxtjs/color-mode: 2.0.5
nuxt: 2.14.12
Reproduction Link
I shared the repo privately with @Atinux
Steps to reproduce
Im serving the app as a vscode extension. It would be hard to me to isolate the problem and explain to you the steps. Could we have a meeting and I can show it to you?
What is Expected?
When loading app.js from CDN it should not throw this error
What is actually happening?
The
app.jsrun without any problem when usingnuxt startandssr = falsewhen serving locally. When theapp.jsis loaded from CDN, this exception happens.Another thing, from vscode when I serve the app I don't use
nuxt start. I just pass a html and that is it. Could it be related to the problem?The text was updated successfully, but these errors were encountered: