We Keep Coding

Error: Invalid hook call in Apollo useLazyQuery , useMutation, useQuery

As long as the line with useLazyQuery in App.js (code below) is removed, it will display simple "HELLO" message (working well), otherwise, I got the below error message
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
App.js
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { syncUser as syncRecord } from "./components/util";
import { useLazyQuery } from "#apollo/client";
export default function App(props) {
console.log("React.version1", React.version);
console.log("ReactDOM.version1", ReactDOM.version);
const [syncUser] = useLazyQuery(syncRecord, {}); //CULPRIT LINE
const [hasToken, setHasToken] = React.useState(false);
return <div className="App">HELLO</div>;
}
A few things I have checked
React version & React DOM version are same in index.js & App.js i.e. 16.13.1
I don't think I broke Hooks rule -- useState working well in the same sample code App.js
npm ls react returns long tree with multiple react (but other than react at root tree -- the rest (part of the library) are using same react#16.3.1 deduped
Apollo Client version
"#apollo/client": "^3.3.15",
"#apollo/react-hooks": "^4.0.0",
The base project is node js server-side code, and I created a client directory in it - which contains also a React app.
client package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#auth0/auth0-react": "^1.1.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.20.0",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"proxy": "http://localhost:4567/",
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
server-side package.json
{
"name": "cmis",
"version": "0.3.0",
"description": "NodeJS",
"engines": {
"node": "16.x"
},
"type": "module",
"main": "server.js",
"scripts": {
"start": "node server.js",
"heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build",
"test": "node test.js",
"generate": "plop",
"client": "cd client && yarn start",
"server": "nodemon -e js,graphql server.js",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
},
"dependencies": {
"#apollo/client": "^3.3.15",
"#apollo/react-hooks": "^4.0.0",
"#aws-sdk/client-codebuild": "^3.20.0",
"#aws-sdk/client-s3": "^3.20.0",
"#david.kucsai/react-pdf-table": "^0.3.0",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"#react-pdf/renderer": "^1.6.12",
"#sendgrid/mail": "^7.4.0",
"apollo-boost": "^0.4.9",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link-http": "^1.5.17",
"aws-sdk": "^2.804.0",
"bull": "^3.19.1",
"constant-case": "^3.0.4",
"dataloader": "^2.0.0",
"dayjs": "^1.9.3",
"dotenv": "^8.2.0",
"ejs": "^2.5.6",
"express": "^4.17.1",
"express-graphql": "^0.11.0",
"express-jwt": "^6.0.0",
"express-jwt-authz": "^2.4.1",
"file-saver": "^2.0.5",
"filepond": "^4.23.1",
"filepond-plugin-file-validate-size": "^2.2.2",
"filepond-plugin-image-exif-orientation": "^1.0.9",
"filepond-plugin-image-preview": "^4.6.4",
"graphql": "^15.3.0",
"graphql-tools": "^6.2.1",
"jwks-rsa": "^1.11.0",
"knex": "^0.21.5",
"pg": "^8.3.3",
"pluralize": "^8.0.0",
"react": "16.13.1",
"react-apollo": "^3.1.5",
"react-filepond": "^7.1.0",
"react-lottie": "^1.2.3",
"react-redux": "^7.2.1",
"react-swipeable-views": "^0.13.9",
"react-typist": "^2.0.5",
"redis": "^3.0.2",
"redux": "^4.0.5",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"swiper": "^6.5.3",
"throng": "^5.0.0",
"uuid": "^8.3.0",
"yarn": "^1.22.10"
},
"devDependencies": {
"#faker-js/faker": "^6.0.0-alpha.3",
"concurrently": "^4.0.1",
"got": "^11.3.0",
"plop": "^3.0.5",
"tape": "^4.7.0"
},
"repository": {
"type": "git",
"url": "https://github.com/heroku/node-js-getting-started"
},
"keywords": [
"node",
"heroku",
"express"
],
"license": "MIT"
}

Delete your node_modules folder(also from the recycle bin)
and run npm install
It worked for me because i had two node_modules folder in the project directory

(plugin babel) Error: Plugin/Preset files are not allowed to export objects, only functions

I'm trying to create a npm package and
below is my package.json
{
"name": "********",
"version": "1.0.0",
"description": "*****************",
"keywords": [
"exit",
"intent"
],
"main": "dist/*********.js",
"module": "dist/********.es.js",
"umd:main": "dist/********.umd.js",
"files": [
"dist"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "npm run prettier-eslint -- 'src/**/*.{js,json}'",
"build": "rollup -c",
"dev": "rollup -c -w",
"prettier-eslint": "prettier-eslint --write --no-semi --single-quote --no-bracket-spacing",
"changelog": "standard-version",
"size": "npx gzip-size-cli ./dist/exit-detect.js ",
"precommit": "lint-staged",
"prepush": "npm test",
"prepublish": "npm run build"
},
"lint-staged": {
"src/**/*.{js,json}": [
"npm run prettier-eslint"
]
},
"author": "Amaarshall Yaswankar",
"license": "MIT",
"dependencies": {
"lodash": "^4.17.21"
},
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/preset-env": "^7.15.8",
"#babel/preset-react": "^7.14.5",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-module-resolver": "^4.1.0",
"babel-preset-stage-2": "^6.24.1",
"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
"eslint-config-standard-jsx": "^10.0.0",
"eslint-import-resolver-node": "^0.3.6",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-standard": "^5.0.0",
"husky": "^7.0.2",
"lint-staged": "^11.2.0",
"prettier": "^2.4.1",
"prettier-eslint-cli": "^5.0.1",
"rollup": "^2.58.0",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-uglify": "^6.0.4",
"rollup-watch": "^4.3.1",
"standard-version": "^9.3.1",
"uglify-es": "^3.3.9"
},
"homepage": "https://github.com/********/*********#readme"
}
I'm using using rollup to build my package and below is the config file rollup.config.js
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'
import {uglify} from 'rollup-plugin-uglify'
import {minify} from 'uglify-es'
import fs from 'fs'
const pkg = JSON.parse(fs.readFileSync('./package.json'))
export default {
name: '*********',
input: 'src/********.js',
output: [
{format: 'es', file: pkg.module},
{format: 'cjs', file: pkg.main},
{format: 'umd', file: pkg['umd:main']}
],
plugins: [
resolve(),
commonjs(),
babel({
babelrc: false,
exclude: 'node_modules/**',
presets: [
[
'#babel/preset-env',
{
modules: false,
loose: true,
targets: {browsers: ['last 2 versions', '> 1%']}
}
],
'#babel/preset-react',
'babel-preset-stage-2'
],
plugins: ['external-helpers']
}),
uglify({}, minify)
]
}
Now that all the babel packages are updated, I have tried updating the things as per the new versions. But still I'm facing the below error when I run npm run build.
rollup v2.58.0
bundles src/exit-detect.js → dist/exit-detect.es.js, dist/exit-detect.js, dist/exit-detect.umd.js...
[!] (plugin babel) Error: Plugin/Preset files are not allowed to export objects, only functions.
Not sure why this is happening, need your help guys
Thanks in advance

