req.handle.writev is not a function - node.js

I'm using React, React-Redux with Webpack for my project in a Docker container and keep running into this error
internal/stream_base_commons.js:59 var err = req.handle.writev(req,
chunks, allBuffers);
^
TypeError: req.handle.writev is not a function
at writevGeneric (internal/stream_base_commons.js:59:24)
at Socket._writeGeneric (net.js:758:5)
at Socket._writev (net.js:767:8)
at doWrite (_stream_writable.js:408:12)
at clearBuffer (_stream_writable.js:517:5)
at Socket.Writable.uncork (_stream_writable.js:314:7)
at connectionCorkNT (_http_outgoing.js:646:8)
at process._tickCallback (internal/process/next_tick.js:63:19)
The following is my versions
NODE_VERSION 8.9
YARN_VERSION 1.7.0
OS Docker Linux/ Raspbian Lite
Webpack/ Webpack-Ddv-Server (latest)
React/ Redux (latest)
My package.json
{
....
"dependencies": {
"object-assign": "*",
"raf": "*",
"react": "*",
"react-dev-utils": "*",
"react-dom": "*",
"react-facebook-login": "*",
"react-helmet": "*",
"react-loadable": "*",
"react-slick": "*",
"react-router": "*",
"react-router-dom": "*",
"react-redux":"*",
"redux":"*",
"redux-thunk":"*",
"slick-carousel":"*",
"font-awesome":"*"
},
"devDependencies": {
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"autoprefixer": "7.1.6",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.1.1",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"node-sass-chokidar": "*",
"npm-run-all": "*",
"sass-loader": "*",
"sw-precache-webpack-plugin": "0.11.4",
"resolve": "1.6.0",
"style-loader": "0.19.0",
"url-loader": "0.6.2",
"webpack": "*",
"webpack-dev-server": "*",
"webpack-manifest-plugin": "*",
"whatwg-fetch": "2.0.3",
"chalk": "1.1.3",
"css-loader": "0.28.7",
"dotenv": "4.0.0",
"dotenv-expand": "4.2.0",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "*",
"fs-extra": "*",
"html-webpack-plugin": "*",
"jest": "20.0.4"
},
"scripts": {
"start-js": "node scripts/start.js",
"start": "npm-run-all -p watch-css start-js",
"build-js": "node scripts/build.js",
"build": "npm-run-all build-css build-js",
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
"test": "node scripts/test.js --env=jsdom",
"postinstall": "npm run start"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,mjs}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node",
"mjs"
]
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
Anyone else with this issue? Does not happen often but does frustrate the development process

I was getting this error on Windows 10 x64 on NodeJS version 10.13.0. I simply removed NodeJS version 10.13.0 and installed version 8.11.3 and restarted my machine and it was gone!

Anyone else with this issue? Yes...This problem is happening a lot with me and it is making me nervous, but usually, when it is happening I restart my computer and its gone!
For now, I think restarting the computer is the solution because I have searched too much for a solution, but I got zero results.

Delete node and do yarn install

Related

Jest SyntaxError: Unexpected token 'export' from node module

