Related
When I try to integrate web2-react/walletconnect-connector with web3-react using web3-react/core. Other wallets like portis, metamask, fortmatic and few other are working properly but when I use wallet-connector or walletlink it is giving the error.
I used this code web3-react github repo.
Getting runtime error.
Provider
import {
Web3ReactProvider,
} from '#web3-react/core';
import { Web3Provider } from '#ethersproject/providers';
function getLibrary(provider: any) {
const library = new Web3Provider(provider);
library.pollingInterval = 12000;
return library;
}
ReactDOM.render(
<Web3ReactProvider getLibrary={getLibrary} >
<Start />
</Web3ReactProvider>,
document.getElementById('root') as HTMLElement
);
Connector code
import { WalletConnectConnector } from '#web3-react/walletconnect-connector';
export const walletconnect = new WalletConnectConnector({
rpc: { 1: 'https://mainnet.infura.io/v3/84842078b09946638c03157f83405213' },
qrcode: true,
});
Here is the Error
./node_modules/eth-json-rpc-filters/node_modules/pify/index.js
Module parse failed: Unexpected token (44:2)
You may need an appropriate loader to handle this file type.
| errorFirst: true,
| promiseModule: Promise,
| ...options
| };
Package Json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#ant-design/icons": "^2.1.1",
"#ethersproject/keccak256": "^5.4.0",
"#ethersproject/providers": "^5.4.5",
"#ethersproject/units": "^5.4.0",
"#metamask/detect-provider": "^1.2.0",
"#web3-react/abstract-connector": "^6.0.7",
"#web3-react/authereum-connector": "^6.2.0",
"#web3-react/core": "^6.1.9",
"#web3-react/fortmatic-connector": "^6.1.6",
"#web3-react/frame-connector": "^6.0.9",
"#web3-react/injected-connector": "^6.0.7",
"#web3-react/lattice-connector": "^6.1.9",
"#web3-react/ledger-connector": "^6.1.9",
"#web3-react/network-connector": "^6.1.9",
"#web3-react/portis-connector": "^6.1.9",
"#web3-react/squarelink-connector": "^6.1.9",
"#web3-react/torus-connector": "^6.1.9",
"#web3-react/trezor-connector": "^6.1.9",
"#web3-react/walletconnect-connector": "^6.2.4",
"#web3-react/walletlink-connector": "^6.2.5",
"antd": "^3.4.1",
"async-redis": "^2.0.0",
"bootstrap": "^5.1.0",
"bscscan-api": "^1.0.1",
"chessboardjs": "^0.0.1",
"dotenv": "^4.0.0",
"ethers": "^5.4.6",
"express": "^4.16.3",
"husky": "^7.0.2",
"immutable": "^3.8.2",
"lint-staged": "^11.1.2",
"node-cron": "^3.0.0",
"node-schedule": "^1.3.0",
"nodemon": "^2.0.13",
"normalize.css": "^8.0.0",
"prettier": "^2.3.2",
"react": "^16.3.1",
"react-copy-to-clipboard": "^5.0.4",
"react-countdown-circle-timer": "^2.5.4",
"react-dom": "^16.3.1",
"react-router": "^5.2.1",
"react-router-dom": "^5.3.0",
"react-scripts-ts": "^2.15.1",
"react-spring": "^9.2.5",
"react-toastify": "^8.0.3",
"redis": "^2.8.0",
"shortid": "^2.2.8",
"socket.io": "^2.1.0",
"socket.io-client": "^2.1.0",
"toasted-notes": "^3.2.0",
"web3": "^1.6.0"
},
"scripts": {
"start": "react-scripts-ts start",
"server": "server/index.js",
"nodemon": "nodemon server/index.js",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject",
"create:component": "./node_modules/hygen/lib/bin.js component create",
"create:store:item": "./node_modules/hygen/lib/bin.js store create",
"heroku-postbuild": "yarn run build"
},
"jest": {
"moduleNameMapper": {
"^react-native$": "react-native-web",
"#App/(.*)": "<rootDir>/src/$1"
}
},
"devDependencies": {
"#types/history": "^4.6.2",
"#types/jest": "^22.2.2",
"#types/node": "^9.6.2",
"#types/react-dom": "^16.0.4",
"typescript": "^2.9.2"
}
}
I'm tried for about 3 days but still no luck . Please help me with this.
It was able to work again after downgrading one below version for them.
i'm in vue project, and build/webpack.base.conf.js add
{
test: /\.js$/,
loader: 'babel-loader',
include: [
resolve('src'),
resolve('test'),
resolve('node_modules/webpack-dev-server/client'),
resolve('node_modules/web3-eth-accounts/lib'),
resolve('node_modules/web3-core-helpers/lib'),
resolve('node_modules/web3-eth-contract/lib'),
resolve('node_modules/web3-core-method/lib')
]
},
the error reason is web3.js syntax not support {...options, ...otherOptions}, it is
Object.assing(options, {
a: 'xxx',
b: 'xxx
})
I am using Webpack with Babel, and #babel/preset-env to hopefully import only required polyfills that I need. It seems though that the entire library is being installed, resulting in a large bundle (~250kb)
My package.js:
{
"name": "holidaynewtheme",
"version": "0.1",
"description": "Starter theme for holidaynewbase",
"private": true,
"main": "webpack.config.js",
"dependencies": {
"core-js": "^3.6.5",
"element-closest": "^3.0.2",
"flickity": "^2.2.1",
"gsap": "^3.4.2",
"js-cookie": "^2.2.1",
"turbolinks": "^5.2.0",
"vanilla-lazyload": "^17.1.0",
"whatwg-fetch": "^3.4.0"
},
"devDependencies": {
"#babel/core": "^7.11.0",
"#babel/plugin-transform-runtime": "^7.8.3",
"#babel/preset-env": "^7.8.4",
"#babel/runtime": "^7.8.4",
"#shopify/theme-cart": "^3.0.3",
"#shopify/theme-product": "^3.0.3",
"#shopify/theme-product-form": "^3.0.3",
"#shopify/themekit": "^1.1.3",
"autoprefixer": "^9.7.4",
"babel-loader": "^8.0.6",
"bluebird": "^3.5.3",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^7.0.2",
"css-loader": "^3.4.2",
"eslint": "^6.8.0",
"file-loader": "^3.0.1",
"glob": "^7.1.6",
"html-includes": "^4.3.3",
"mini-css-extract-plugin": "^0.9.0",
"modernizr": "^3.6.0",
"modernizr-loader": "^1.0.1",
"node-sass": "^4.13.1",
"postcss-loader": "^3.0.0",
"pre-commit": "^1.2.2",
"sass-loader": "^8.0.2",
"svg-symbols": "^1.0.5",
"url-loader": "^1.1.2",
"webpack": "^4.41.6",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-cli": "^3.3.11",
"webpack-shell-plugin-next": "^1.1.5"
},
"browserslist": [
"last 1 version",
"> 2%",
"Explorer >= 11"
]
}
My babel.config.json:
{
"presets": [
[
"#babel/preset-env",
{
useBuiltIns: "entry",
debug: true,
corejs: "3.6.4"
}
]
],
"plugins": [
"#babel/plugin-transform-runtime"
]
}
I have the following imports set up in my main entry point:
import 'core-js/stable';
import 'regenerator-runtime/runtime';
I'm using the BundleAnalyzerPlugin and get a gzipped size of 250kb for just core-js:
When I change the browserslist setup to be just Chrome 85, nothing form core-js is imported.
When I remove the import line, nothing is imported either.
OK, feeling foolish.
My webpack.config.js had this configuration for babel-loader:
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['#babel/env'],
}
},
... I'm not that au faix with webpack setup, so I think this was overriding my babel.config.json for anything .js.
Also, I removed the import lines, and changed useBuiltIns to be usage and everything works as expected.
The giveaway should have been that my debug: true was not causing debug info to be logged when webpack was compiling. It is now, and my bundle is much smaller.
I'm trying to deploy a Next application with custom server.js into GAE. I can run the project with no problems on local and even on the google GCP CLI. The problem right now is after the app is deployed to GAE successfully via gcloud app deploy, I'm getting the following error when opening the app.
2020-03-30 21:41:21.748 HKT
Error: EROFS: read-only file system, unlink '/srv/dist/functions/next/BUILD_ID'
Expand all | Collapse all{
insertId: "5e81f701000b6ba4e770be02"
labels: {…}
logName: "projects/next-gae/logs/stderr"
receiveTimestamp: "2020-03-30T13:41:21.749839891Z"
resource: {…}
textPayload: "Error: EROFS: read-only file system, unlink '/srv/dist/functions/next/BUILD_ID'"
timestamp: "2020-03-30T13:41:21.748452Z"
}
My app.yaml is below:
runtime: nodejs10
.gcloudignore
# This file specifies files that are *not* uploaded to Google Cloud Platform
# using gcloud. It follows the same syntax as .gitignore, with the addition of
# "#!include" directives (which insert the entries of the given .gitignore-style
# file at that point).
#
# For more information, run:
# $ gcloud topic gcloudignore
#
.gcloudignore
# If you would like to upload your .git directory, .gitignore file or files
# from your .gitignore file, remove the corresponding line
# below:
.git
.gitignore
# Node.js dependencies:
node_modules/
*.hot-update.js*
# Other config and Files
README.md
.eslintignore
.eslintrc
package.json
{
"name": "next-gae",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.8.3",
"#babel/runtime": "^7.8.7",
"#sentry/browser": "^5.15.0",
"#sentry/integrations": "^5.15.0",
"#sentry/node": "^5.15.0",
"#storybook/addon-actions": "^5.2.6",
"#storybook/addon-info": "^5.2.6",
"#storybook/addon-knobs": "^5.2.6",
"#storybook/addon-links": "^5.2.6",
"#storybook/addon-notes": "^5.2.6",
"#storybook/addon-storysource": "^5.2.6",
"#storybook/addon-viewport": "^5.2.6",
"#storybook/react": "^5.2.6",
"antd": "^3.26.7",
"axios": "^0.19.0",
"connected-react-router": "^6.5.2",
"cookie-parser": "^1.4.4",
"cors": "^2.8.5",
"date-fns": "^2.9.0",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"firebase": "^7.8.0",
"firebase-admin": "^8.10.0",
"firebase-functions": "^3.3.0",
"formik": "^2.1.4",
"helmet": "^3.21.2",
"hpp": "^0.2.3",
"imagemin-optipng": "^7.1.0",
"imagemin-svgo": "^7.1.0",
"immutable": "^4.0.0-rc.12",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.2.1",
"morgan": "^1.9.1",
"next": "^9.1.7",
"next-antd-aza-less": "^1.0.2",
"next-optimized-images": "^2.5.5",
"next-redux-wrapper": "^4.0.1",
"nocache": "^2.1.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-router": "^5.1.2",
"react-smooth-scrollbar": "^8.0.6",
"react-stripe-elements": "^6.0.1",
"react-virtualized": "^9.21.2",
"redux": "^4.0.4",
"redux-devtools": "^3.5.0",
"redux-devtools-extension": "^2.13.8",
"redux-logger": "^3.0.6",
"redux-multi": "^0.1.12",
"redux-observable": "^1.2.0",
"redux-persist": "^6.0.0",
"rxjs": "^6.5.3",
"rxjs-compat": "^6.5.3",
"smooth-scrollbar": "^8.5.1",
"storybook-addon-figma": "^0.1.0",
"storybook-readme": "^5.0.8",
"styled-components": "^5.0.0",
"xss-clean": "^0.1.1",
"yup": "^0.28.2"
},
"engines": {
"node": "10"
},
"scripts": {
"test": "jest",
"flow": "flow",
"eslint": "eslint \"./**/*.{jsx,js}\"",
"lint": "eslint ./src/",
"lint:fix": "npm run lint --fix",
"lint:dry": "npm run lint --fix-dry-run",
"build-next": "next build \"src/app/\"",
"clean": "rimraf dist",
"predeploy": "npm run build-all",
"start": "cd \"src/app/\" ; NODE_ENV=production node server.js",
"deploy:gae": "npm run pre-start; npm run build-next; gcloud app deploy",
"fmt": "prettier --config .prettierrc.yml --write \"{!(node_modules),!(__mock__)/**/}*.{jsx,js,json,md,ts}\""
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{jsx,js}": [
"flow focus-check",
"npm run lint:fix",
"git add"
],
"*.{jsx,js,json,md,ts}": [
"npm run fmt",
"git add"
]
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"babel-plugin-import": "^1.13.0",
"babel-plugin-inline-import": "^3.0.0",
"babel-plugin-inline-react-svg": "^1.1.1",
"babel-plugin-styled-components": "^1.10.6",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"cpx": "^1.5.0",
"cross-env": "^7.0.2",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-config-prettier": "^6.5.0",
"eslint-plugin-flowtype": "^4.4.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-react": "^7.16.0",
"firebase-functions-test": "^0.2.0",
"firebase-tools": "^7.15.1",
"flow-bin": "^0.111.3",
"husky": "^3.1.0",
"jest": "^24.8.0",
"lint-staged": "^9.4.2",
"nodemon": "^2.0.2",
"prettier": "^1.19.1",
"rimraf": "^3.0.2",
"webpack": "^4.42.0"
}
}
The error you are getting is telling you that the path you are trying to delete from is read only. In GAE standard the paths you can write to are limited:
Java 8, Java 11, Node.js, Python 3.7, PHP 7.2, PHP 7.3, Ruby 2.5
(beta), Go 1.11, Go 1.12, and Go 1.13 have read and write access to
the /tmp directory.
You should handle your files in the /tmp directory or use App Engine Flex if you cannot do so.
I'm trying to run my tests in repo here: https://github.com/Futuratum/moon.holdings
But I'm getting the following error
/Users/leongaban/projects/Futuratum/moon.holdings/jest.config.js:1
(function (exports, require, module, __filename, __dirname) { import { configure } from 'enzyme'
My tests use to work and I haven't changed anything, so curious as to what could be causing this problem?
My jest.config.js file looks correct:
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() })
package.json
{
"name": "moon.holdings",
"version": "2.0.0",
"description": "Moon Holdings: track your cryptocurrency portfolio.",
"main": "index.js",
"scripts": {
"dev": "next -p 7777",
"build": "next build",
"start": "next -p 7777",
"test": "NODE_ENV=test jest --watch --no-cache",
"test-win": "SET NODE_ENV=test&& jest --watch"
},
"author": "Futuratum",
"license": "UNLICENSED",
"dependencies": {
"#zeit/next-sass": "^1.0.1",
"#zeit/next-typescript": "^1.1.1",
"axios": "^0.18.0",
"decko": "^1.2.0",
"next": "^8.0.4-canary.10",
"next-routes": "^1.4.2",
"node-sass": "^4.11.0",
"ramda": "^0.26.1",
"ramda-adjunct": "^2.17.0",
"react": "^16.7.0",
"react-adopt": "^0.6.0",
"react-dom": "^16.7.0",
"react-ga": "^2.5.7",
"react-redux": "^6.0.0",
"react-transition-group": "^2.5.0",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"styled-components": "4.0.3",
"tslint": "^5.12.1",
"tslint-react": "^3.6.0",
"typescript": "^3.2.4",
"waait": "^1.0.2"
},
"devDependencies": {
"#babel/plugin-proposal-decorators": "^7.3.0",
"#babel/preset-typescript": "^7.1.0",
"#types/enzyme": "^3.1.15",
"#types/jest": "^23.3.13",
"#types/next": "^7.0.6",
"#types/ramda": "^0.25.49",
"#types/react": "^16.7.20",
"#types/react-dom": "^16.0.11",
"#types/react-redux": "^7.0.1",
"#types/styled-components": "4.0.3",
"#types/zeit__next-typescript": "^0.1.1",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^24.1.0",
"babel-plugin-sass-vars": "^0.2.1",
"babel-plugin-styled-components": "^1.10.0",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"enzyme-to-json": "^3.3.4",
"jest": "^24.1.0"
},
"jest": {
"setupTestFrameworkScriptFile": "<rootDir>/jest.setup.js",
"testPathIgnorePatterns": [
"<rootDir>/.next/",
"<rootDir>/node_modules/"
],
"transform": {
".*": "babel-jest",
"^.+\\.js?$": "babel-jest",
"^.+\\.ts?$": "babel-jest",
"^.+\\.tsx?$": "babel-jest"
},
"moduleFileExtensions": [
"js",
"json",
"ts",
"tsx"
],
"modulePaths": [
"<rootDir>/components/",
"<rootDir>/pages/",
"<rootDir>/shared/"
]
}
}
Looks like you accidentally renamed jest.setup.js to jest.config.js in this commit.
Change it back to jest.setup.js and it should work.
Details
jest.config.js is a special file that is used to set Jest configuration options.
enzyme configuration is typically done in a setupTestFrameworkScriptFile file for older versions of Jest or setupFilesAfterEnv for newer versions of Jest.
Your package.json has setupTestFrameworkScriptFile set to jest.setup.js.
Based on that info I suspected that maybe jest.setup.js got accidentally renamed, and was able to find the commit where it happened in the repo history.
I have a VueJS app scaffolded with VueCLI 3 that I would like to deploy. The development version run with npm run serve works fine and everything works perfectly. But when running with npm run build and then serve -s dist I'm getting a plethora of errors. Some of those errors are:
Error: "Unable to find required dependency e"
TypeError: "this.userDataStorage is undefined"
TypeError: "this.user is undefined
Unhandled promise rejection TypeError: "t.auth is undefined"
It's like the dist package generated might be missing something, and I have no clue on what's wrong or what I might be missing. Any help to unblock this issue will be much appreciated. Maybe it could be one dependency (like vue-inject, which I use as IoC framework) could be the culprit?
Here are my packages.json and vue.config.js respectively:
{
"name": "myapp",
"description": "",
"keywords": [],
"version": "0.1.0",
"dependencies": {
"bootstrap": "3.3.2",
"d3": "^5.7.0",
"d3-gantt-chart": "^0.2.8",
"d3-layout-timeline": "^1.0.3",
"d3-transition": "^1.1.1",
"d3plus-text": "^0.9.32",
"foundation-sites": "^6.5.0-rc.3",
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.11",
"tinycolor": "latest",
"underscore": "^1.9.1",
"vue": "^2.5.17",
"vue-formio": "^3.0.1",
"vue-inject": "^2.1.1",
"vue-router": "^3.0.1",
"vue-slider-component": "^2.8.0",
"vuejs-datepicker": "^1.5.3",
"vuex": "^3.1.0",
"what-input": "^5.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.3.0",
"#vue/cli-plugin-e2e-nightwatch": "^3.3.0",
"#vue/cli-plugin-eslint": "^3.3.0",
"#vue/cli-plugin-unit-jest": "^3.3.0",
"#vue/cli-service": "^3.3.1",
"#vue/eslint-config-prettier": "^4.0.1",
"#vue/test-utils": "^1.0.0-beta.28",
"ajv": "^6.5.3",
"axios": "^0.18.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"babel-runtime": "^6.26.0",
"bootstrap-sass": "^3.3.7",
"css-loader": "^1.0.1",
"eslint": "^5.12.1",
"eslint-config-prettier": "^3.6.0",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-html": "^5.0.0",
"eslint-plugin-import": "^2.15.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.1.0",
"husky": "^1.3.1",
"lint-staged": "^8.1.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"script-loader": "^0.7.2",
"stylelint": "^9.10.1",
"stylelint-config-sass-guidelines": "^5.3.0",
"stylelint-config-standard": "^18.2.0",
"vue-drag-drop": "^1.1.4",
"vue-hot-reload-api": "^2.3.0",
"vue-template-compiler": "^2.5.17",
"vue2-dropzone": "^3.5.2"
},
"author": "devops#myapp.io",
"contributors": [],
"license": "Unlicense",
"readmeFilename": "Readme.md",
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"vue-cli-service lint",
"git add"
],
"*.vue": [
"vue-cli-service lint",
"git add"
],
"*.css": [
"stylelint --fix",
"git add"
],
"*.scss": [
"stylelint --syntax=scss",
"git add"
]
}
}
var webpack = require("webpack");
var path = require("path");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery"
})
],
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
jquery: "jquery/src/jquery.js",
"jquery-ui": "jquery-ui",
d3: "d3",
modules: path.join(__dirname, "node_modules")
}
}
}
};