How to make rollup.js build a react library on installing (yarn add ssh://git#my-repo-url)

I've created a private react library (git repo) with rollup.js, and it's installing correctly with the command yarn add ssh://git#my-repo-url but it's not building (creating build/dist in node_modules/library-folder) on installing. How can I fix it? What's the 'magic' behind the alternative create-react-library. Is npm behind this?
Here is my rollup.con.js:
import commonjs from "#rollup/plugin-commonjs";
import resolve from "#rollup/plugin-node-resolve";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import typescript from "#rollup/plugin-typescript";
import postcss from "rollup-plugin-postcss";
import packageJson from "./package.json";
export default {
input: "./src/components/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true
},
{
file: packageJson.module,
format: "esm",
sourcemap: true
}
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
typescript(),
postcss()
]
};
and my package.json:
{
"name": "my-ui-lib",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"react-scripts": "4.0.3",
"styled-components": "^5.3.0",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"main": "./build/index.js",
"module": "./build/index.es.js",
"scripts": {
"test": "react-scripts test",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public",
"build": "rollup -c",
},
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#rollup/plugin-commonjs": "^19.0.0",
"#rollup/plugin-node-resolve": "^13.0.0",
"#rollup/plugin-typescript": "^8.2.1",
"#storybook/addon-actions": "^6.2.9",
"#storybook/addon-essentials": "^6.2.9",
"#storybook/addon-links": "^6.2.9",
"#storybook/node-logger": "^6.2.9",
"#storybook/preset-create-react-app": "^3.1.7",
"#storybook/react": "^6.2.9",
"postcss": "^8.3.2",
"rollup": "^2.51.2",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}