I've been having this issue with Jest. Jest is throwing an error pointing towards a dependency from within node_modules. Probably need to configure jest to support this syntax, because it can't parse it. But i'm not sure what for configurations.
I've tried to add transformIgnorePatterns in the jest.config.ts file with no luck,
"node_modules/(?!(geotiff)/)"
Any help would be highly appreciated!
Details:
/Users/Documents/Project/node_modules/quick-lru/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export default class QuickLRU extends Map {
^^^^^^
SyntaxError: Unexpected token 'export'
at Runtime.createScriptFromCode (node_modules/jest-cli/node_modules/jest-runtime/build/index.js:1796:14)
at Object.<anonymous> (node_modules/geotiff/dist-module/source/blockedsource.js:1:1)
This is the jest.config.ts
// jest.config.ts
import type {Config} from "#jest/types";
const config : Config.InitialOptions = {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!**/*.d.ts"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.ts"
],
"testMatch": [
"<rootDir>/src/**/*.(test).{js,jsx,ts,tsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
],
"testEnvironment": "node",
"testEnvironmentOptions": {
"url" : "http://localhost"
},
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.tsx?$": "<rootDir>/config/jest/typescriptTransform.js",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
},
"transformIgnorePatterns": [
"node_modules/(?!(geotiff)/)"
],
"moduleFileExtensions": [
"web.ts",
"ts",
"web.tsx",
"tsx",
"web.js",
"js",
"web.jsx",
"jsx",
"json",
"node",
"mjs"
],
"globals": {
"ts-jest": {
"tsconfig": "./tsconfig.test.json"
}
},
"modulePaths": [
"<rootDir>/src/"
]
};
this is the package.json file
{
"name": "Project",
"version": "1",
"private": true,
"homepage": ".",
"files": [
"build/**/*"
],
"engines": {
"node": ">=16.14.0",
"npm": ">=8.11.0"
},
"repository": {
"type": "git",
"url": "ssh://Project},
"resolutions": {
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2"
},
"scripts": {
"build-css": "sass --style=compressed -I ./src -I ./node_modules src/:src/",
"watch-css": "npm run build-css && sass -I ./src -I ./node_modules src/:/src --watch",
"start-js": "node scripts/start.js",
"start": "npm-run-all -p watch-css start-js",
"debug": "npm-run-all -p --inspect=9227 watch-css start-js",
"prebuild": "cross-env CI=true npm run test --watchAll=false",
"build": "npm run build-css && node scripts/build.js",
"postbuild": "node scripts/zip.js",
"build-test": "npm run build-css node scripts/build.js",
"serve-build": "npm run serve -s build",
"test": "node scripts/test.js --env=jsdom",
"prepublishOnly": "npm run build",
"preversion": "CI=true npm run test",
"postinstall": "patch-package",
"lint": "./node_modules/.bin/ESLint -c .eslintrc.js -o ./lint.log"
},
"devDependencies": {
"#babel/cli": "^7.18.6",
"#babel/core": "^7.18.6",
"#babel/preset-env": "^7.18.6",
"#babel/preset-react": "^7.18.6",
"#babel/preset-typescript": "^7.18.6",
"#babel/runtime": "^7.18.6",
"#svgr/webpack": "^6.2.1",
"#turf/turf": "^6.4.0",
"#types/classnames": "^2.3.1",
"#types/enzyme": "^3.10.12",
"#types/jest": "^28.1.3",
"#types/node": "^18.0.0",
"#types/react": "^17.0.39",
"#types/react-autocomplete": "^1.8.6",
"#types/react-autosuggest": "^10.1.5",
"#types/react-beautiful-dnd": "^13.1.2",
"#types/react-highlight": "^0.12.5",
"#types/react-router-dom": "^5.3.3",
"#types/uuid": "^8.3.4",
"#typescript-eslint/parser": "^5.30.0",
"#wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
"adm-zip": "^0.5.9",
"autoprefixer": "10.4.7",
"awesome-typescript-loader": "^5.2.1",
"axios": "^0.27.2",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^28.1.1",
"babel-loader": "^8.2.2",
"babel-preset-react-app": "10.0.1",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"chalk": "5.0.1",
"classnames": "~2.2.6",
"core-js": "^3.6.5",
"cross-env": "^5.2.1",
"css-loader": "^6.7.1",
"dotenv": "16.0.1",
"enzyme": "^3.11.0",
"eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-jsdoc": "^39.3.3",
"eslint-plugin-prefer-arrow": "^1.2.3",
"eslint-plugin-react": "^7.22.0",
"eslint-webpack-plugin": "^3.2.0",
"file-loader": "^6.1.1",
"fork-ts-checker-webpack-plugin": "^7.2.11",
"fs-extra": "10.1.0",
"geotiff": "^2.0.5",
"html-webpack-injector": "^1.1.4",
"html-webpack-plugin": "^5.5.0",
"jest": "^28.1.1",
"jest-canvas-mock": "^2.4.0",
"jest-environment-jsdom": "^28.1.1",
"joi-browser": "^13.4.0",
"mini-css-extract-plugin": "^2.6.1",
"neo-async": "^2.6.2",
"npm-run-all": "^4.1.3",
"object-assign": "^4.1.1",
"ol": "~6.14.1",
"ol-ext": "^3.2.26",
"patch-package": "^6.2.2",
"proj4": "^2.5.0",
"promise": "^8.0.1",
"raf": "^3.4.0",
"react": "^17.0.2",
"react-app-polyfill": "^3.0.0",
"react-autocomplete": "^1.8.1",
"react-autosuggest": "^10.1.0",
"react-beautiful-dnd": "^13.1.0",
"react-dev-utils": "^12.0.0",
"react-docgen-typescript-webpack-plugin": "^1.1.0",
"react-dom": "^17.0.2",
"react-highlight": "^0.14.0",
"react-redux": "^8.0.2",
"react-scripts": "^5.0.0",
"redux": "^4.0.5",
"redux-mock-store": "^1.5.4",
"redux-thunk": "^2.3.0",
"resolve": "^1.6.0",
"sass": "^1.49.9",
"serve": "^13.0.2",
"sneakpeek-cli": "^0.2.1",
"source-map-loader": "^4.0.0",
"swiper": "^6.8.4",
"ts-jest": "^28.0.5",
"ts-loader": "^9.3.1",
"ts-node": "^10.8.1",
"tsconfig-paths-webpack-plugin": "^3.5.1",
"typescript": "^4.7.4",
"url-loader": "^4.1.1",
"uuid": "^7.0.3",
"webpack": "~5.73.0",
"webpack-dev-server": "^4.9.2",
"webpack-manifest-plugin": "^5.0.0"
},
}

Unable to add typescript to a react project

I'm trying to add typescript to a existing react project but I'm getting an error when re-starting the server with npm start.
I'm following the steps from this documentation but I'm getting an error message:
The only thing I might not have right is the react.scripts versions. Here is a copy of the results thrown by npm outdated:
Also, I checked my dependencies and everything seems to be normal.
Things I have done:
run npm update to update all react related packages
I have deleted the node files and re install them with npm install
I have renamed other files to .tsx including the index.js file but I get another error:
Really keen to move this project to the next level with typescript but I have been stack trying to get it to work. By the way, here are my dependencies too:
{
"name": "world-budget-react-v",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.34",
"#fortawesome/free-brands-svg-icons": "^5.15.2",
"#fortawesome/free-solid-svg-icons": "^5.15.2",
"#fortawesome/react-fontawesome": "^0.1.14",
"#types/jest": "^26.0.23",
"#types/node": "^15.0.2",
"#types/react": "^17.0.5",
"#types/react-dom": "^17.0.3",
"#types/react-redux": "^7.1.16",
"autoprefixer": "7.1.6",
"axios": "^0.21.1",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.1.2",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.7",
"dotenv": "4.0.0",
"dotenv-expand": "4.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"firebase": "^8.2.6",
"firebase-admin": "^9.4.2",
"firebase-functions": "^3.13.1",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"raf": "3.4.0",
"react": "^17.0.2",
"react-dev-utils": "^5.0.2",
"react-dom": "^17.0.2",
"react-gtm-module": "^2.0.11",
"react-redux": "^7.2.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scroll-restoration": "^1.0.6",
"react-test-renderer": "^17.0.1",
"redux": "^4.1.0",
"redux-thunk": "^2.3.0",
"resolve": "1.6.0",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"typescript": "^4.2.4",
"url-loader": "0.6.2",
"webpack": "3.8.1",
"webpack-dev-server": "2.11.3",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,mjs}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node",
"mjs"
]
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
Any recommendations? I hope I provided as much info as possible!
Lastly, I found this answer but not sure what they mean. Anyone keen to explain maybe Could not find a required file. - Adding TypeScript to React project
As per the react-scripts 2.10 you can add TypeScript to an existing project.
yarn add typescript #types/node #types/react #types/react-dom #types/jest --dev
Create a react-native app using : npx react-native init AwesomeProject
Once its up and running, follow this link to add typescript the right way.

