We Keep Coding

Module not found error even when overriding webpack config

When running npm run build I'm getting Module not found error. The extension in the request is mandatory for it to be fully specified.
This is relating to a shared package I created using create-react-library. This lib is being referenced in a new project using the latest create-react-app.
I have created a config-overrides.js file setting fullySpecified to false but this does not seem to have any affect.
Any idea what I am missing?
Module not found: Error: Can't resolve './utils' in
'C:\Users\Bob\source\repos\my-react-app\node_modules#my-lib\shared\dist\services'
Did you mean 'utils.js'? BREAKING CHANGE: The request './utils' failed
to resolve only because it was resolved as fully specified (probably
because the origin is strict EcmaScript Module, e. g. a module with
javascript mimetype, a '.mjs' file, or a '.js' file where the
package.json contains '"type": "module"'). The extension in the
request is mandatory for it to be fully specified. Add the extension
to the request.
package.json
{
"name": "myreactapp",
"version": "1.0.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^2.16.0",
"#mui/icons-material": "^5.10.9",
"#mui/material": "^5.10.9",
"#mui/x-date-pickers": "^5.0.4",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.11.65",
"#types/react": "^18.0.21",
"#types/react-dom": "^18.0.6",
"#typescript-eslint/eslint-plugin": "^5.40.0",
"#typescript-eslint/parser": "^5.40.0",
"#mylib/shared": "^1.0.128-preview", // <-- my shared lib
"aws-amplify": "^4.3.37",
"clsx": "^1.2.1",
"date-fns": "^2.29.3",
"eslint": "^8.25.0",
"jest": "^27.5.1",
"react": "^18.2.0",
"react-app-rewired": "^2.2.1",
"react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4",
"react-i18next": "^11.18.6",
"react-router-dom": "^6.4.2",
"react-scripts": "^5.0.1",
"tailwindcss": "^3.1.8",
"typescript": "^4.8.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
config-overrides.js
module.exports = {
// The Webpack config to use when compiling your react app for development or production.
webpack: function (config, env) {
const webpack = config.module.rules[1].oneOf;
webpack.splice(webpack.length - 1, 0, {
test: /\.m?js/,
resolve: {
fullySpecified: false
}
});
return config;
},
};
#mylib - package.json
{
"name": "#mylib/shared",
"version": "1.0.0-local",
"description": "Shared library",
"author": "na",
"license": "MIT",
"repository": "na",
"type": "module",
"main": "dist/index",
"module": "dist/index.modern.js",
"types": "dist/index",
"source": "src/index.js",
"engines": {
"node": ">=10"
},
"scripts": {
"build": "microbundle-crl --no-compress --format modern,cjs",
"start": "microbundle-crl watch --no-compress --format modern,cjs",
"prepare": "run-s build",
"test:all": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build",
"test": "jest",
"test:ci": "npm run test -- --watchAll=false --passWithNoTests --reporters=default --reporters=jest-junit --coverage --coverageReporters=cobertura"
},
"peerDependencies": {
"react": "^18.2.0"
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"eslint": "^7.1.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"jest": "^27.5.1",
"jest-junit": "^13.1.0",
"microbundle-crl": "^0.13.10",
"npm-run-all": "^4.1.5",
"prettier": "^2.7.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-scripts": "^5.0.1",
"ts-jest": "^27.1.3",
"typescript": "4.8.4"
},
"files": [
"dist"
],
"dependencies": {
"#types/jest": "^27.4.1",
"#types/node": "^17.0.21",
"#types/react": "^17.0.39",
"#types/react-dom": "^17.0.11",
"aws-amplify": "^4.3.12",
"dotenv": "^16.0.0",
"fetch-intercept": "^2.4.0",
"object-mapper": "^6.2.0",
"react-i18next": "^11.15.6",
"typescript": "4.8.3",
"zen-observable-ts": "^1.1.0"
},
"jest-junit": {
"suiteNameTemplate": "{filepath}",
"outputDirectory": ".",
"outputName": "junit.xml"
}
}
#mylib - index.ts
import sharedUtils from './services/utils';
export {
sharedUtils,
};

"count not find declaration file for module" in plain Javacript?

I know this is a recurrent one, but in a plain js project ?
I'm not using Typescript in one of my projects, but I'm still getting count not find declaration file for module in Eclipse when I import geoplug in module. Specifically in this line:
import { getGeo } from 'geoplugin';
It's a React/Redux frontend. There isn't a #types/geoplugin package. How can I get rid of this error ?
Please notice that the error is reported on Eclipse only.
Edit
My package.json is this:
{
"name": "myproj",
"version": "0.0.1",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.6.1",
"axios": "^0.27.2",
"bootstrap": "^5.2.1",
"classnames": "^2.2.6",
"clientjs": "^0.2.1",
"date-fns": "^2.12.0",
"geoplugin": "^1.0.10",
"jsonwebtoken": "^8.5.1",
"react": "^17",
"react-dom": "^17",
"react-redux": "^7.2.4",
"react-router-dom": "^5.1.2",
"react-scripts": "^4",
"sass": "^1.49.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.1.1"
},
"scripts": {
"start": "cp environment/.env . && react-scripts --openssl-legacy-provider start",
"build": "cp environment/.env.production .env && react-scripts --openssl-legacy-provider build && cp httpd_conf/.htaccess build/",
"buildAndDeploy": "cp environment/.env.production .env && react-scripts build && cp httpd_conf/.htaccess build/ && /vagrant/frontend/publicar",
"eject": "react-scripts eject"
},
"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": {
"prettier": "^2.0.2"
}
}