You don't need any specialty packages/boilerplate code to install from a local/private github repo. Just follow these simple steps:
1.) Make sure you're using the correct github repo:
git+ssh://git#github.com/<github_username>/<github_repo>
<github_username> should be your github username
<github_repo> should be the name of your github repository
2.) Prep your package.json with the necessary fields, but most importantly add a prepare or prepublish script to your scripts in your package.json:
{
"name": "#example/my-package",
"version": "0.1.0",
"description": "My package description.",
// 'main' and 'module' are useful for bundlers (like webpack) to know which version to default import
"main": "index.js",
"module": "esm/index.mjs",
// 'sideEffects' is optional, let's bundlers (like webpack) know that it's tree-shakeable
"sideEffects": false,
"homepage": "https://github.com/<github_username>/<github_repo>#readme",
// 'files' is required to let your package manager know what should be installed in node_modules
"files": [
"index.js",
"index.d.ts",
"decrypt/index.js",
"decrypt/index.d.ts",
"encrypt/index.js",
"encrypt/index.d.ts",
"esm"
],
// 'types' is optional, but useful for typescript typings
"types": "./index.d.ts",
// 'exports' is optional, but useful for submodule imports
"exports": {
".": "./index.js",
"./decrypt": "./decrypt/index.js",
"./encrypt": "./encrypt/index.js",
"./esm": "./esm/index.mjs",
"./esm/decrypt": "./esm/decrypt/index.mjs",
"./esm/encrypt": "./esm/encrypt/index.mjs"
},
// 'scripts' will be leveraged by adding a 'prepare' or `prepublish` script to let the package manager know what to run during dependency installation
"scripts": {
"build": tsc --p ./ts/tsconfig.cjs.json && ts-node ./utils/compress.ts",
"build:esm": "rollup -c",
"lint": "eslint ./ --ext .ts,.js && tsd",
"prepare": "npm run build && npm run build:esm",
"test": "jest --config ./jest.json --coverage",
},
// 'repository' is optional, but useful to tell developers/remote websites (like npmjs) where your code resides
"repository": {
"type": "git",
"url": "git#github.<github_username>/<github_repo>.git"
},
"author": "Firstname Lastname",
"license": "MIT",
"bugs": {
"url": "https://github.com/<github_username>/<github_repo>/issues"
},
// 'engines' is highly recommended as it lets the package manager know which versions of node will be able to run the package without issues
"engines": {
"node": ">=12"
},
"devDependencies": { ... },
}
3.) Install the package using npm or yarn:
# with npm
npm install git+ssh://git#github.com/<github_username>/<github_repo>
# or with yarn
yarn add git+ssh://git#github.com/<github_username>/<github_repo>
4.) Import the package by the name specified in the package.json:
const example = require("#example/my-package");
// import example from "#example/my-package";
...etc
Example package repo:
https://github.com/mattcarlotta/example-env
Example using package repo:
https://github.com/mattcarlotta/example-using-repo
Result:

SSR with Node, Webpack, React, Express, Material UI, React Router - Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

