the context is the following: I am learning unit testing using Jest. My current enviroment is Jest with Webpack as I am using ES6 Modules. In my current project, I'm only testing JavaScript logic, not the UI. Ideally, Jest would skip over my imported files and only test functions in my current file. The test suite was working as expected, until I imported a DOM rendering file into my main JS file (import './display.js'). I see this error in every test I run.
import './display.js';
import './style.css';
import {pubSub, ps} from './subscriptions.js';
import {Gameboard, tiles} from './gameboard.js'
If I don't add import './display.js', I get this error:
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
I did try installing jsdom as well, but nothing happens.
I also tried adding './display.js' to an excluded files list in my package.json, but that didn't work either.
I used:
collectCoverageFrom: ['!src/display.js']
This is my package.json:
{
"name": "battleship",
"jest": {
"collectCoverageFrom": [
"!src/display.js"
]
},
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "jest --coverage",
"build": "webpack",
"watch": "jest --watch *.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/itsaflamingo/Battleship.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/itsaflamingo/Battleship/issues"
},
"homepage": "https://github.com/itsaflamingo/Battleship#readme",
"devDependencies": {
"#babel/preset-env": "^7.18.6",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"jest": "^28.1.2",
"style-loader": "^3.3.1",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0"
},
"dependencies": {
"acorn": "^8.7.1",
"acorn-import-assertions": "^1.8.0",
"ajv": "^6.12.6",
"ajv-keywords": "^3.5.2",
"ansi-regex": "^5.0.1",
"boolbase": "^1.0.0",
"browserslist": "^4.21.1",
"buffer-from": "^1.1.2",
"camel-case": "^4.1.2",
"caniuse-lite": "^1.0.30001361",
"chrome-trace-event": "^1.0.3",
"clean-css": "^5.3.0",
"clone-deep": "^4.0.1",
"colorette": "^2.0.19",
"commander": "^2.20.3",
"cross-spawn": "^7.0.3",
"css-select": "^4.3.0",
"css-what": "^6.1.0",
"cssesc": "^3.0.0",
"dom-converter": "^0.2.0",
"dom-serializer": "^1.4.1",
"domelementtype": "^2.3.0",
"domhandler": "^4.3.1",
"domutils": "^2.8.0",
"dot-case": "^3.0.4",
"electron-to-chromium": "^1.4.173",
"enhanced-resolve": "^5.10.0",
"entities": "^2.2.0",
"envinfo": "^7.8.1",
"es-module-lexer": "^0.9.3",
"escalade": "^3.1.1",
"eslint-scope": "^5.1.1",
"esrecurse": "^4.3.0",
"estraverse": "^4.3.0",
"events": "^3.3.0",
"fast-deep-equal": "^3.1.3",
"fast-json-stable-stringify": "^2.1.0",
"fastest-levenshtein": "^1.0.12",
"find-up": "^4.1.0",
"function-bind": "^1.1.1",
"glob-to-regexp": "^0.4.1",
"graceful-fs": "^4.2.10",
"has": "^1.0.3",
"has-flag": "^4.0.0",
"he": "^1.2.0",
"html-minifier-terser": "^6.1.0",
"htmlparser2": "^6.1.0",
"icss-utils": "^5.1.0",
"import-local": "^3.1.0",
"interpret": "^2.2.0",
"is-core-module": "^2.9.0",
"is-plain-object": "^2.0.4",
"isexe": "^2.0.0",
"isobject": "^3.0.1",
"jest-worker": "^27.5.1",
"jsdom": "^20.0.0",
"json-parse-even-better-errors": "^2.3.1",
"json-schema-traverse": "^0.4.1",
"kind-of": "^6.0.3",
"loader-runner": "^4.3.0",
"locate-path": "^5.0.0",
"lodash": "^4.17.21",
"lower-case": "^2.0.2",
"lru-cache": "^6.0.0",
"merge-stream": "^2.0.0",
"mime-db": "^1.52.0",
"mime-types": "^2.1.35",
"nanoid": "^3.3.4",
"neo-async": "^2.6.2",
"no-case": "^3.0.4",
"node-releases": "^2.0.5",
"nth-check": "^2.1.1",
"p-limit": "^2.3.0",
"p-locate": "^4.1.0",
"p-try": "^2.2.0",
"param-case": "^3.0.4",
"pascal-case": "^3.1.2",
"path-exists": "^4.0.0",
"path-key": "^3.1.1",
"path-parse": "^1.0.7",
"picocolors": "^1.0.0",
"pkg-dir": "^4.2.0",
"postcss": "^8.4.14",
"postcss-modules-extract-imports": "^3.0.0",
"postcss-modules-local-by-default": "^4.0.0",
"postcss-modules-scope": "^3.0.0",
"postcss-modules-values": "^4.0.0",
"postcss-selector-parser": "^6.0.10",
"postcss-value-parser": "^4.2.0",
"pretty-error": "^4.0.0",
"punycode": "^2.1.1",
"randombytes": "^2.1.0",
"rechoir": "^0.7.1",
"relateurl": "^0.2.7",
"renderkid": "^3.0.0",
"resolve": "^1.22.1",
"resolve-cwd": "^3.0.0",
"resolve-from": "^5.0.0",
"safe-buffer": "^5.2.1",
"schema-utils": "^3.1.1",
"semver": "^7.3.7",
"serialize-javascript": "^6.0.0",
"shallow-clone": "^3.0.1",
"shebang-command": "^2.0.0",
"shebang-regex": "^3.0.0",
"source-map": "^0.6.1",
"source-map-js": "^1.0.2",
"source-map-support": "^0.5.21",
"strip-ansi": "^6.0.1",
"supports-color": "^8.1.1",
"supports-preserve-symlinks-flag": "^1.0.0",
"tapable": "^2.2.1",
"terser": "^5.14.1",
"terser-webpack-plugin": "^5.3.3",
"tslib": "^2.4.0",
"update-browserslist-db": "^1.0.4",
"uri-js": "^4.4.1",
"util-deprecate": "^1.0.2",
"utila": "^0.4.0",
"watchpack": "^2.4.0",
"webpack-merge": "^5.8.0",
"webpack-sources": "^3.2.3",
"which": "^2.0.2",
"wildcard": "^2.0.0",
"yallist": "^4.0.0"
},
"keywords": []
}
This is my webpack.config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
print: './src/print.js',
display: './src/display.js',
subscriptions: './src/subscriptions.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Battleship',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};
This is the test I am running for index.js:
import {Ship, Players, playerBoats} from './index';
test('factory function returns object', () => {
expect(Ship('Carrier', 5)).toMatchObject({
boatName: 'Carrier',
length: 5,
hitSpot: [],
sunk: false,
});
})
test('when hit, factory function returns modified object', () => {
expect(Ship('Destroyer', 2).isHit(1, playerBoats)).toMatchObject({
boatName: 'Destroyer',
coordinates: [],
length: 2,
hitSpot: [1],
sunk: false,
});
})
test('player can attack computer multiple times', () => {
expect(Players().Player().playerAttack(4)).toMatchObject({
boatName: 'Carrier',
coordinates: [2, 3, 4],
length: 5,
hitSpot: [2, 4],
sunk: false,
})
})
I am running Linux on Chromebook and using VS Code, I'm not sure if that makes a difference. I just want to be able to skip UI tests with Jest.
Came back to answer as I struggled with this for a while. My issue was that I was not separating my UI and logic, and jest does not accept DOM methods or selectors unless specified.
Related
I'm trying to integrate with the coinbase pay sdk. I've created a button using their examples, however when trying to build I'm getting an issue Internal to their SDK
When trying to build my code I get an error internal to the `#coinbase/cbpay-js sdk
./node_modules/#coinbase/cbpay-js/dist/index.mjs 135:34 Module parse
failed: Unexpected token (135:34) File was processed with these
loaders: * ./node_modules/babel-loader/lib/index.js You may need an
additional loader to handle the result of these loaders. | var
isMobileSdkTarget = /* #PURE */__name(win => { | try {
return win.ReactNativeWebView?.postMessage !== void 0; | } catch { | return false;
This is my package.json:
{
"name": "React App",
"version": "0.1.0",
"private": true,
"devDependencies": {
"#arkane-network/web3-arkane-provider": "^0.23.0",
"#ethersproject/experimental": "^5.4.0",
"#gelatonetwork/limit-orders-react": "^2.4.0",
"#gnosis.pm/safe-apps-sdk": "^4.0.0",
"#reduxjs/toolkit": "^1.3.5",
"#transak/transak-sdk": "^1.0.28",
"#types/jest": "^25.2.1",
"#types/lodash.flatmap": "^4.5.6",
"#types/multicodec": "^1.0.0",
"#types/node": "^13.13.5",
"#types/qs": "^6.9.2",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"#types/react-redux": "^7.1.8",
"#types/react-router-dom": "^5.1.8",
"#types/react-slick": "^0.23.7",
"#types/react-virtualized-auto-sizer": "^1.0.1",
"#types/react-window": "^1.8.5",
"#types/styled-components": "^5.1.15",
"#types/testing-library__cypress": "^5.0.5",
"#typescript-eslint/eslint-plugin": "^5.3.1",
"#typescript-eslint/parser": "^5.3.1",
"#uniswap/governance": "^1.0.2",
"#uniswap/liquidity-staker": "^1.0.2",
"#uniswap/merkle-distributor": "1.0.1",
"#uniswap/sdk": "npm:quickswap-sdk#3.0.8",
"#uniswap/token-lists": "npm:quickswap-token-lists#1.0.1",
"#uniswap/v2-core": "1.0.0",
"#uniswap/v2-periphery": "^1.1.0-beta.0",
"#web3-react/core": "6.0.9",
"#web3-react/injected-connector": "6.0.7",
"#web3-react/ledger-connector": "6.1.9",
"#web3-react/portis-connector": "6.0.9",
"#web3-react/walletconnect-connector": "6.2.4",
"#web3-react/walletlink-connector": "6.2.3",
"ajv": "^6.12.3",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link-http": "^1.5.17",
"cids": "^1.1.9",
"copy-to-clipboard": "^3.2.0",
"cypress": "^7.7.0",
"eslint": "^7.11.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^4.0.0",
"ethers": "^5.0.7",
"fortmatic": "^2.2.1",
"graphql": "^15.5.1",
"graphql-tag": "^2.12.5",
"hamburger-react": "^2.4.1",
"i18next": "^20.4.0",
"i18next-browser-languagedetector": "^6.1.2",
"ipfs-deploy": "^11.1.0",
"lodash.flatmap": "^4.5.0",
"multicodec": "^3.0.1",
"multihashes": "^3.0.1",
"polished": "^3.3.2",
"prettier": "^1.17.0",
"qs": "^6.9.4",
"react": "^17.0.2",
"react-app-rewired": "^2.1.8",
"react-device-detect": "^1.6.2",
"react-dom": "^17.0.2",
"react-feather": "^2.0.8",
"react-i18next": "^11.11.4",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-virtualized-auto-sizer": "^1.0.6",
"react-window": "^1.8.6",
"redux-localstorage-simple": "^2.4.1",
"serve": "^11.3.2",
"source-map-explorer": "^2.5.2",
"start-server-and-test": "^1.11.0",
"typescript": "^4.1.2",
"web3": "^1.7.0"
},
"resolutions": {
"yargs-parser": "^13.1.2",
"underscore": "^1.12.1",
"lodash": "^4.17.21",
"trim-newlines": "^3.0.1",
"nth-check": "^2.0.1",
"node-fetch": "^2.6.7",
"follow-redirects": "^1.14.8",
"axios": "^0.21.2",
"immer": "^9.0.6",
"ansi-html": "^0.0.8",
"node-forge": "^1.3.0",
"glob-parent": "^5.1.2",
"browserslist": "^4.16.5",
"ajv": "^6.12.3",
"async": "^3.2.2",
"ejs": "^3.1.7",
"cross-fetch": "^3.1.5",
"eventsource": "^2.0.2",
"protobufjs": "^6.11.3",
"shell-quote": "^1.7.3",
"terser": "^4.8.1",
"got": "^11.8.5",
"jpeg-js": "^0.4.4"
},
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
"start": "react-app-rewired start",
"build": "CI=false react-app-rewired --max_old_space_size=4096 build",
"test": "react-app-rewired test --env=jsdom",
"format": "prettier --write \"**/*.{ts,js,tsx,json,md}\"",
"eject": "react-scripts eject",
"integration-test": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run'",
"ipfs-deploy": "ipfs-deploy build"
},
"eslintConfig": {
"extends": "react-app",
"ignorePatterns": [
"node_modules"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"license": "GPL-3.0-or-later",
"dependencies": {
"#coinbase/cbpay-js": "^1.6.0",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.60",
"apexcharts": "3.32.1",
"i18next-http-backend": "^1.4.1",
"market-sdk": "^2.2.0",
"react-apexcharts": "1.3.9",
"react-cool-inview": "^2.0.8",
"react-ga": "^3.3.0",
"react-query": "^3.34.19",
"react-reflex": "^4.0.6",
"react-slick": "^0.28.1",
"react-virtuoso": "^2.8.4",
"sass": "^1.51.0",
"slick-carousel": "^1.8.1",
"styled-components": "^5.3.3"
}
}
Edit: Configuration Overrides:
const {paths} = require('react-app-rewired');
// load environment variables from .env files
// before overrides scripts are read
require(paths.scriptVersion + '/config/env');
const override = require(paths.configOverrides);
const webpack = typeof override === 'function'
? override
: override.webpack || ((config, env) => config);
if (override.devserver) {
console.log(
'Warning: `devserver` has been deprecated. Please use `devServer` instead as ' +
'`devserver` will not be used in the next major release.'
)
}
const devServer = override.devServer || override.devserver
|| ((configFunction) =>
(proxy, allowedHost) =>
configFunction(proxy, allowedHost));
const jest = override.jest || ((config) => config);
const pathsOverride = override.paths || ((paths, env) => paths);
// normalized overrides functions
module.exports = {
webpack,
devServer,
jest,
paths: pathsOverride
};
I'm guessing I'm missing a dependecy for a babel loader or something, but I'm not sure how to figure out which one I need?
Because the node-sass have a big install problem and compatible problem, I do not want to use node-sass, prefer to use dart sass in my project. But when I use the sass-loader like this:
"sass-loader": "7.0.0",
shows that:
ERROR in ./node_modules/sass-loader/lib/loader.js!./node_modules/css-loader?sourceMap!./node_modules/sass-loader/lib/loader.js?sourceMap!./src/public/widget/style.scss
Module build failed: Error: `sass-loader` requires `node-sass` >=4. Please install a compatible version.
at Object.sassLoader (/Users/xiaoqiangjiang/source/reddwarf/frontend/crx-selection-translate/node_modules/sass-loader/lib/loader.js:31:19)
# ./node_modules/style-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/css-loader?sourceMap!./node_modules/sass-loader/lib/loader.js?sourceMap!./src/public/widget/style.scss 4:14-197
what should I do to let the sass-loader ignore the node sass and use dart sass? I do not want to use node sass, it waste too much time to handle the install and compatible problem. BTW, this is my project package.json content:
{
"private": true,
"repository": {
"type": "git",
"url": "git+https://github.com/jiangxiaoqiang/crx-selection-translate.git"
},
"scripts": {
"xpostinstall": "node ./build/install-pdf-viewer",
"dev": "webpack --config build/webpack.dev.config.js",
"build": "gulp --cwd . --gulpfile build/gulp-build.js",
"test": "karma start build/karma.config.js"
},
"dependencies": {
"bootstrap-sass": "^3.4.1",
"chrome-call": "^1.0.2",
"connect.io": "^3.1.3",
"interact.js": "^1.2.6",
"js-wheel": "https://github.com/jiangxiaoqiang/js-wheel.git",
"translation.js": "github:jiangxiaoqiang/translation.js",
"vue": "^1.0.24",
"vue-router": "^0.7.11"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-3": "^6.5.0",
"chrome-env": "^0.0.6",
"css-loader": "^0.23.1",
"del": "^2.2.0",
"download": "^5.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^0.8.5",
"fs-extra": "^8.1.0",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.3.2",
"gulp-htmlmin": "^2.0.0",
"gulp-jsonmin": "^1.2.0",
"gulp-uglify": "^1.5.3",
"gulp-zip": "^3.2.0",
"isparta-loader": "^2.0.0",
"jasmine-core": "^2.99.1",
"karma": "^6.3.11",
"karma-chrome-launcher": "^1.0.1",
"karma-coverage": "^2.1.0",
"karma-coveralls": "^2.1.0",
"karma-firefox-launcher": "^1.3.0",
"karma-ie-launcher": "^1.0.0",
"karma-jasmine": "^1.1.2",
"karma-phantomjs-launcher": "^1.0.0",
"karma-safari-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.8",
"karma-webpack": "^1.7.0",
"phantomjs-prebuilt": "^2.1.6",
"raw-loader": "^0.5.1",
"sass": "1.48.0",
"sass-loader": "7.0.0",
"style-loader": "^0.13.0",
"vue-html-loader": "^1.2.0",
"webpack": "^3.12.0",
"webpack-cli": "^4.9.1"
},
"author": "Jiangxiaoqiang <jiangtingqiang#gmail.com>",
"license": "GPLv3",
"bugs": {
"url": "https://github.com/jiangxiaoqiang/crx-selection-translate/issues"
},
"homepage": "https://github.com/jiangxiaoqiang/crx-selection-translate#readme"
}
any suggestion or clue was welcome. I tried to tweak the webpack config like this to specify the load-sass to use dart sass not node sass:
{
test : /\.scss$/ ,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
},
},
]
}
still did not work.
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'm trying to build a vue application using SocketIO. The first error I get on compiling ( fs not found ) is already fixed with adding: node: { fs: 'empty' } to my webpack.base.conf.js file.
But I have no idea how to fix the second error:
ERROR Failed to compile with 1 errors
This dependency was not found:
* uws in ./node_modules/engine.io/lib/server.js
import io from 'socket.io-client'
If you don't add "-client", you are using the server component. This won't work, as there is no "fs" on the browser, just on nodejs side.
To get typescript import to work, you need npm install of
#types/socket.io-client
Update:
Seems, that uws is not required for the client side. I could remove uws without running into errors. Will recheck that, if required...
Seems uws package version has been deprecated, see here
You can install other stable versions. Try below
$ rm -rf ./node_modules/uws
$ npm install uws#10.148.1 --save
Update 1
New versions with slightly different goal and purpose are available at https://github.com/uNetworking/uWebSockets.js
Use of old releases is not recommended due to known bugs and problems.
package.json :
{
"name": "chat",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit/specs"
},
"dependencies": {
"fs": "0.0.1-security",
"socket.io": "^2.1.1",
"socket.io-client": "^2.1.1",
"uws": "^10.148.1",
"vue": "^2.5.2",
"vue-material": "^1.0.0-beta-10.2",
"vue-router": "^3.0.1",
"vue-socket.io": "^2.1.1-b"
},
"devDependencies": {
"autoprefixer": "^7.1.5",
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.1",
"babel-loader": "^7.1.2",
"babel-plugin-istanbul": "^4.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"chai": "^4.1.2",
"chalk": "^2.1.0",
"connect-history-api-fallback": "^1.4.0",
"copy-webpack-plugin": "^4.1.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"cssnano": "^3.10.0",
"eslint": "^4.9.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "^3.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.3",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.5",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.17.4",
"inject-loader": "^3.0.1",
"karma": "^1.7.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-phantomjs-shim": "^1.5.0",
"karma-sinon-chai": "^1.3.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.5",
"mocha": "^4.0.1",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.3.0",
"phantomjs-prebuilt": "^2.1.15",
"rimraf": "^2.6.2",
"semver": "^5.4.1",
"shelljs": "^0.7.8",
"sinon": "^4.0.1",
"sinon-chai": "^2.14.0",
"sw-precache-webpack-plugin": "^0.11.4",
"uglify-es": "^3.1.3",
"url-loader": "^0.6.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.7.1",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.19.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
There is not much code yet. The last things i added was that:
<script>
export default {
data () {
return {
isConnected: false,
socketMessage: ''
}
},
sockets: {
connect () {
// Fired when the socket connects.
this.isConnected = true
},
disconnect () {
this.isConnected = false
},
// Fired when the server sends something on the "messageChannel" channel.
messageChannel (data) {
this.socketMessage = data
}
},
methods: {
pingServer () {
// Send the "pingServer" event to the server.
this.$socket.emit('pingServer', 'PING!')
}
}
}
</script>
After adding that I got all the errors.
I'm having lots of trouble getting the webpack DLL plugin to work for me. It's work in the sense that the dll is being extracted, and the other bundle sizes are reducing, however when run in the browser I get the following error:
module.js from dll-reference [name]:1 Uncaught TypeError: __webpack_require__(...) is not a function
at Object.../node_modules/webpack/buildin/module.js (module.js from dll-reference [name]:1)
at __webpack_require__ (bootstrap dff23196bbd9943d1e33:678)
at fn (bootstrap dff23196bbd9943d1e33:88)
at Object.../node_modules/node-libs-browser/node_modules/punycode/punycode.js (punycode.js:533)
at __webpack_require__ (bootstrap dff23196bbd9943d1e33:678)
at fn (bootstrap dff23196bbd9943d1e33:88)
at Object.../node_modules/url/url.js (url.js:24)
at __webpack_require__ (bootstrap dff23196bbd9943d1e33:678)
at fn (bootstrap dff23196bbd9943d1e33:88)
at Object.<anonymous> (client:6)
My config seems to be correct according to the docs and people on SO / github who have had the same error message.
webpack.development.js:
let fs = require('fs')
let path = require('path')
let webpack = require('webpack')
const { extractLegacy, extractModules } = require('./extract-text')
let defaultConfig = require('./webpack')
module.exports = Object.assign({}, defaultConfig, {
cache: true,
devtool: '#source-map',
entry: Object.assign(defaultConfig.entry, {
'webpack-dev-server/hot/client?https://app.local.app:8080/':
'webpack-dev-server/client?https://app.local.app:8080/',
'dll.vendor': '../build/dll.vendor.js'
}),
devServer: {
hot: true,
inline: true,
disableHostCheck: true,
host: 'app.local',
headers: { 'Access-Control-Allow-Origin': '*' },
https: {
key: fs.readFileSync(path.join(__dirname, '../l ocalssl/server.key')),
cert: fs.readFileSync(path.join(__dirname, '../localssl/server.crt'))
},
stats: {
cached: false,
cachedAssets: false,
children: false,
chunks: false,
chunkModules: false,
chunkOrigins: false,
depth: false,
errors: true,
errorDetails: true,
hash: false,
maxModules: 0,
modules: false,
providedExports: false,
reasons: false,
source: false,
timings: false,
usedExports: false
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
}),
extractLegacy,
extractModules,
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new webpack.DllReferencePlugin({
manifest: require('../build/vendor.json'),
name: '[name]',
context: path.resolve(__dirname, '../')
})
]})
webpack.dll.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: {
vendor: [path.resolve(__dirname, './vendors.js')]
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: ['babel-loader?cacheDirectory']
}
]
},
output: {
path: path.resolve(__dirname, '../build'),
filename: 'dll.[name].js',
library: '[name]'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '../build', '[name].json'),
name: '[name]'
})
],
resolve: {
modules: ['node_modules']
}
}
package.json
{
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"dependencies": {
"#heroku/foreman": "^2.0.2",
"adm-zip": "^0.4.7",
"amqplib": "^0.5.2",
"autoprefixer": "7.1.3",
"aws-sdk": "^2.104.0",
"babel-cli": "6.16.0",
"babel-eslint": "^7.2.3",
"babel-loader": "6.2.5",
"babel-plugin-flow-react-proptypes": "^5.1.2",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-recharts": "1.1.0",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.22.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "6.16.0",
"babel-preset-es2015-node": "^6.1.1",
"babel-preset-react": "6.16.0",
"basic-auth": "1.1.0",
"bcrypt": "^1.0.3",
"body-parser": "1.17.2",
"bookshelf": "0.10.4",
"bookshelf-cascade-delete": "2.0.1",
"bookshelf-paranoia": "0.9.0",
"bootstrap": "3.3.7",
"bunyan": "1.8.10",
"bunyan-middleware": "0.4.0",
"change-case": "3.0.1",
"cheerio": "^1.0.0-rc.2",
"classnames": "2.2.5",
"compression": "1.7.0",
"connect-flash": "0.1.1",
"connect-redis": "3.3.0",
"cookie-parser": "^1.4.3",
"cookies-js": "^1.2.3",
"cron": "1.2.1",
"css-loader": "0.28.4",
"csvtojson": "^1.1.7",
"date-holidays": "^1.2.0",
"deep-equal": "^1.0.1",
"deep-freeze": "^0.0.1",
"deserialize-error": "^0.0.3",
"draft-convert": "^1.4.8",
"draft-extend": "^1.5.0",
"draft-js": "^0.10.1",
"elasticsearch": "^13.0.1",
"email-templates": "^2.7.1",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-flow-vars": "^0.5.0",
"express": "4.16.0",
"express-request-id": "1.4.0",
"express-session": "1.15.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"flow": "^0.2.3",
"forever": "^0.15.3",
"helmet": "3.8.0",
"http-errors": "1.6.1",
"ignore-styles": "^5.0.1",
"immutable": "^3.8.1",
"isomorphic-fetch": "2.2.1",
"jackrabbit": "git+https://github.com/leonlau/jackrabbit.git#da554347132757cd81c39037dd527ee258d088b5",
"jsdom": "^11.5.1",
"json-loader": "0.5.4",
"json2csv": "^3.7.3",
"knex": "0.13.0",
"knex-migrate": "^1.3.0",
"less": "2.7.1",
"less-loader": "2.2.3",
"lodash": "4.16.4",
"md5": "^2.2.1",
"microtime-nodejs": "^1.0.0",
"moment": "2.15.2",
"moment-range": "^2.2.0",
"mongo": "0.1.0",
"mongodb": "2.2.11",
"nconf": "0.8.4",
"newrelic": "^2.6.0",
"node-sass": "^4.5.3",
"normalizr": "^3.2.1",
"numeral": "^2.0.6",
"oauth": "git+https://github.com/Dakuan/node-oauth.git#24bc9bec128b5ca718eb5cd6e319cd22129a5158",
"oauth2-server": "^2.4.1",
"ordinal-numbers": "^1.0.3",
"pdfmake": "^0.1.32",
"pg": "6.1.6",
"pg-hstore": "2.3.2",
"pluralize": "^7.0.0",
"postcss": "6.0.10",
"postcss-loader": "1.1.1",
"prettyjson": "^1.2.1",
"proxyquire": "^1.7.11",
"pug": "2.0.0-beta6",
"quill": "^1.3.1",
"react": "^15.4.1",
"react-addons-perf": "^15.4.2",
"react-autosize-textarea": "^0.4.4",
"react-datepicker": "^0.40.0",
"react-dom": "^15.6.1",
"react-joyride": "^1.10.1",
"react-redux": "4.4.5",
"react-router": "2.8.1",
"react-router-redux": "4.0.7",
"react-scroll": "^1.5.5",
"react-scrollbar": "^0.5.1",
"react-slick": "^0.15.0",
"react-slider": "^0.7.0",
"react-sparklines": "^1.6.0",
"react-stripe-elements": "^1.0.1",
"react-table": "^6.6.0",
"react-textarea-autosize": "^5.0.6",
"react-toggle": "^4.0.2",
"react-tooltip": "^3.2.10",
"recharts": "^1.0.0-beta.1",
"recompose": "^0.24.0",
"redfour": "^1.0.2",
"redis": "2.6.3",
"redux": "3.6.0",
"redux-devtools-extension": "^1.0.0",
"redux-form": "^7.1.1",
"redux-logger": "2.7.0",
"redux-saga": "^0.16.0",
"redux-saga-test-plan": "^3.3.1",
"redux-thunk": "2.1.0",
"request": "^2.78.0",
"request-promise": "^4.2.2",
"rewire": "^2.5.2",
"s3": "^4.4.0",
"sass-loader": "^6.0.6",
"sendgrid": "4.7.1",
"serialize-error": "^2.1.0",
"simulant": "^0.2.2",
"snyk": "^1.41.1",
"soap": "^0.21.0",
"socket.io": "^2.0.2",
"socket.io-client": "^2.0.2",
"socket.io-cookie-parser": "^1.0.0",
"socket.io-redis": "^5.1.0",
"stripe": "^5.1.0",
"style-loader": "^0.19.1",
"url-loader": "0.5.7",
"url-parse": "^1.1.9",
"urlencode": "^1.1.0",
"uuid": "2.0.3",
"validate.js": "^0.11.1",
"velocity-animate": "^1.4.0",
"velocity-react": "^1.2.1",
"victory": "0.13.7",
"webpack": "^3.10.0",
"xml2json": "^0.11.0"
},
"devDependencies": {
"ava": "^0.24.0",
"babel-jest": "16.0.0",
"babel-register": "6.16.3",
"chromedriver": "^2.34.1",
"enzyme": "^2.7.0",
"eslint": "3.8.1",
"eslint-config-prettier": "2.9.0",
"eslint-plugin-flowtype": "^2.30.0",
"eslint-plugin-lodash-fp": "2.1.3",
"eslint-plugin-react": "6.4.1",
"fetch-mock": "5.5.0",
"flow-bin": "^0.57.2",
"husky": "^0.14.3",
"lint-staged": "^6.0.0",
"nightwatch": "^0.9.19",
"nock": "9.0.2",
"node-mocks-http": "^1.5.4",
"nodemon": "1.11.0",
"npm-run-all": "^4.1.1",
"nyc": "8.3.2",
"prettier": "1.9.2",
"ps-node": "^0.1.4",
"react-addons-test-utils": "^15.4.1",
"react-hot-loader": "3.0.0-beta.6",
"redux-mock-store": "^1.2.2",
"selenium-server-standalone-jar": "^3.8.1",
"sinon": "1.17.6",
"supertest": "2.0.1",
"webpack-dev-server": "^2.11.1",
"webpack-hot-middleware": "^2.21.0"
},
"ava": {
"require": [
"babel-register",
"babel-polyfill",
"ignore-styles"
],
"babel": "inherit"
},
"nyc": {
"extension": [
".jsx",
".js"
],
"include": [
"src"
],
"exclude": [
"tests",
"build",
"node_modules"
]
},
"engines": {
"node": "8.9.x",
"npm": "5.5.x",
"yarn": "1.3.2"
},
}
folder structure:
-- build
-- src
-- webpack