How to get node packages up-to-date?

I've used a truffle react box to get an app working. npm install gives me lots of deprecation warnings, and alos that some packages need others that aren't installed. Is there a good way, or a place online, that can get my package.json file up to date? Since I'm really new to react, I think having missing packages is sure to cause a lot of lost time. Thank you.
package.json
{
"name": "someApp",
"version": "0.1.0",
"license": "MIT",
"private": true,
"repository": {
"type": "git",
"url": "some repo..."
},
"main": "src/index.js",
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom --watch"
},
"dependencies": {
"dotenv": "^2.0.0",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router-dom": "^4.3.1"
},
"devDependencies": {
"autoprefixer": "6.5.1",
"babel-core": "6.17.0",
"babel-eslint": "7.1.1",
"babel-jest": "17.0.2",
"babel-loader": "6.2.7",
"babel-preset-react-app": "^2.0.1",
"case-sensitive-paths-webpack-plugin": "1.1.4",
"chalk": "1.1.3",
"connect-history-api-fallback": "1.3.0",
"cross-spawn": "4.0.2",
"css-loader": "0.26.0",
"debug": "^3.1.0",
"detect-port": "1.0.1",
"eslint": "3.8.1",
"eslint-config-react-app": "^0.5.0",
"eslint-loader": "1.6.0",
"eslint-plugin-flowtype": "2.21.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-jsx-a11y": "2.2.3",
"eslint-plugin-react": "6.4.1",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.9.0",
"filesize": "3.3.0",
"fs-extra": "0.30.0",
"growl": "^1.10.2",
"gzip-size": "3.0.0",
"html-webpack-plugin": "2.24.0",
"http-proxy-middleware": "0.17.2",
"jest": "19.0.1",
"json-loader": "0.5.4",
"minimatch": "^3.0.2",
"object-assign": "4.1.0",
"openzeppelin-solidity": "1.11.0",
"path-exists": "2.1.0",
"postcss-loader": "1.0.0",
"promise": "7.1.1",
"react-dev-utils": "^0.4.2",
"recursive-readdir": "2.1.0",
"stmux": "^1.5.5",
"strip-ansi": "3.0.1",
"style-loader": "0.13.1",
"truffle": "^4.1.13",
"truffle-contract": "^1.1.8",
"truffle-hdwallet-provider": "0.0.6",
"truffle-solidity-loader": "0.0.8",
"url-loader": "^1.0.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2",
"webpack-manifest-plugin": "^1.1.0",
"whatwg-fetch": "^1.0.0"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.js?(x)",
"<rootDir>/coverage/**/?(*.)(spec|test).js?(x)"
],
"testEnvironment": "node",
"testURL": "http://127.0.0.1:7200",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx"
]
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
A really cool package i've used is npm-check
It provides a nice interface to tell you what packages are outdated.
interface image
to install the package, run in your terminal: npm install -g npm-check
To check packages, run: npm-check in the directory that contains the package.json you are checking.