after trying several days without success I am writing this post.
I want to add server side rendering (SSR) to my application. I followed this tutorial until the point I have to call npm run build. I always get the following error:
node:internal/modules/cjs/loader:1126
throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
^
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /<PATH_HERE>/node_modules/#babel/runtime/helpers/esm/extends.js
require() of ES modules is not supported.
require() of /<PATH_HERE>/node_modules/#babel/runtime/helpers/esm/extends.js from /<PATH_HERE>/dist/main.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename extends.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /<PATH_HERE>/node_modules/#babel/runtime/helpers/esm/package.json.
I think it's something with the webpack.config.js:
const nodeExternals = require("webpack-node-externals");
//import nodeExternals from "webpack-node-externals"
const common = {
devtool: "cheap-module-source-map",
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: "babel-loader", // asks bundler to use babel loader to transpile es2015 code
options: {
presets: ["#babel/preset-env", "#babel/preset-react"],
},
},
exclude: [/node_modules/, /public/],
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf)(\?[a-z0-9=.]+)?$/,
use: "url-loader?limit=100000",
},
{
test: /\.svg$/,
use: ["#svgr/webpack"],
},
],
},
};
const clientConfig = {
...common,
entry: "./client/src/index",
output: {
path: `${__dirname}/public`,
},
};
const serverConfig = {
...common,
target: "node",
externals: [nodeExternals()],
entry: "./server.js",
output: {
path: `${__dirname}/dist`,
},
};
module.exports = [clientConfig, serverConfig];
My package.json file:
{
"name": "Website Name",
"version": "1.0.0",
"description": "My Website",
"main": "dist/main.js",
"module": "dist/main.js",
"scripts": {
"client-install": "npm install --prefix client",
"start": "NODE_ENV=production node dist/main.js",
"build": "rm -rf dist public && webpack --mode production --progress",
"server": "nodemon server.js",
"heroku-postbuild": "npm install --prefix client && npm run build",
"dev": "rm -rf dist public && webpack --mode development --progress"
},
"author": "It's me",
"license": "MIT",
"dependencies": {
"#babel/runtime": "^7.14.0",
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"#material-ui/styles": "^4.11.4",
"#svgr/webpack": "^5.5.0",
"bcrypt": "^5.0.0",
"cjs-loader": "^0.1.0",
"compression": "^1.7.4",
"concurrently": "^5.3.0",
"cors": "^2.8.5",
"css-loader": "^5.2.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"file-loader": "^6.2.0",
"humps": "^2.0.1",
"ignore-styles": "^5.0.1",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.21",
"mongoose": "^5.11.8",
"normalizr": "^3.6.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hot-loader": "^4.13.0",
"react-router": "^6.0.0-beta.0",
"redux": "^4.1.0",
"redux-logger": "^3.0.6",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1"
},
"devDependencies": {
"#babel/core": "^7.14.3",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/plugin-transform-runtime": "^7.14.3",
"#babel/preset-env": "^7.14.4",
"#babel/preset-react": "^7.13.13",
"babel-loader": "^8.2.2",
"babel-plugin-import": "^1.13.3",
"babel-plugin-transform-assets": "^1.0.2",
"html-webpack-plugin": "^5.3.1",
"nodemon": "^2.0.4",
"npm-run-all": "^4.1.5",
"react-jss": "^10.6.0",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3",
"webpack-node-externals": "^3.0.0"
}
}
If you need any further information just let me know I will answer as soon as possible. I am really frustrated about the issue :(

I faced a similar problem. The only way out was to add #babel/runtime to the allowlist webpack-node-externals. More details: https://www.npmjs.com/package/webpack-node-externals.

I found the problem for me... It was my fault. I had two directories (./ and ./client). I started developing the frontend with npm in ./client and then went to the server and moved all npm packages to ./ but forgot to delete the #node_modules folder in ./client. Deleting it solved the problem for me

Which is the entry file used by vue-cli-service?

Got a project using vue, webpack, babel, npm.
Could start it via npm run server, when trying to figure out how this command work, I saw vue-cli-service serve from package.json.
But, how does vue-cli-service start the program? I saw main.js which in turn render Vue.vue, both of which are under src/.
Didn't see anywhere config the entry file, so is main.js the default entry for vue-cli-service?
Code
package.json:
{
"name": "quizer-ui",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^2.6.5",
"element-ui": "^2.10.1",
"vue": "^2.6.10",
"vue-router": "^3.0.7"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.9.0",
"#vue/cli-plugin-eslint": "^3.9.0",
"#vue/cli-service": "^3.9.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-cli-plugin-element": "^1.0.1",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}

vue-cli-service uses Webpack with a default configuration of
entry: {
app: [
'./src/main.js'
]
}
This can be altered in vue.config.js if you wish. See https://cli.vuejs.org/guide/webpack.html#simple-configuration
Webpack will build a JS bundle, starting at the entry then inject that into the index.html file and that's how your app starts.
You can see the entire configuration for your app using
vue inspect
See https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config

It is hardcoded in #vue.
Relative Path: node_modules/#vue/cli-service/lib/config/base.js
Line 28-37:
webpackConfig
.mode('development')
.context(api.service.context)
.entry('app')
.add('./src/main.js')
.end()
.output
.path(api.resolve(options.outputDir))
.filename(isLegacyBundle ? '[name]-legacy.js' : '[name].js')
.publicPath(options.publicPath)