I started a fresh vue project (vue2) and installed both ganache and web3. I get the following error when I try starting my app:
* ganache in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=script&lang=js&
Here's what my package.json looks like:
{
"name": "unrival_client",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"ganache": "^6.4.5",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0",
"web3": "^1.6.1"
},
"devDependencies": {
"#vue/cli": "^4.5.15",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/cli-service-global": "^4.5.15",
"babel-eslint": "^10.1.0",
"core-js": "^2.6.12",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
}
}
Edit: Here's what my vue component looks like:
<template>
<div class="hello">
hi
</div>
</template>
<script>
const Web3 = require("web3");
const ganache = require("ganache");
const web3 = new Web3(ganache.provider(), null, { transactionConfirmationBlocks: 1 });
export default {
name: 'HelloWorld',
created () {
console.log(web3)
}
}
</script>
Edit: I also get this error using es6 style importing:
import Web3 from "web3";
import ganache from "ganache";
const web3 = new Web3(ganache.provider(), null, { transactionConfirmationBlocks: 1 });
I've tried re-running the command suggested in the error message but it doesn't help. Does anyone know what could be wrong?
Related
vue 2.6.14
vuetify 2.6.9
How do I plug vuetify into a vue application?
I trying import my project in another project how microfrontend application, but something not working
how i went this step-by-step:
create-single-spa root config
created application vue in project
run vue add vuetify in vue app directory
import vuetify in main.js in vue app
profit?... no
package.json
{
"name": "#site/site",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"serve:standalone": "vue-cli-service serve --mode standalone"
},
"dependencies": {
"axios": "^0.24.0",
"core-js": "^3.8.3",
"js-cookie": "^3.0.1",
"single-spa-vue": "^2.1.0",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuetify": "^2.6.9",
"vuex": "^3.6.2",
"vuex-persistedstate": "^4.1.0",
"vue-slick-carousel": "^1.0.6",
"vue-social-sharing": "^3.0.9",
"vue-the-mask": "^0.11.1"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-router": "~5.0.0",
"#vue/cli-plugin-vuex": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"material-design-icons-iconfont": "^6.1.1",
"prettier": "^2.4.1",
"sass": "~1.54.9",
"sass-loader": "^13.0.2",
"vue-cli-plugin-single-spa": "~3.3.0",
"vue-cli-plugin-vuetify": "~2.5.5",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"plugin:prettier/recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
site/main.js
import Vue from "vue";
import singleSpaVue from "single-spa-vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
import VueSocialSharing from "vue-social-sharing";
Vue.config.productionTip = false;
Vue.config.devtools = process.env.VUE_APP_IS_DEV === "true";
Vue.use(VueSocialSharing);
const vueLifecycles = singleSpaVue({
Vue,
appOptions: {
render(h) {
return h(App);
},
vuetify,
router,
store,
},
});
export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;
errors in console
You are trying to import it from plugins, but you probably didn't create file in plugins
import vuetify from "./plugins/vuetify";
Create a plugin file for Vuetify, src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
Use opts object to customize themes if you want
Isn't it
Vue.use(Vuetify)
with vuetify like you did with VueSocialSharing?
Vuetify Documentation
I have downloaded the npm i --save esri-loader #esri/react-arcgis but why is it i cant load the map? did i miss something?
import React from 'react';
import Map from '../../component/Map/Map.js'
const HomePage = () => {
return (
<div>
<Map/>
</div>
);
};
export default HomePage;
component/Map/Map.js
import React , {useRef,useEffect} from 'react';
import {loadModules} from "esri-loader";
function Map() {
const MapElement=useRef(null)
useEffect(()=>{
let view;
loadModules(["esri/views/MapView", "esri/WebMap"],{
css:true
}).then(([MapView, WebMap])=>{
const webmap= new WebMap({
basemap:'topo-vector'
})
view = new MapView({
map:webmap,
center:[],
zoom:8,
container:MapElement.current
})
})
return()=>{
if(!!view){
view.destroy()
view=null
}
}
})
return (
<div style={{height:800}} ref={MapElement}>
</div>
)
}
export default Map
the error i get
the reference i used for this https://www.youtube.com/watch?v=0RC1Xf_0UUk
package.json
{
"name": "#country/app", "private": true, "scripts": {
"start": "webpack serve",
"start:standalone": "webpack serve --port 9003 --env standalone",
"build": "concurrently yarn:build:*",
"build:webpack": "webpack --mode=production",
"analyze": "webpack --mode=production --env analyze",
"lint": "eslint src --ext js",
"format": "prettier --write .",
"check-format": "prettier --check .",
"test": "cross-env BABEL_ENV=test jest",
"watch-tests": "cross-env BABEL_ENV=test jest --watch",
"prepare": "husky install",
"coverage": "cross-env BABEL_ENV=test jest --coverage" }, "devDependencies": {
"#arcgis/webpack-plugin": "^4.20.0",
"#babel/core": "^7.15.0",
"#babel/eslint-parser": "^7.15.0",
"#babel/plugin-transform-runtime": "^7.15.0",
"#babel/preset-env": "^7.15.0",
"#babel/preset-react": "^7.14.5",
"#babel/runtime": "^7.15.3",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"babel-jest": "^27.0.6",
"concurrently": "^6.2.1",
"cross-env": "^7.0.3",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-important-stuff": "^3.0.0",
"eslint-plugin-prettier": "^3.4.1",
"husky": "^7.0.4",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.4.3",
"jest-cli": "^27.4.3",
"prettier": "^2.3.2",
"pretty-quick": "^3.1.1",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0",
"webpack-config-single-spa-react": "^4.0.0",
"webpack-dev-server": "^4.0.0",
"webpack-merge": "^5.8.0" }, "dependencies": {
"#esri/react-arcgis": "^5.1.0",
"#material-ui/styles": "^4.11.4",
"#mui/styles": "^5.2.2",
"#reach/router": "^1.3.4",
"arcgis-js-api": "^4.21.2",
"esri-loader": "^3.3.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"single-spa-react": "^4.3.1" }, }
Sorry for not directly responding to your described error, but I would not use esri-loader with newer versions of ArcGIS for JavaScript API. Why not npm as ES modules which do not require a separate script loader?
Build with ES Module
This way you can do simple imports like this:
import WebMap from "#arcgis/core/WebMap";
Here are the initial setup instructions:
Install instructions
Finally, here is a sample react app from Esri using exactly that:
Esri React App example
I have strange error, i don’t know what causing this but last time i develop my project was fine. After no reason my chrome browser lost its cache data (next day). when i run my vue3 project the error appears. What console logs said
App.vue?3dfd:11 Uncaught TypeError: Object(...) is not a function
at eval (App.vue?3dfd:11)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/#vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/#vue/cli-service/node_modules/vue-loader-v16/dist/index.js?!./src/App.vue?vue&type=template&id=7ba5bd90
img1
And that pointing to something right before
img2
This is my main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
import Notifications from 'vue3-vt-notifications'
import { store } from './stores'
import Particles from 'particles.vue3'
// import tailwind css
import '../src/styles.css'
// firebase auth service
import { projectAuth } from './firebase/config'
let app
projectAuth.onAuthStateChanged(() => {
if(!app){
app = createApp(App)
.use(router)
.use(store)
.use(Particles)
.use(VueAxios, axios)
.use(Notifications)
.mount('#app')
}
})
and this is my package.json
{
"name": "myproject",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-css": "tailwindcss build src/styles.css -o public/styles.css"
},
"dependencies": {
"#dafcoe/vue-collapsible-panel": "^0.2.0",
"#tailwindcss/postcss7-compat": "^2.0.2",
"#tinymce/tinymce-vue": "^4.0.0",
"algoliasearch": "^4.10.5",
"autoprefixer": "^9.8.6",
"axios": "^0.21.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"core-js": "^3.6.5",
"d3": "^7.0.0",
"d3-svg-legend": "^2.25.6",
"d3-v6-tip": "^1.0.9",
"date-fns": "^2.16.1",
"es6-promise": "^4.2.8",
"firebase": "^8.2.1",
"firebase-admin": "^9.4.2",
"firebase-functions": "^3.13.1",
"firebaseui": "^4.7.1",
"js-md5": "^0.7.3",
"jspdf": "^2.3.1",
"node-sass": "^5.0.0",
"particles.vue3": "^1.12.2",
"postcss": "^7.0.35",
"sass-loader": "^11.0.1",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.2",
"vue": "^3.0.0",
"vue-axios": "^3.2.4",
"vue-clipboard3": "^1.0.0",
"vue-disqus": "^5.1.0",
"vue-dropdowns": "^1.1.2",
"vue-google-signin-button": "^1.0.4",
"vue-instantsearch": "^4.0.0",
"vue-load-image": "^1.1.0",
"vue-loader": "^15.9.7",
"vue-meta": "^3.0.0-alpha.2",
"vue-nav-tabs": "^0.5.7",
"vue-rate": "^2.4.0",
"vue-router": "^4.0.0-0",
"vue-typewriter": "^2.2.1",
"vue3-carousel": "^0.1.13",
"vue3-datepicker": "^0.2.4",
"vue3-vt-notifications": "^1.0.0",
"vuex": "^4.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0"
}
}
In Addition, I don’t know if this related or not every time in run serve. it finish at 98% with this warning:
img3
Somebody please help me
I also encountered the same problem, and finally found that when I imported nanoid, deconstruction was not used. After adding {}, the error was resolved. You can see if it is the problem of importing third-party libraries.
I am new to vuetify and I am trying upgrade to v2.1.3 but sass loader doesn't work. I read all the documentation but my English is not very good, I can't fix this problem.
Actually, I can update vuetify and it works. I can see the new vuetify and I run other things but my Project doesn't see sass. This is my problem
My package .json;
{
"name": "arkmanweb",
"version": "1.9.4",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#syncfusion/ej2-vue-grids": "^17.3.19",
"axios": "^0.18.0",
"css-loader": "^3.2.1",
"echarts": "^4.2.0-rc.2",
"luxon": "^1.19.3",
"print-js": "^1.0.52",
"quill": "^1.3.6",
"register-service-worker": "^1.0.0",
"sass": "^1.23.7",
"sass-loader": "^8.0.0",
"save": "^2.3.2",
"underscore": "^1.8.3",
"vee-validate": "^2.0.4",
"vue": "^2.5.13",
"vue-i18n": "^8.4.0",
"vue-moment": "^3.2.0",
"vue-router": "^3.0.1",
"vuetify": "^2.1.13",
"vuex": "^3.0.1",
"webpack": "^4.41.2",
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.0-alpha.8",
"#vue/cli-plugin-eslint": "^3.0.0-alpha.8",
"#vue/cli-plugin-pwa": "^3.0.0-alpha.8",
"#vue/cli-service": "^3.0.0-alpha.8",
"deepmerge": "^4.2.2",
"fibers": "^4.0.2",
"less-loader": "4.1.0",
"style-loader": "0.23.1",
"vue-template-compiler": "^2.5.13",
"webpack-cli": "^3.1.2"
},
"babel": {
"presets": [
"#vue/app"
]
},
"eslintConfig": {
"extends": [
"plugin:vue/essential",
"eslint:recommended"
]
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
This is my main js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vuetify from 'vuetify'
import './registerServiceWorker'
import VueResource from 'vue-resource'
import '../src/assets/css/custom.css'
import { i18n } from '#/plugins/i18n'
import 'vuetify/dist/vuetify.min.css'
Vue.use(VueResource)
const opts = {
theme: { disable: true }
}
Vue.use(Vuetify)
import auth from '../src/api/auth'
auth.checkAuth()
Vue.router = router
Vue.config.productionTip = false
new Vue({
router,
vuetify:new Vuetify(opts),
store,
i18n,
render: h => h(App)
}).$mount('#app')
This is App.vue I am importing sass here but doesn't work:
<style lang="sass">
#import '../node_modules/vuetify/src/styles/main.sass';
</style>
What's wrong? Thank you for your help.
This is my error:
error in ./src/App.vue?vue&type=style&index=0&lang=sass&
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
- options has an unknown property 'data'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
Its hard to tell based on information you provided but it seems you upgraded sass-loader to version 8.0.0 as part of the upgrade of Vuetify
There is a breaking change in 8.0.0 release of sass-loader in how the configuration should look like - all the options for the underlying sass processor (Node Sass or Dart Sass) needs now to be moved into sassOptions
This is screenshot of error:
I have 2 tests, the first one is working alright: sum.js :
function sum(a, b) {
return a + b;
}
module.exports = sum;
sum.test.js
const sum = require('./sum');
test('adds 2 + 5 to equal 7', () => {
expect(sum(2, 5)).toBe(7);
});
it works okay, prints message in console.
the second one (I dont sure) is set by default by create-react-app
App.test.js :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
App.js :
import React, { Component } from 'react';
import {HashRouter} from "react-router-dom";
import Routes from './routes';
import Alerts from './app/components/alerts';
import Navbar from '../src/app/navbar/navbar'
import Auth from './app/settings/auth';
import Register from './app/entities/user/modify-modal';
import './index.scss';
class App extends Component {
componentWillMount(){
}
render() {
return (
<HashRouter>
<>
<Auth></Auth>
<Navbar></Navbar>
<Alerts></Alerts>
<Register/>
<div className={"content-root"}>
<Routes/>
</div>
</>
</HashRouter>
);
}
}
export default App;
package.json
{
"name": "x5_r_app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/cli": "^7.2.3",
"#babel/plugin-proposal-class-properties": "^7.4.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.4.1",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"#fortawesome/fontawesome-free": "^5.7.1",
"#fortawesome/fontawesome-svg-core": "^1.2.12",
"#fortawesome/free-solid-svg-icons": "^5.6.3",
"#fortawesome/react-fontawesome": "^0.1.3",
"axios": "^0.18.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"bootstrap": "^4.2.1",
"jest": "^24.5.0",
"jest-cli": "^24.5.0",
"jsdom": "^14.0.0",
"moment": "^2.23.0",
"node-sass": "^4.11.0",
"react": "^16.7.0",
"react-addons-test-utils": "^15.6.2",
"react-bootstrap": "^1.0.0-beta.5",
"react-bootstrap-typeahead": "^3.2.4",
"react-datetime": "^2.16.3",
"react-debounce-input": "^3.2.0",
"react-dom": "^16.7.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.2",
"react-select": "^2.3.0",
"reactstrap": "^7.0.2",
"rxjs": "^6.3.3",
"scss": "^0.2.4",
"test": "^0.6.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/core": "^7.4.0",
"babel-core": "^6.26.3",
"babel-jest": "^24.5.0"
}
}
package-lock.json is 20000 rows of code, so I dont know, what part of it is needed for explanation of my problem, all guides that I've read about this problem were useless for me, so I am asking here.
The issue is that the app was bootstrapped with create-react-app, but then the latest version of Jest was also installed and the npm test script within package.json was changed to launch jest directly.
The test failed since Jest was not configured to transpile the JSX syntax.
Tests that use syntax like JSX have to be transpiled before they can be run by Jest.
create-react-app includes react-scripts which handles all of that configuration automatically.
If an app is bootstrapped with create-react-app then Jest does not need to be installed and configured manually.
If an app is not bootstrapped with create-react-app, or if the app is ejected from create-react-app, then Jest needs to be installed and configured to transpile the test code.