Error running ESLint

I'm working on an open source project that uses ESLint before submitting a PR, sounds like a pretty standard procedure, the only problem is when running ESLint npm run lint I get an error
Cannot find module '\webpack\dlls\vendor.json'
I've recently uninstalled node and installed nvm-windows and am currently using node 6.11.2and npm 3.10.10. Any help would be greatly appreciated as I'm not finding anything on google.
package.json
`
{
"name": "Mantenuto",
"description": "",
"version": "0.0.1",
"engines": {
"node": "6.11.2",
"npm": "5.2.0"
},
"keywords": [
"react",
"isomorphic",
"universal",
"webpack",
"express",
"hot reloading",
"react-hot-reloader",
"redux",
"starter",
"boilerplate",
"babel"
],
"main": "bin/server.js",
"scripts": {
"start": "concurrently --kill-others \"npm run start-prod\"",
"start-prod": "better-npm-run start-prod",
"build": "better-npm-run build",
"build-dlls": "webpack --verbose --colors --display-error-details --config webpack/vendor.config.js",
"postinstall": "concurrently \"npm run build\" \"npm run build-dlls\"",
"lint": "node_modules/.bin/eslint -c .eslintrc src",
"start-dev": "better-npm-run start-dev",
"start-dev-local": "better-npm-run start-dev-local",
"start-dev-server-debug": "better-npm-run start-dev-server-debug",
"watch-client": "better-npm-run watch-client",
"start-dev-debug": "better-npm-run start-dev-debug",
"start-dev-debug-local": "better-npm-run start-dev-debug-local",
"debug": "concurrently --kill-others \"npm run watch-client\" \"npm run start-dev-debug\"",
"debug-local": "concurrently --kill-others \"npm run watch-client\" \"npm run start-dev-debug-local\"",
"dev": "concurrently --kill-others \"npm run watch-client\" \"npm run start-dev\"",
"dev-local": "concurrently --kill-others \"npm run watch-client\" \"npm run start-dev-local\"",
"test": "jest $(find src -name '*.test.js')",
"tdd": "jest --watch $(find src -name '*.test.js')",
"debug-tests": "node --inspect-brk node_modules/.bin/jest --runInBand --watch $(find src -name '*.test.js')"
},
"betterScripts": {
"start-prod": {
"command": "node ./bin/server.js",
"env": {
"NODE_PATH": "./src",
"NODE_ENV": "production",
"HOST": "localhost",
"API_ENDPOINT": "https://api.projectrefit.us"
}
},
"start-dev": {
"command": "node ./bin/server.js",
"env": {
"NODE_PATH": "./src",
"NODE_ENV": "development",
"HOST": "localhost",
"API_ENDPOINT": "https://api.projectrefit.us",
"PORT": 3000,
"WEBPACK_DLLS": 1
}
},
"start-dev-local": {
"command": "node ./bin/server.js",
"env": {
"NODE_PATH": "./src",
"NODE_ENV": "development",
"HOST": "localhost",
"PORT": 3000,
"API_ENDPOINT": "http://localhost:3030",
"WEBPACK_DLLS": 1
}
},
"start-dev-debug": {
"command": "node --inspect --debug ./bin/server.js",
"env": {
"NODE_PATH": "./src",
"NODE_ENV": "development",
"HOST": "localhost",
"API_ENDPOINT": "https://api.projectrefit.us",
"PORT": 3000,
"WEBPACK_DLLS": 1
}
},
"start-dev-debug-local": {
"command": "node --inspect --debug ./bin/server.js",
"env": {
"NODE_PATH": "./src",
"NODE_ENV": "development",
"HOST": "localhost",
"API_ENDPOINT": "http://localhost:3030",
"PORT": 3000,
"WEBPACK_DLLS": 1
}
},
"watch-client": {
"command": "node webpack/webpack-dev-server.js",
"env": {
"UV_THREADPOOL_SIZE": 100,
"NODE_PATH": "./src",
"PORT": 3000,
"APIPORT": 3030,
"WEBPACK_DLLS": 1
}
},
"build": {
"command": "webpack --verbose --colors --display-error-details --config webpack/prod.config.js",
"env": {
"NODE_ENV": "production"
}
}
},
"jest": {
"moduleDirectories": [
"node_modules",
"src"
],
"globals": {
"__CLIENT__": true,
"__SERVER__": false,
"__DEVELOPMENT__": true,
"__DEVTOOLS__": false,
"__DLLS__": "process.env.WEBPACK_DLLS === '1'"
},
"moduleNameMapper": {
"\\.(css|scss|eot|otf|svg|ttf|woff|woff2|m4a|aac|oga)$": "identity-obj-proxy",
"\\.(jpg|jpeg|gif|png|mp4|mkv|avi|webm|swf|wav|mid)$": "jest-static-stubs/$1"
}
},
"dependencies": {
"async": "^2.4.1",
"babel-core": "^6.25.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-react-display-name": "^6.25.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",
"babel-runtime": "^6.23.0",
"body-parser": "^1.17.2",
"compression": "^1.6.2",
"concurrently": "^3.5.0",
"cookie-parser": "^1.4.3",
"domkit": "github:hdngr/domkit",
"express": "^4.14.0",
"express-session": "^1.15.3",
"feathers": "^2.1.4",
"feathers-authentication-client": "^0.3.2",
"feathers-authentication-hooks": "^0.1.4",
"feathers-authentication-jwt": "^0.3.2",
"feathers-authentication-local": "^0.4.3",
"feathers-errors": "^2.8.1",
"feathers-hooks": "^2.0.2",
"feathers-hooks-common": "^3.5.5",
"feathers-memory": "^1.1.0",
"feathers-rest": "^1.7.3",
"feathers-socket-commons": "^2.4.0",
"feathers-socketio": "^2.0.0",
"fs": "0.0.1-security",
"history": "^3.0.0",
"http-proxy": "^1.16.2",
"is-promise": "^2.1.0",
"js-cookie": "^2.1.4",
"jsonwebtoken": "^7.4.1",
"localstorage-memory": "^1.0.2",
"lodash.isplainobject": "^4.0.6",
"lru-memoize": "^1.0.2",
"morgan": "^1.8.2",
"multireducer": "^3.1.0",
"pretty-error": "^2.1.1",
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-bootstrap": "^0.30.10",
"react-cookie": "^0.4.9",
"react-dom": "^15.6.1",
"react-helmet": "^3.3.2",
"react-redux": "^4.4.8",
"react-router": "^3.0.5",
"react-router-bootstrap": "^0.23.3",
"react-router-redux": "^4.0.8",
"react-router-scroll": "^0.4.2",
"react-spinners": "0.0.30",
"redux": "^3.7.0",
"redux-connect": "^3.0.0",
"redux-form": "^6.8.0",
"redux-persist": "^4.4.0",
"redux-thunk": "^2.2.0",
"serialize-javascript": "^1.3.0",
"serve-favicon": "^2.4.3",
"socket.io-client": "^1.7.4",
"superagent": "^3.5.2",
"webrtc-adapter": "^4.2.1"
},
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^17.0.2",
"babel-loader": "^6.4.1",
"babel-plugin-typecheck": "^3.9.0",
"babel-preset-airbnb": "^2.4.0",
"babel-preset-es2017": "^6.24.1",
"better-npm-run": "0.0.11",
"bootstrap-sass": "^3.3.7",
"bootstrap-sass-loader": "^1.0.10",
"chai": "^3.5.0",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.26.4",
"enzyme": "^2.9.1",
"eslint": "^4.7.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-loader": "^1.8.0",
"eslint-plugin-chai-friendly": "^0.4.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.3.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"font-awesome": "^4.7.0",
"font-awesome-webpack": "0.0.4",
"happypack": "^3.1.0",
"html-webpack-plugin": "^2.28.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^17.0.3",
"jest-static-stubs": "0.0.1",
"json-loader": "^0.5.4",
"less": "^2.7.2",
"less-loader": "^2.2.3",
"lighthouse": "^1.6.5",
"mocha": "^3.4.2",
"node-sass": "^3.13.1",
"piping": "^1.0.0-rc.4",
"react-a11y": "^0.3.4",
"react-addons-test-utils": "^15.6.0",
"react-hot-loader": "^3.0.0-beta.7",
"react-to-html-webpack-plugin": "^2.2.0",
"redux-devtools": "^3.4.0",
"redux-devtools-dock-monitor": "^1.1.2",
"redux-devtools-log-monitor": "^1.3.0",
"sass-loader": "^4.1.1",
"socket.io": "^1.7.4",
"strip-loader": "^0.1.2",
"style-loader": "^0.13.2",
"sw-precache-webpack-plugin": "^0.6.3",
"timekeeper": "^0.1.1",
"url-loader": "^0.5.9",
"webpack": "^1.15.0",
"webpack-dev-middleware": "^1.11.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-isomorphic-tools": "^2.6.6"
}
}
`
npm run lint
"lint": "node_modules/.bin/eslint -c .eslintrc src"

