Vuelidate is not working while import in vue 3 - vuejs3

vuelidate vue 2 is working fine but vue 3 is not working I can't able to use the vulidate package into main.ts file
if I try to import directly to the component without importing vuelidate into main.ts file getting this error
this project is vue 3 + class based component + typescript
if I directly use the vuelidate package I get this error
[2]: https://i.stack.imgur.com/QmaD1.png

Related

Vue 3 - Bootstrap Rollup Failure

I'm new Vue, I don't understand this error from installing bootstrap-vue-3
Install commands:
npm i --save bootstrap bootstrap-vue-3
Configuration [main.js]:
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import BootstrapVue3 from 'bootstrap-vue-3'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
createApp(App)
.use(BootstrapVue3)
.mount('#app')
Errors:
Rollup failed to resolve import "bootstrap/js/dist/carousel" from "node_modules/bootstrap-vue-3/dist/bootstrap-vue-3.es.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to rollupInputOptions.external
This is a new project -- nothing added aside from default stuff and bootstrap.

The browser tells "failed to compile"

i import the bootstrap vue like this:
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
i already tried consulting all forums with similar questions but nothing
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Failed to compile.
/home/fabry/node_modules/bootstrap-vue/dist/bootstrap-vue.css (./node_modules/css-loader??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!/home/fabry/node_modules/bootstrap-vue/dist/bootstrap-vue.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: No PostCSS Config found in: /home/fabry/node_modules/bootstrap-vue/dist
at config.search.then (/home/fabry/Scrivania/programmazione/web/Vue/realVueFool/quiz/node_modules/postcss-load-config/src/index.js:91:15)
Did you follow the instructions here?
It sounds like you either didn't install all the dependencies or failed to register components in your Vue app.

Ionic - Cannot find module 'Firebase'

I have followed the tutorial at https://www.djamware.com/post/5a629d9880aca7059c142976/build-ionic-3-angular-5-and-firebase-simple-chat-app to build an Ionic app using Firebase's realtime database.
It works perfectly locally via ionic serve. I have also used the Ionic DevApp and again, it works perfectly.
I have now pushed my code to Ionic but during the build I get this error and the build process terminates:
[11:20:31] typescript: src/pages/chat/chat.ts, line: 7
Cannot find module 'Firebase'.
L7: import * as firebase from 'Firebase';
Error: Failed to transpile program
at new BuildError (/usr/src/app/node_modules/#ionic/app-scripts/dist/util/errors.js:16:28)
at /usr/src/app/node_modules/#ionic/app-scripts/dist/transpile.js:159:20
at Promise ()
at transpileWorker (/usr/src/app/node_modules/#ionic/app-scripts/dist/transpile.js:107:12)
at Object.transpile (/usr/src/app/node_modules/#ionic/app-scripts/dist/transpile.js:64:12)
at /usr/src/app/node_modules/#ionic/app-scripts/dist/build.js:109:82
at
npm info lifecycle fanslide#0.0.1~build: Failed to exec build script
In chat.ts I have:
import * as firebase from 'Firebase';
Inside package.json I can see:
"firebase": "^4.8.0",
I am not sure what I have done wrong and why this works locally but not when the build takes place on Ionic's server.
I managed to overcome this issue and successfully complete a build in Ionic by changing:
import * as firebase from 'Firebase';
To:
import firebase from 'firebase';

Using React components from npm in Meteor 1.3

I would like to know how to use React components from npm in Meteor 1.3 using import.
I am trying to use react-gravatar in my project. I did npm install --save react-gravatar. And in my component, I required it:
import React from 'react';
import Gravatar from 'react-gravatar';
export default React.createClass({
render() {
...
}
});
But I get:
Uncaught Error: Cannot find module 'querystring'
I think this is because querystring is not available in client side, and I need to use browserify-reactify of some sort. But how can I do so in Meteor 1.3?

require.js runtime error when importing angular 2

I'm trying to run a typescript project (I'm using vs2012) and to import angular 2.
the projects is set to AMD module system and ECMAcript 5
In ts filed I'm importing the module:
import ng2 = require('angular2/angular2');
=> in js file it replaced to:
define(["require", "exports"], function (require, exports) {
And I'm getting this require.js runtime error:
Mismatched anonymous define() module: function (require, exports) {
....
// code
....
}
Is anyone knows what the cause of it?
Thanks a lot!
Lior
Try using the new ES6 syntax for importing files.
Example: import {bootstrap} from 'angular2/angular2';
This Angular2 Visual Studio tutorial can help you setup your project.

Resources