I am using vue js + laravel to create a project. But I am facing an issue when I run npm run watch command.
Vue js throws the error below and the project does not build.
ERROR in ./node_modules/sweetalert2/dist/sweetalert2.min.css (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-8[0].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-8[0].rules[0].use[2]!./node_modules/sweetalert2/dist/sweetalert2.min.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options.url should be one of these:
boolean | object { filter? }
-> Allows to enables/disables `url()`/`image-set()` functions handling (https://github.com/webpack-contrib/css-loader#url).
Details:
* options.url should be a boolean.
* options.url should be an object:
object { filter? }
at validate (/var/www/liaratech/node_modules/webpack/node_modules/schema-utils/dist/validate.js:105:11)
at Object.getOptions (/var/www/liaratech/node_modules/webpack/lib/NormalModule.js:527:19)
at Object.loader (/var/www/liaratech/node_modules/css-loader/dist/index.js:31:27)
I realized that vue js cannot parse css codes in vue js component files.
How can i fix that?
The issue here is a version mismatch for css-loader.
Using css-loader#^3.0.0 fixes the problem (laravel-mix and sweetalert2 seem to use different versions I guess).
"devDependencies": {
"css-loader": "^3.0.0"
}
Related
So I inherited an old (Vue 2) app that uses Styleguidist for creating style guide and documenting components...
It was running extra slow so my first task was to upgrade to using vite instead of webpack. Almost there... fixed almost all the issue, the one is outstanding though... this app uses this format of *.vue components
<template>...</template>
<script>...</script>
<style>...</style>
<docs>
Example of usage
```jsx
<MyComponent>...</MyComponent>
</docs>
where content inside is markdown, so one can write nicer documentation with code example
Now, vite is complaining that I am trying to use jsx (where I am not)...
this is the error
3:36:36 PM [vite] Internal server error: Failed to parse source for
import analysis because the content contains invalid JS syntax. If you
are using JSX, make sure to name the file with the .jsx or .tsx
extension. Plugin: vite:import-analysis
So what am I to do? How do I tell VITE to ignore that part?
The solution, as posted here, is to create a small Vite plugin that ignores the <docs> blocks.
Add this to vite.config.js:
const vueDocsPlugin = {
name: 'vue-docs',
transform(code, id) {
if (!/vue&type=docs/.test(id))
return;
return `export default ''`;
}
};
Then add the plugin to the plugins array:
export default defineConfig({
plugins: [
// vue() will be here...
vueDocsPlugin,
],
});
Update:
Changing: if(data.aliases?.[name2] !== void 0)
to: if(data.aliases != null && data.aliases[name2] !== void 0)
in the iconify .mjs file fixes the error, however this check occurs a lot of places, and is not viable. Any idea why I cant parse this type of null operator?
in ./node_modules/#iconify/vue/dist/iconify.mjs
Module parse failed: Unexpected token (99:21)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
My code:
<template>
<div>
<Icon icon="mdi-light:home" />
</div>
</template>
<script setup lang="ts">
import { Icon } from "#iconify/vue";
</script>
Iconify version:
"#iconify/vue": "^3.2.0"
using standard vue cli babel:
presets: ["#vue/cli-plugin-babel/preset"]
I have tried: in babel.config.js
module.exports = function override(config) {
config.module.rules.push({
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
});
return config;
}
same error
I tried to remove the .mjs file, forcing it to use regular .js file, this resulted in same error but with missing .js loader.
I have tried to use Iconify SVG framework but i get the same type of error where loader is missing for .js files.
Thanks for any feedback :)
Solution:
Downgrading to this version of Iconify "#iconify/vue": "^3.1.1" fixed the problem. This resulted however in a error regarding type declaration. This was fixed by changing VS code's typescript version to: Use workspace version
This is done by selecting a .ts file then pressing "shift+ctrl+p" and select the prompt of select typescript version.
Having the same error cloning from the repository and install dependencies for Vue 2 https://github.com/iconify/iconify
Solution:
Downgrading to this version of Iconify "#iconify/vue": "^3.1.1" fixed the problem. This resulted however in a error regarding type declaration. This was fixed by changing VS code's typescript version to: Use workspace version
This is done by selecting a .ts file then pressing "shift+ctrl+p" and select the prompt of select typescript version.
I am developing a chrome extension using vue 3, vue-router and vuex based on Kocal's project which uses vue-cli under the hood. I used whenever possible Single File Components with extensive use of vue bindings.
Everything works perfect on development mode but I recently tried to build the application for production and I encountered this error with partial rendering:
chunk-vendors.f6de00a6.js:11 EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
After a few days of digging, my understanding is that either webpack or vue compiling system is messing with CSP by referring/injecting code through eval scripts. As I am fairly new to this, it's hard for me to read to distinguish what I can do.
I tried different approaches:
defining $vue alias to a runtime only build in vue.config.js (supposedly removing unsafe eval by having code compiled before runtime but ending with a new error: Uncaught TypeError: Object(...) is not a function for o=Object(n["withScopeId"])("data-v-21ae70c6");)
using render() function at root
adding "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", to manifest.json
switching a component to render() to see if I have better chance with the partial rendering, but ending up with nothing being displayed although having console.log from render being executed.
Adding a config to chainWebpack splitting manifest and inline manifest on vue.config
What puzzles me is that I can't shake off the unsafe-eval, with at best a partial display, at worst a blank page. Bindings seem to be shaken off regardless and using a router-link to change page will give a blank page.
Edit: After digging through compiled code from webpack and setting minimize opt to false, it seems the error comes from a vendor: vue-i18n
The eval is likely coming from Webpack, due to an issue with global scoping.
see link for more detail https://mathiasbynens.be/notes/globalthis
Could you try adding this configuration to vue.config.js
module.exports = {
configureWebpack: {
node: {
global: false
},
plugins: [
new webpack.DefinePlugin({
global: "window"
})
]
}
};
tl;dr: Check your dependencies/packages, including those you wouldn't think they use unsafe-eval.
After digging into webpack internals and components building for vue3, here are the takeaways:
using Single File Components and default vue-cli config is ok as it will indeed just need vue runtime, so no unsolicited unsafe-eval
webpack config as below works:
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
global: "window" // Placeholder for global used in any node_modules
})
]
},
...
};
// Note that this plugin definition would break if you are using "unit-mocha" module for vue-cli
In the end, the issue was a dependency I was using for i18n vue-i18n#next, after removing it and switching to chrome's i18n way, it's now working.
I have a fairly complex SPA Vue.js app created with Vue CLI v3. I want to transform this app to benefit from SSR (although I might end up using only preprendering...)
My app is using custom Vuejs libraries created with the CLI v3 as well. These libs embbed CSS, and I would like to continue to do so.
I've probably read everything that the world has produced on Vue cli, vue-loader, vue-style-loader, vue.config.js, extract css etc, but I keep failing.
Here is the error message of my running app when I load a given route:
ReferenceError: document is not defined
at addStyle (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:699:22)
at addStylesToDom (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:683:20)
at addStylesClient (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:637:3)
at Object.3351 (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:500:14)
at __webpack_require__ (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:21:30)
at Object.d12e (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:3590:380)
at __webpack_require__ (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:21:30)
at Module.fae3 (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:3859:51)
at __webpack_require__ (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:21:30)
at /Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:85:18
at Object. (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:88:10)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
When clicking the first line of the error, I get the following code from the commonjs file of my lib:
function addStyle (obj /* StyleObjectPart */) {
var update, remove
var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')
...
I don't know if I need to change things in my lib (I think so) or in my app, or both.
Here is the vue.config.js of my lib:
module.exports = {
css: {
extract: false
}
}
But I also tried extract: true and (a lot) more sophisticated stuff.... I get always the same error.
Is there a way to integrate Vue cli 3 lib with CSS into a SSR Vue app??? Thanks a lot.
You experienced this error because when the application is building process is done on the server-side where no document exists. You can append an element to document styles by finding an element with querySelector:
var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')
only when JavaScript append to the page is interpreted by the browser (no node js).
You have two options in this case:
Manage styling on the server-side (you can't use `document)
Manage styling on the client-side (you can use document)
In option 1 - server-side you will probably resign from using your vue-custom-lib package or create a fork that checks if the environment is browser or node js. Eg.:
if(process) { you are in node js }
if(window) { you are in the browser - you can use the document.querySelector }
In option 2 I recommend you check Nuxt.
You can add a package with document in head.script property in nuxt.config.js
export default {
head: {
script: [
{ src: '...' }
]
},
you should also read about detecting server and client-side in the Nuxt context
https://nuxtjs.org/api/context/
Configuration build that has also the property isServer:
https://nuxtjs.org/api/configuration-build
Appending your custom library can be done also in renderAndGetWindow function
https://nuxtjs.org/api/nuxt-render-and-get-window
I have a Laravel 5.3 project based on Laravel Spark 2.0. I'm trying to upgrade Spark to 3.0 and Vue.js to 2.0 following the upgrade guide.
I've added "laravel/spark": "~3.0" to my composer.json and it updated correctly. After that I added the following packages to package.json and they were installed without problem:
"laravel-elixir": "^6.0.0-11",
"laravel-elixir-vue-2": "^0.2.0",
"vue": "~2.0.1"
Also modified my gulpfile.js to add laravel-elixir-vue-2
Then I compiled my assets with Gulp and no errors were thrown, but when I go to the app, a blank page is shown and the console shows the following error:
[Vue warn]: Failed to mount component: template or render function not defined.
(found in root instance)
InvalidStateError
vue-migration-helper
My Vue files are located in resources/assets/js/ having an structure like this:
resources/assets/js/
--components/ **here I have custom components.
--spark/
--spark-components/
I ran the vue migration helper over those folders and fixed most of the warns. Only those related to global events were left.
This is how my gulpfile.js looks like:
var elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
require('laravel-elixir-livereload');
elixir(function(mix) {
mix.sass('app.scss')
.browserify('app.js', null, null, { paths: 'vendor/laravel/spark/resources/assets/js' })
.copy('node_modules/sweetalert/dist/sweetalert.css', 'public/css/sweetalert.css')
.copy('bower_components/iCheck/skins/minimal/_all.css', 'public/css/iCheck.css')
.copy('bower_components/iCheck/icheck.min.js', 'public/js/icheck.min.js');
mix.styles([
'resources/assets/vendor/bootstrap/css/bootstrap.css',
'resources/assets/vendor/animate/animate.css',
'resources/assets/vendor/font-awesome/css/font-awesome.css',
], 'public/css/vendor.css', './');
mix.scripts([
'resources/assets/vendor/metisMenu/jquery.metisMenu.js',
// 'resources/assets/vendor/slimscroll/jquery.slimscroll.min.js',
'resources/assets/vendor/pace/pace.min.js'
], 'public/js/vendor.js', './');
mix.version(['css/app.css', 'js/app.js']);
mix.livereload();
});