I just started getting this error today, and it broke my whole site (because like a fool I'm loading Vuetify on page load).
Does anyone know what this means or how to fix it? Googling around didn't reveal anything helpful.
Edit:
To anyone who finds this because their site is also broken, it may be because of where you were loading vuetify.min.css from. For me I was getting at page load like so:
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
And solved the problem by importing it from the installed package instead with
import 'vuetify/dist/vuetify.min.css'
in app.js.
I'm still interested in learning about this v-ripple business, though.
I got into the same problem and I solved by installing
material-design-icons-iconfont
Run the following command to install:
npm install material-design-icons-iconfont
or, if you are running from yarn then:
yarn add material-design-icons-iconfont
Now import in main.js file:
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
You can read the vuetify documentation for more information:
Vuetify Documentation
I ran into this same issue today and started going down the route of importing it as suggested above when I noticed the header:
#charset "UTF-8";
/*!
* Vuetify v2.0.0-alpha.14
* Forged by John Leider
* Released under the MIT License.
It looks like they bumped the dist version (I'm working with 1.5.12). I updated my link href to:
https://cdn.jsdelivr.net/npm/vuetify#1.5.12/dist/vuetify.min.css
...and my site was put back together again. It's probably better practice to bring it in as a module but that'll be something for the backlog. Hope this helps somebody.
For me, the problem was I had both tslint and eslint installed. After I disabled eslint, it worked.
Related
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 make a vue project using this documentation: https://vuejs.org/guide/quick-start.html#creating-a-vue-application
And I wanted to added tailwind css to this project. So I used this guide (from point 2 Install Tailwind CSS): https://tailwindcss.com/docs/guides/vite#vue
But, I see no changes and get this warning:
warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
I followed the instuction as it is.
I tried following the content-configuration and I double checked it to see all files in place.
I was expecting tailwind.config.cjs file should be generated but instead tailwind.config.js is generated.
Updates:
On repeating all the steps using this link: https://tailwindcss.com/docs/guides/vite#vue
At step 4:
Add the Tailwind directives to your CSS, When I replace the content for style.css as asked in the step.. Exactly after this point, the error is shown.
Fixed.. Asking in the discord community this was the response:
Thank you for supplying a remotely-hosted repository. It seems to work
fine for me, it could be that you're suffering from a bug that this PR
solves: https://github.com/tailwindlabs/tailwindcss/pull/9650. You
could temporarily try insiders version and see if that fixes it for
you
npm install tailwindcss#insiders
I just gave solution to the same problem. You might have the same...
I had my tailwind.config.js like this:
module.exports = {
content: ["./src**/**/*.{html,js}"],
},
...and I changed the destination folder from "src" to "public", and it worked for me.
Like this:
module.exports = {
content: ["./public/**/*.{html,js}"],
},
Hope this will help you. Good luck and happy coding !
I get the error message as soon as I add this reference in my vue component:
<script setup>
import { ExclamationTriangleIcon, XMarkIcon } from '#heroicons/vue/24/outline'
I am using tailwindcss 3.1.8.
I have executed this:
npm install #headlessui/vue #heroicons/vue
I have version 1.0.6 of heroicons installed. Why is the icon not found?
Looks like heroicons 1.0.6 is outdated. Had to get version 2.0.* by calling
npm install #heroicons/vue#latest
Import of icons had to be changed from '#heroicons/vue/**' to '#heroicons/vue/24/*'
I also had to switch some old icons with new ones, as they may have been renamed or removed. New Icons may be found at https://unpkg.com/browse/#heroicons/vue#2.0.10/24/outline/ (the page https://vue-hero-icons.netlify.app/ does not work as it still contains old ones)
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.
I want to use ag-grid-vue without npm installing it.
code: https://codepen.io/riodw/pen/zYYOjdE
So I found this: Is it possible to use ag-grid with vue without a builder?. Followed that guid, and was basically able to get something to render but it get's stuck on "Loading..."
I downloaded ag-grid (from here: https://github.com/ag-grid/ag-grid)
Went into cd ag-grid-master/packages/ag-grid-vue
npm installed npm install
Then built npm run build
This generated the "ag-grid-vue.umd.js" file.
Modified that file to put AgGridVue on the window where AgGridVue is returned:
window.AgGridVue = AgGridVue;
return AgGridVue;
Then include that file with the ag-grid-community file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/21.2.1/ag-grid-community.min.js"></script>
<script src="/global/js/ag-grid/ag-grid-vue.umd.js"></script>
And ag-grid renders!
Problem is it get's stuck on loading and I don't know if there is a solution.
Are there any possibilities to help here?
Any help would be great. If not I'll have to use something else as installing is not an option for me unfortunately.
Image of render:
Debug mode codepen:
https://cdpn.io/riodw/debug/zYYOjdE/LDkmdEDdQpzA
Everything you do is correct except one tiny thing.
I've found the solution, when I've used vue.js (not minified version), then Vue itself has thrown a warning;
Indicating that, in the "ag-grid-vue" tag, you should not use :rowData as below;
<ag-grid-vue :rowData="rowData" :columnDefs="columnDefs"/>
this usage is wrong as stated in the console warning from Vue.
You should use kebab-case instead of camel-case as below;
<ag-grid-vue :row-data="rowData" :column-defs="columnDefs"/>
This actually works as expected.
I beleive, camel-case works in an environment with the presence of module-loader.