Develop Reference

ganache installed in vue app, but not detected

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?

Uncaught TypeError: Object(…) is not a function in internal Vue3

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.

Updating Vuetify but sass loader doesn't work

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

Jest encountered an unexpected token React

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.

React Native Exportiing

I am getting the following error when I am trying to build my React Native bundle.
Syntax Error components/Example/index.js: Unexpected token, expected ; (1:20)
I am not sure if it's a problem with my eslint/babel configs. Here are the files.
components/Example/index.js
export default from './View'
components/Example/View.js
import React, { Component, PropTypes, Button } from 'react';
import { connect } from 'react-redux'
import { updateExampleData } from '../../actions/example'
class Example extends Component {
static propTypes = {
title: PropTypes.string.isRequired,
navigator: PropTypes.object.isRequired,
exampleProp: PropTypes.object.isRequired
}
const incrementData = () => {
const newIncrement = this.props.exampleProp + 1
updateExampleData(newIncrement)
}
render() {
return (
<View>
<Text>exampleData: {this.props.exampleProp} </Text>
<Button
onPress={incrementData}
title="Increment Data"
color="#841584"
/>
</View>
)
}
}
const mapStateToProps = (state, props) => {
const exampleProp = state.example.example
const newProps = {
exampleProp: exampleProp
}
return newProps
}
export default connect(mapStateToProps)(Example)
package.json
{
"name": "SportsApp",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-eslint": "^7.2.3",
"babel-preset-react-native": "^3.0.2",
"eslint": "^4.5.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.1.1",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^7.3.0",
"eslint-plugin-standard": "^3.0.1",
"jest-expo": "~19.0.0",
"react-native-orientation": "^3.0.0",
"react-native-orientation-listener": "0.0.4",
"react-native-scripts": "1.1.0",
"react-native-tableview-simple": "^0.16.8",
"react-redux": "^5.0.5",
"react-test-renderer": "16.0.0-alpha.12",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.2.0"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^19.0.0",
"react": "16.0.0-alpha.12",
"react-native": "^0.46.1"
}
}
eslint.json
{
"parser": "babel-eslint",
"env": {
"browser": true
},
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"rules": {
}
}
.babelrc
{
"presets": ["react-native"]
}
I have written react-redux before but I did not do the parsing configurations for that project so I am wondering if the syntax error has something to do with that. I am pretty sure my index.js files for the components were written with the same syntax as that in the provided file where the syntax error is.

Can you try the following?
export { default } from './View'
In your index.js