I replicated a simplified version of your project and everything works fine
This error make no sense, try deleting your node_modules and your package-lock.json
Then, install all your packages again:
npm install
If this doesn't work, seeing what's inside your package.json would be very helpful

command not found: react-scripts (PS: yarn2(berry) workspaces)

Working on a yarn2 powered monorepo with two workspaces common and app. I've declared typescript and react-scripts as devDependencies in root's package.json ; and declared typescript and react-scripts as peerDependencies in app's package.json.
However, running yarn start gives the error
command not found: react-scripts
Any idea how to go about this?
Sidenote
react-scripts has peerDependencies on react which I've provided in root workspace's dependency section.
attaching package.json for root:
{
"name": "monorepo",
"packageManager": "yarn#3.2.1",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.11.43",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"fictoan-react": "^0.41.22",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"react-scripts": "5.0.1",
"typescript": "^4.7.4"
},
"workspaces": [
"common",
"app"
]
}
package.json for app
{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"dependencies": {
"common": "workspace:*"
},
"peerDependencies": {
"#testing-library/jest-dom": "*",
"#testing-library/react": "*",
"#testing-library/user-event": "*",
"#types/jest": "*",
"#types/node": "*",
"#types/react": "*",
"#types/react-dom": "*",
"fictoan-react": "*",
"react": "*",
"react-dom": "*",
"react-scripts": "*",
"styled-components": "*",
"web-vitals": "*"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Not sure if this is a hack, but solved this using https://yarnpkg.com/getting-started/qa#how-to-share-scripts-between-workspaces
added this to root's package.json
"scripts": {
"g:start": "cd $INIT_CWD && react-scripts start",
"g:build": "cd $INIT_CWD && react-scripts build",
"g:test": "cd $INIT_CWD && react-scripts test",
"g:eject": "cd $INIT_CWD && react-scripts eject"
}
updated this in app's package.json
"scripts": {
"start": "yarn g:start",
"build": "yarn g:build",
"test": "yarn g:test",
"eject": "yarn g:eject"
}
PS:not really sure why react-scripts isn't available in app workspace even though its specified as a peerDependency :/

Github CD pipeline crashes with codemirror

I am trying to use codemirror with react, The build is successful in local but failing when running the pipeline, Please Help me out. Thanks in Advance.
Error:
Module not found: Error: Can't resolve 'codemirror/lib/codemirror.css' in '/home/runner/work/onsquarecode-ui/onsquarecode-ui/src/components/codeEditor'
I guess it's not able to find the global path, any solution regarding that?
CodeEditor.js:
import { useContext, useState } from "react";
import { Controlled as CodeMirror } from "react17-codemirror2";
import { DEFAULT_SETTINGS } from "../../constants";
import { GlobalContext } from "../../context/GlobalProvider";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/material.css";
const CodeEditor = ({ settings, readOnly }) => {
const { state } = useContext(GlobalContext);
const [value, setValue] = useState("");
const handleChange = (editor, data, value) => {
setValue(value);
};
const config = { ...DEFAULT_SETTINGS, ...settings };
const options = {
screenReaderLabel: "Code editor",
lineNumbers: config.lineNumbers,
firstLineNumber: config.firstLineNumber,
mode: state || "xml",
theme: "material",
scrollbarStyle: null,
viewportMargin: Infinity,
lineWrapping: true,
smartIndent: true,
extraKeys: {
"Shift-Tab": "indentLess",
},
readOnly,
showInvisibles: config.hiddenCharacters,
autoCloseBrackets: true,
};
return (
<>
<CodeMirror
value={value}
onBeforeChange={handleChange}
autoScroll={false}
options={options}
/>
</>
);
};
export default CodeEditor;
dev-pipeline.yml:
name: Devlopment CI/CD Pipeline
on:
push:
branches: [ develop,test ]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [12.x, 14.x, 16.x]
steps:
- uses: actions/checkout#v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node#v2
with:
node-version: ${{ matrix.node-version }}
cache: npm
- name: Install Packages
run: npm ci
- name: Lint
run: npm run lint
- name: Build
run: npm run build
package.json :
{
"name": "onsquarecode-ui",
"description": "Create and share beautiful images of your source code",
"version": "0.1.0",
"private": true,
"homepage": "https://latticebyte.github.io/onsquarecode-ui",
"engines": {
"node": ">=12"
},
"dependencies": {
"#apollo/client": "^3.5.7",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"crypto-hash": "^2.0.1",
"dom-to-image-more": "^2.9.5",
"graphql": "^16.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"react-select": "^5.2.2",
"react17-codemirror2": "^7.2.3",
"sass": "^1.48.0",
"web-vitals": "^2.1.2"
},
"scripts": {
"start": "npm run build:css && react-scripts start",
"build": "npm run build:css && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint src",
"build:css": "postcss src/styles/tailwind.scss -o src/styles/index.scss",
"watch:css": "postcss src/styles/tailwind.scss -o src/styles/index.scss -w --verbose",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"prepare": "husky install"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^10.4.2",
"cssnano": "^5.0.15",
"eslint": "^8.7.0",
"eslint-config-google": "^0.14.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"gh-pages": "^3.2.3",
"husky": "^7.0.4",
"lint-staged": "^12.3.1",
"postcss": "^8.4.5",
"postcss-cli": "^9.1.0",
"prettier": "^2.5.1",
"tailwindcss": "^3.0.14"
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"npm run lint",
"eslint --cache --fix"
],
"*.{js,jsx,json,ts,tsx,scss,css,html,md}": "prettier --config .prettierrc --write"
}
}

You will also need to add codemirror in your dependencies object in package.json because it is a peerDependency of react17-codemirror2.

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