Unknown plugin "Relay" - React, GraphQL and Relay

I'm a beginner in GraphQL. I just started to follow the tutorial in Here But I'm getting this compilation problem:
Unknown plugin "Relay"
This is my package.json
{
"name": "hackernews-react-relay",
"version": "0.1.0",
"private": true,
"dependencies": {
"autoprefixer": "7.1.2",
"babel-core": "^6.5.2",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.1",
"babel-preset-react-app": "^3.0.2",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.4",
"dotenv": "4.0.0",
"eslint": "4.4.1",
"eslint-config-react-app": "^2.0.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.35.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.1.0",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "0.11.2",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.6",
"promise": "8.0.1",
"react": "^15.6.1",
"react-dev-utils": "^4.0.1",
"react-dom": "^15.6.1",
"react-relay": "^1.3.0",
"style-loader": "0.18.2",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.5.9",
"webpack": "3.5.1",
"webpack-dev-server": "2.7.1",
"webpack-manifest-plugin": "1.2.1",
"whatwg-fetch": "2.0.3"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"devDependencies": {
"babel-plugin-relay": "^1.3.0",
"relay-compiler": "^1.3.0"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.js?(x)",
"<rootDir>/src/**/?(*.)(spec|test).js?(x)"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
},
"babel": {
"presets": [
"react-app"
],
"plugins": [
"relay"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
I'm following step by step the tutorial mentioned above.
OS: Ubuntu 17.04
Node 8.0.0
npm 5.0.0
I've already trying to solve this problem by adding this to babel-presets
"es2015",
"stage-0",
"react"
and this to babel plugins
"babel-relay-plugin-loader"
But nothing works.
Instead of providing a relay option in your plugins definition, you can create a file called for example babelRelayPlugin.js and put the plugin definition there since the plugin needs to load the schema before used.
There you can import the getBabelRelayPlugin pass in the schema and export it back.
import getbabelRelayPlugin from 'babel-relay-plugin';
import schema from '../schema/schema.json';
export default getbabelRelayPlugin(schema.data);
Then use this file in your plugins definition instead.
"babel": {
"presets": [
"react-app"
],
"plugins": [
"./babelRelayPlugin"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
note: I am assuming that both the package.json and the babelRelayPlugin.js files live in the same directory

Resources