I'm a newbie, I've been trying since this morning to get some code in order to run Chalk in the console of Firefox, Chrome and so forth.
I've seen tons of videos about modules and Babels and I've read here a lot of discussion, but nothing is still happened.
Firstly I have installed Chalk with npm, checked package.json and everything was fine.
Then using Live server:
ES 5 syntax: I get "Require is not defined".
ES 6 syntax: "Uncaught SyntaxError: import declarations may only appear at top level of a module".
ES 6 syntax2: I have added in HTML file: <script src="./node_modules/chalk/index.d.ts" type="module"></script> and I obtain:
Loading module “http://127.0.0.1:5500/Getapper/node_modules/chalk/index.d.ts” was blocked because of a disallowed MIME type (“video/mp2t”).
Loading failed for the with source “http://127.0.0.1:5500/Getapper/node_modules/chalk/index.d.ts”.
"Uncaught SyntaxError: import declarations may only appear at top level of a module".
Babel: desperate, I have also tried to install and use Babel to convert the import code, but even in that way I failed (but I have learnt something new and useful).
Last but not least, I have tried to run Chalk without Live server, nothing again.
Notes:
I've tried both version 5 and version 4 of Chalk, but it's not still gonna work.
I added the line "type: modules" in package.json with syntax ES 6.
I changed "main" with "exports" as written here: chalk - Error [ERR_REQUIRE_ESM]: require() of ES Module
Node version and NPM version are the latest.
News:
With this line in HTML <script src="modules.js" type="/module"></script>
There is no more syntax error, but Chalk is still not working (the console.log lines are not getting read).
On modules.js the code is:
import chalk from 'chalk';
console.log(chalk.blue.italic("Chalk package is working"));
console.log(chalk.red.bold("Hello Chalk!"));
Only when I run Node on VSCode Chalk works fine.
Someone could help me please and explained what's happening?
I am quite discouraged, apparently it seemed a piece of cake -.-
The chalk docs says it is for terminal string styling which means this package works for server side node js applications and not in the browser.
Chalk is for terminals and runs on servers.
Browsers are not officially supported but they might add it in the future, see discussion on GitHub.
HOWEVER, somehow it DOES seem to work in GoogleChrome/Chromium/Edge with colors and styles. In other browsers like Firefox the log is displayed as just the text without the color styles so at least it doesn't show strange characters!.
Try creating a simple html file like this and test it yourself:
<!DOCTYPE html>
<html>
<script type="module">
import chalk from 'https://cdn.jsdelivr.net/npm/chalk#5.2.0/+esm'
console.log(chalk.blue('Hello world!'));
</script>
</html>
I want to implement DESO into my app. The most convenient way is probably the DESO library from their developer hub.
I want to be as precise as possible here. So first I downloaded the deso-protocol npm package. In the readme of this library is stated that it is generated with nx. So I downloaded that too. No big issues. And I should: Run nx build deso-protocol to build the library.(in readme). Than I get an error that there is no workspace, when I want to create one with "npx create-nx-workspace deso-protocol --preset=core" , nx gets stuck in that process.
So I decided to do it without the building(I don't quite now if that is needed, am new to npm) and just do it with the classic js imports.
The "import Deso from 'deso-protocol';" from the docs isn't working. Because the module imports have to start with "/" or "./" or sth. similar etc.
So I tried import Deso from './node_modules/deso-protocol/src/index.js';. That's not working. Error:
Uncaught SyntaxError: import not found: default
using import { Deso } from './node_modules/deso-protocol/src/index.js'; doesn't work either because then Deso isn't found. I don't quite now what to do now.
Edit
I use plain JavaScript. deso-protocol uses plain JavaScript too, I hope. There isn't much code yet:
Index.js file:
import Deso from './node_modules/deso-protocol/src/index.js';
test.html file:
<script type="module" src="index.js"></script>
That's it. I use http.server from Python to host the local server.
Just install deso-protocol library from https://www.npmjs.com/package/deso-protocol with npm i deso-protocol
In your app import it as usual
import Deso from "deso-protocol";
And initialize
const deso = new Deso();
Readme file is really confusing, I have no idea what
Run nx build deso-protocol to build the library.
is supposed to mean, it works without that no problem.
https://v3.vuejs.org/guide/installation.html#download-and-self-host
https://v3.vuejs.org/guide/installation.html#from-cdn-or-without-a-bundler
how do I import vue without CDN?
so what I care about is not having a build step. everything in pure human-legible js.
I found this https://github.com/maoberlehner/goodbye-webpack-building-vue-applications-without-webpack
I'm going to try and implement it inside unity Embedded browser https://assetstore.unity.com/packages/tools/gui/embedded-browser-55459
the challenge is that my interface cannot load things from the web and it can't be compiled.
Create index.html
index.html (using Vue 3 - important!)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Minimalistic Vue JS</title>
<script type="text/javascript" src="./vue.global.prod.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script>
var app = Vue.createApp({
data() {
return {
message: "Hello world"
}
}
})
app.mount("#app")
</script>
</html>
Download vue.global.prod.js from https://unpkg.com/browse/vue#3.0.11/dist/vue.global.prod.js and save it along index.html
Open index.html in browser
Works just fine in Chrome or Firefox.
Notes
for the record my code is the repo I linked plus the vue libraries I downloaded and added in the root
Note: following is related to the repo linked before question was changed
The code in repo is written for Vue 2 (just try to open https://unpkg.com/vue in the browser). So if you downloaded distros for Vue 3 (for example the link I'm using above) the code from repo will not work
Even if you download Vue 2 version, the code in the repo will not work when opened from file system as it is using native ES6 modules - problem I described in the previous version of my answer:
As described here and here ES6 modules are always loaded with CORS. So just opening the index.html in the browser (without using server) will not work (definitely does not work in Chrome). Maybe Unity Embeded Browser has this restrictions weakened (as it's purpose is to be embeded) but without possibility to use desktop browser to develop and test your app, your experience will be terrible. I would reconsider the decision not to use bundler...
Update 1
Building Vue.js Applications Without webpack (sample project) will not help you either as it is again using native ES6 modules
To use Vue as a module from a local installation, you don't want to explicitly include it in a script tag in your page. Instead, import it in the scripts that use it. The whole idea of modules is that you can import them which makes explicitly including them in your page obsolete.
In https://bitbucket.org/letsdebugit/minimalistic-vue/src/master/index.js, import Vue:
import * as Vue from "./local/path/to/vue.esm-browser.prod.js";
Vue Devtools works on all demos/examples online but not on my local pages. Even with the following, the Vue Devtools icon remains gray ("Vue.js not detected"). Why?
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app"></div>
<script>
Vue.config.devtools = true;
</script>
</body>
</html>
The Vue source you are using there looks to be minimized / production build to me. You need to use the non minimized / non-production build. Try https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js instead.
Also if you are working with local files i.e. accessing a page like file://... then "you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel." see https://github.com/vuejs/vue-devtools
You must add at-least 1 instance of vue, for the devtools to detect it. So, do:
new Vue({el: '#app'})
You can try to refresh the browser first.
If didn't work, make sure that if you're compiling CSS and JavaScript to have have development compilation for both not a compilation for production with minified files
If at least one file is minified for prod, devtools will not show up
I have the following code with a simple working Vue.js application. But the vue.js devtools is not responding. It was working well a few days ago, now it's not working anymore what could possibly be going wrong? when I go to https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd, it says it is already added.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue#2.1.6/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div id="application">
<input type="text" v-model="message">
<p>The value of the input is: {{ message }}</p>
</div>
</div>
<script>
let data = {
message: 'Hello World'
}
new Vue({
el: '#application',
data: data
})
</script>
</body>
</html>
One alternative is to set up a local web server, as the OP already stated.
The other - which IMHO is faster and less harassing - is letting the extension have access to file URLs, which is disabled by default.
Simply go to chrome://extensions and leave the "Allow access to file URLs" box checked for Vue.js devtools.
Sources:
https://github.com/vuejs/vue-devtools#common-problems-and-how-to-fix
I tried all of the ways presented in answers here, but none of them worked for me (neither for chrome nor for firefox).
Finally I found an answer: If you still have this problem, you can try to uninstall the current version of Vue extension and install beta version: https://v3-migration.vuejs.org/breaking-changes/introduction.html#devtools-extension
Remember to restart your browser afterwards.
UPDATE: 2021 May 30,
If you are using Vue 3, old dev tools versions won't work, so just use the new beta version.
https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
To solve this, simply go to chrome://extensions/, scroll down to the Vue.js devtools and enable the "Allow Access to file URLs" by clicking on its checkbox.
Source: https://github.com/vuejs/vue-devtools/issues/236
Had the same issue and solved it by adding
Vue.config.devtools = true;
after Vue.js import script, then take look at chrome devtools. You will see a tab called Vue to inspect your vue instance.
reference: https://v2.vuejs.org/v2/api/#devtools
I found out the answer, I was viewing a plain html file on my computer which was making the vue.js tool not load. I loaded up my local xampp server and ran the application from the local machine server url again and now vue.js devtools is working! :)
Also you can disable with Vue config:
https://v2.vuejs.org/v2/api/#devtools
in the extensions folder in chrome browser, under the details tab in vue devtools extension, check the box having allow access to file URLs,
this worked for me..
If you're using Vue 3 and experiencing this issue, try installing the beta version of the Vue Devtools. It may help until the stable version gets the major refactor.
I had the same issue & solved it by:
Installing this extension Vue Dev Tools Beta Chrome Extention
Reloading the chrome browser.
i had this problem, and i was expecting the vue-devtools to work by just including it. i had it console log the version
console.log("Vue Version " +Vue.version );
but this didnt work to actually load an instance of vue.
took me a few minutes, but once i actually created a vue instance, then it worked. this was the hello world example that made the devtools work :)
let data = {
message: 'Hello World'
}
new Vue({
el: '#application',
data: data
})
I solved the same problem.
But in my case Vue.js Chrome Devtools didn't detect Vue.js because in html file was <script src="https://unpkg.com/vue"/>
I replaced it to <script src="https://unpkg.com/vue"></script>
Now Chrome Devtools is detecting Vue.js perfectly.
Thanks for exapmle above.I use vue#2.4.4 and open my html by file://
In the case of Firefox, install the beta version of vue-devtools, which supports Vue 3.
If you have already turned on Allow Access to file URLs in chrome://extensions/ -> Vue Devtools and it still does not work, try reinstall the Vue Devtools, might work for you.
check if vuejs app is not embedded in an iframe such as in a storybook app.
the hack in such a case is to work outside the parent frame working directly on the url of your iframe and the vue devtools should work fine.
I'm using Vue in electron and I have the electron main "app" separated Vue's "app".
When in the the debugger console, typing Vue was giving the error Uncaught ReferenceError: Vue is not defined
Here was my fix
window.vue = new Vue({
components: {
App,
Login,
},
router,
store,
template: '<App/>',
}).$mount('#app');
The work-around was assigning window.Vue so the devtool could find it.
The same problem here, and I've solved it.
If you are developing in the localhost environment and using Chrome Dev Tools then you need to give permission for the Vue.js extension to access the local files on your computer.
Config your Vue.js tool in Chrome extensions
Search for "Vue.js devtools"
Click on details
Check the "Allow access to file URLs" checkbox
In my case I just had compiled for production npm run prod - which was the issue. As I ran in dev npm run dev, it started recognizing Vue.