I'm trying to read the content of a markdown file (.md) stored in statics or assets folder of my quasar project and I have updated the quasar.conf.js file with the following change to support raw file loading after adding raw-loader to my project
extendWebpack(cfg) {
cfg.module.rules.push({
test: /\.md$/i,
use: "raw-loader"
});
I'm trying to load the markdown, using import command from one of the .vue component script tag as below
import md from "~statics/help.md";
But when I run the project, it compiles to 100% and throws the below error
• Compiling:
└── SPA ████████████████████ 100% done in ~13s
ERROR Failed to compile with 1 errors 8:22:43 AM
This dependency was not found:
* ~statics/help.md in ./node_modules/babel-loader/lib??ref--1-0!./node_modules/#quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/Help.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save ~statics/help.md
let me know if any solution
Its seems like quasar can't find the proper reference since I don't know your exact folder structure
Try using ../static/{filname} and see if it works
Related
I am trying to include gsap into a JavaScript file and even it being very straight forward it will not load. I am using what GreenSock docs say to do and still no luck. I have added "type": "module" in the json file and the script file I am import into. In my HTML has type="module included and I have a class module already imported into it. It is working fine.
After doing a npm install gsap and it is in my .json file "gsap": "^3.11.0"
They say include this at the very top of the file using it: import {gsap} from "gsap"
Doing so only throws a console error:
Uncaught TypeError: Failed to resolve module specifier "gsap". Relative references must start with either "/", "./", or "../".
I didn't include any of those being it is a npm install not a cdn script, then on a whim I did try to include any one of those and still nothing. But the error now reads:
GET ###url####ERR_ABORTED 404 (Not Found) looking for a file in my directory. With npm install there is no file just a node_module.
Will just go to the cdn version but just wondering why this is a problem? I am using a tutorial and even the npm isntall steps he uses worked. But when I try it fails .... included image and with or with a " ./ " director included nothing loads
If anyone has any advice feel free to include it here. Removed via npm remove gsap and included the cdn in my html. It is 2022 and shouldn't have to be this hard .....
I just needed to put the cdn in the html and gsap worked perfectly in the js file
CDN - <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
I have a npm package which is installed globally (npm install -g ...). One of the package's dependencies is providing json schema file which is loaded like this:
import schema from "../../node_modules/some-package/schemas/schema.json";
Im using rollup (with #rollup/plugin-json) to bundle my package and its working fine. And was wondering if the json schema can be excluded from the bundle.
If the json file is added to external: [...] section in rollup.config.js then the schema is not being bundled but then the package itself is throwing an error Unknown file extension ".json" whenever its started (which makes sense).
The only other way (I can think of) is to not include the schema using import but to rather read it (fs.readFile and then JSON.parse) when my package is started. But since my package is installed globally how can I read files from node_modules of the global package folder when its being started?
So this is the error i get when i open my vue project... except that i cant even locate my manifest.json nore do i have a /img/icons folder in the project. I cannot figure out what the error is or how to correct it
Error while trying to use the following icon from the Manifest: http://localhost:8080/img/icons/android->chrome-192x192.png (Download error or resource isn't a valid image)
The error you're seeing is typically caused by altering a project created using Vue Cli 3's command vue create some-project and then removing either parts of or in its entirety the public folder. Namely, the error complains about the absence of icon files situated in public/img/icons, aimed at providing android, apple or web icons/favicons for the served/built app.
A possible fix for this error is to create a new project (run vue create whatever outside of your project) and copy-paste the resulting public/ folder into your current project.
If you haven't created your project with Vue Cli 3, the solution above will likely not work.
For Vue Cli 2.x projects, according to Vue Cli docs running vue init webpack my-project in the root of the project (where my-project is the name of your project as set in package.json) might work.
I'm trying to build a library (mostly some .vue components) to reuse in different projects (no public npm) with vue-cli-service. Apparently everything its already setup, and I can confirm that the build is fine (js, and css). However, I'm unable to use it in a separate project as an external module because it uses the spread operator (and probably more ES20XX features no yet parsed).
Module parse failed: Unexpected token (2683:8)
You may need an appropriate loader to handle this file type.
| params() {
| const queryParams = {
| ...this.filters,
| ...this.sorting,
| ...this.config.params,
This is the standard command I'm using to build the library
vue-cli-service build --target lib --name [mylibname] ./src/components/index.js
By default the bundle should be already polyfilled but it seems to me that it's not the case.
I've read that I might change the webpack configuration on the project I'm using into, but I'm against parsing the whole node_module folder and also I would love to just have the simplest workflow possible (like import a module and its css).
So my question is, how to polyfill my bundle to be perfectly usable in no matter what Vue project without any hassle ?
Ok, it seems that reinitializing the project with vue-cli without typescript and with separated configuration files instead of into package.json was a good idea, as now is transpiled as needed.
var queryParams = _objectSpread({}, this.filters, {}, this.sorting, {}, this.config.params);
Unfortunately the hidden configuration of vue-cli webpack can't help to see what has changed.
I have recently included Angular 2 in my project. After setup, facing issue for namespace webdriver. On Google I found the solution here. But here it is asking to execute below npm command.
npm install #types/selenium-webdriver#2.53.36 --save-dev
Now, I want to know, where I will execute this above command, so that the required files will get included in my project.
Inside the VS IDE, I haven't found any console area like as for nuget, where I execute the command and files get included in project.
Please help.
add a nmp configuration file
add all of the #angular dependencys that you will be needing
add system.config file in the root of the project
add tsconfig.json to the root of the project
add tslint.json to root of project
then add your app.component .module .route and other files.
in system.config.js add your #angular/core and others like
'#angular/core': 'npm:#angular/core#2.1.1/bundles/core.umd.js'
after doing this your can run your project and your _layout page is where you will add all of your <script> and other angular files.