We Keep Coding

VS Code auto import using require instead of importing ES Module in a React Project

I'm creating a react project using create-react-app, prettier, ESlint, and Husky. Anytime I create a JS file, it is considered a CommoJS Module instead of an ES Module. And if I try to import any library/package in the js file it is auto imported using "require" not using "import (ES Imports)". I searched across the web but couldn't able to found any solution. I also went through my configuration files whether I accidentally misconfigured any option but everything seems fine.
JavaScript file:
const { default: axios } = require("axios");
// on mouse hover to require it shows the message like
// 'require' is not defined. eslint(no-undef)
// I want this type of auto import
// import axios from "axios";
const axiosInstance = axios.create({
baseURL: process.env.REACT_APP_BASE_URL,
// on mouse hover to process it shows the message like
// var process: NodeJS.Process
// 'process' is not defined. eslint(no-undef)
});
axiosInstance.interceptors.request.use(
// Do something before request is sent
(req) => {
if (localStorage.getItem("token")) {
req.headers.Authorization = `Bearer ${localStorage.getItem("token")}`;
return req;
} else {
throw { message: "The token is not available" };
}
},
// Do something with request error
(error) => {
return Promise.reject(error);
}
);
commitlint.config.js file
module.exports = {
// on mouse hover to require it shows the message like
// 'module' is not defined. eslint(no-undef)
extends: ["#commitlint/config-conventional"],
rules: {
"body-leading-blank": [1, "always"],
"body-max-line-length": [2, "always", 100],
"footer-leading-blank": [1, "always"],
"footer-max-line-length": [2, "always", 100],
"header-max-length": [2, "always", 100],
"scope-case": [2, "always", "lower-case"],
"subject-case": [
2,
"never",
[
"sentence-case",
"start-case",
"pascal-case",
"upper-case",
"camel-case",
],
],
"subject-empty": [2, "never"],
"subject-full-stop": [2, "never", "."],
"type-case": [2, "always", "lower-case"],
"type-empty": [2, "never"],
"type-enum": [
2,
"always",
[
"build",
"chore",
"ci",
"docs",
"feat",
"fix",
"perf",
"refactor",
"revert",
"style",
"test",
"translation",
"security",
"changeset",
"release",
],
],
},
};
My package.json file:
( I tried to add "type": "module" but didn't work)
{
"name": "highrise",
"version": "0.1.0",
"private": true,
"license": "ISC",
"engines": {
"node": ">=16.0.0",
"yarn": ">=1.22.0",
"npm": "please-use-yarn"
},
"resolutions": {
"webpack": "^5"
},
"dependencies": {
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#fontsource/poppins": "^4.5.9",
"#mui/icons-material": "^5.10.6",
"#mui/lab": "^5.0.0-alpha.101",
"#mui/material": "^5.10.6",
"#mui/x-data-grid": "^5.17.4",
"#reduxjs/toolkit": "^1.8.5",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^13.0.0",
"#testing-library/user-event": "^13.2.1",
"axios": "^0.27.2",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.36.1",
"react-redux": "^8.0.4",
"react-router-dom": "^6.4.1",
"react-scripts": "5.0.1",
"react-toastify": "^9.0.8",
"socket.io-client": "^4.5.2",
"web-vitals": "^2.1.0",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint --fix",
"pretty": "prettier --write .",
"prepare": "husky install"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#commitlint/cli": "^17.1.2",
"#commitlint/config-conventional": "^17.1.0",
"eslint": "^8.23.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.31.8",
"eslint-plugin-react-hooks": "^4.6.0",
"husky": "^8.0.0",
"prettier": "^2.7.1"
}
}
jsconfig.json file
( I tried adding "module": "es6", but it also didn't work )
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#public/*": ["public/*"],
"#src/*": ["src/*"],
"#assets/*": ["src/assets/*"],
"#components/*": ["src/components/*"],
"#pages/*": ["src/pages/*"],
"#store/*": ["src/store/*"],
"#utils/*": ["src/utils/*"]
}
}
}
eslint.json file
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:prettier/recommended"
],
"globals": {
"React": "readonly"
},
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"plugins": ["prettier", "react", "react-hooks"],
"rules": {
"no-var": "error",
"prettier/prettier": "error",
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"no-unused-vars": [
2,
{
"args": "after-used",
"argsIgnorePattern": "^_"
}
],
"react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
"react-hooks/exhaustive-deps": "error" // Checks effect dependencies,
}
}

Uninstall other auto importer for Javascript.
Install this one:

babel core-js typed-array-constructor: Cannot find module '../internals/to-offset'

I am getting this error when trying to use core-js:
typed-array-constructor.js:13 Uncaught Error: Cannot find module '../internals/to-offset'
at webpackMissingModule (typed-array-constructor.js:13)
I searched for the file in the node-modules/core-js package and it's there (twice: at core-js and core-js-pure packages.. there is also a core-js-compact that I don't know why it is there)
but when I check the browser debugger, it seems to be loading "core-js" and in the expected folder there is no evidence of the required file! should I import it by hand, or what I am missing here?
my .babelrc:
{
"presets": [
["#babel/preset-env", {
useBuiltIns: "usage", // or "entry"
corejs: { version: '3.6', proposals: false }
}],
"#babel/preset-react"
],
"plugins": []
}
my index.js:
import 'core-js/stable';
import 'regenerator-runtime/runtime';
require('./app');
my webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/app.js', // relative path
output: {
path: path.join(__dirname, 'public'), // absolute path
filename: 'bundle.js' // file name
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
}
};
..and package json:
{
"name": "client",
"version": "1.0.0",
"description": "",
"private": true,
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"build": "webpack",
"start": "webpack-dev-server --open",
"assets": "cp -r ../assets ~/s3/local-medialibrary"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/preset-env": "^7.10.2",
"#babel/preset-react": "^7.10.1",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^1.7.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"regenerator-runtime": "^0.13.5",
"#babel/core": "^7.10.2",
"#babel/plugin-transform-runtime": "^7.10.1",
"#babel/runtime-corejs3": "^7.10.2",
"ammo.js": "github:kripken/ammo.js",
"babel-loader": "^8.1.0",
"core-js": "^3.6.5",
"dat.gui": "^0.7.6",
"pathfinding": "^0.4.18",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"stats.js": "^0.17.0",
"three": "^0.114.0"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

npm deprecated warning for packages not in package.json file

I am trying to set up a work folder for Exercism JavaScript tutorial and when I run npm install command, I get the message below
npm WARN deprecated circular-json#0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated kleur#2.0.2: Please upgrade to kleur#3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit https://github.com/lukeed/kleur/releases/tag/v3.0.0\ for migration path(s).
When I looked through my package.json file, there is no CircularJSON or kleur so I am wondering why I get the warning and the packages in there are not installed by npm. Here's the package.json file
{
"name": "exercism-javascript",
"version": "0.0.0",
"description": "Exercism exercises in Javascript.",
"author": "Katrina Owen",
"private": true,
"repository": {
"type": "git",
"url": "https://github.com/exercism/javascript"
},
"devDependencies": {
"babel-eslint": "^10.0.1",
"babel-jest": "^21.2.0",
"babel-plugin-transform-builtin-extend": "^1.1.2",
"babel-preset-env": "^1.7.0",
"eslint": "^5.6.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-import": "^2.14.0",
"jest": "^23.6.0"
},
"jest": {
"modulePathIgnorePatterns": [
"package.json"
]
},
"babel": {
"presets": [
[
"env",
{
"targets": [
{
"node": "current"
}
]
}
]
],
"plugins": [
[
"babel-plugin-transform-builtin-extend",
{
"globals": [
"Error"
]
}
],
[
"transform-regenerator"
]
]
},
"scripts": {
"test": "jest --no-cache ./*",
"watch": "jest --no-cache --watch ./*",
"lint": "eslint .",
"lint-test": "eslint . && jest --no-cache ./* "
},
"eslintConfig": {
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module"
},
"env": {
"es6": true,
"node": true,
"jest": true
},
"extends": "airbnb-base",
"rules": {
"import/no-unresolved": "off",
"import/extensions": "off",
"import/prefer-default-export": "off",
"import/no-default-export": "off"
}
},
"license": "MIT"
}
How can I fix this?

configuration issue with npm-watch -- not hearing changes in some cases

I am working on a build script that uses rollup along with other tools to build stuff. Everything works well individully, but npm-watch is being very selective in what it listens to. I have confiured it to use four different eatches, but only one (watch:js) responds. Here is a link to the repo. Here is the package.json:
{
"name": "es6_rollup_seed",
"version": "1.0.0",
"description": "an npm build environment that implements rollup.js",
"main": "index.js",
"watch": {
"watch:html": {
"patterns": [
"src"
],
"extensions": "html"
},
"watch:js": {
"patterns": [
"src/js"
],
"extensions": "js"
},
"watch:img": {
"patterns": [
"src/img"
],
"extensions": "jpg,png,svg,gif"
},
"watch:css": {
"patterns": [
"src/scss"
],
"extensions": "scss"
}
},
"scripts": {
"test": "npm run test",
"start": "run-s init:*",
"init:create-folders": "mkdirp build/js build/css build/img",
"init:copy-content": "run-s copy-html",
"init:start": "run-p serve watch:*",
"serve": "lite-server -c bs-config.json",
"watch:html": "npm-watch copy-html",
"watch:js": "npm-watch compile-js",
"watch:img": "npm-watch copy-images",
"watch:css": "npm-watch compile-css",
"copy-html": "cpx src/*.html build",
"copy-images": "cpx src/img/*.* build/img",
"compile-js": "rollup -c",
"compile-css": "node-sass --output-style expanded --source-map true src/scss/app.scss --output build/css"
},
"repository": {
"type": "git",
"url": "git+https://github.com/sean-olson/build_environments.git"
},
"keywords": [
"rollup",
"build",
"tool",
"npm"
],
"author": "Sean Olson",
"license": "MIT",
"bugs": {
"url": "https://github.com/sean-olson/build_environments/issues"
},
"homepage": "https://github.com/sean-olson/build_environments#readme",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-preset-es2015-rollup": "^3.0.0",
"cpx": "^1.5.0",
"lite-server": "^2.3.0",
"node-sass": "^4.7.2",
"npm-run-all": "^4.1.2",
"npm-watch": "^0.3.0",
"rollup": "^0.56.5",
"rollup-plugin-babel": "^3.0.3",
"rollup-plugin-commonjs": "^9.0.0",
"rollup-plugin-node-resolve": "^3.2.0",
"rollup-plugin-replace": "^2.0.0"
}
}

The solution is to use another module, in this case watch-cli

ERROR in ./~/node-env-file/lib/index.js Module not found: Error: Cannot resolve module 'fs'

So, when attempting to require node-env-file in my config.js file as follows:
import Raven from 'raven-js';
const env = require('node-env-file');
env('.env');
I receive the following error mesage:
ERROR in ./~/node-env-file/lib/index.js Module not found: Error:
Cannot resolve module 'fs' in
C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\node-env-file\lib
# ./~/node-env-file/lib/index.js 3:9-22
My webpack config file is as follows:
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-hot-middleware/client',
'./client/app'
],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
// js
{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'client')
},
// CSS
{
test: /\.styl$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!stylus-loader'
}
]
}
};
and my package.json file is as follows:
{
"name": "learn-redux-graphql",
"version": "1.0.0",
"description": ":) ",
"scripts": {
"build:webpack": "set NODE_ENV=production && webpack --config webpack.config.prod.js",
"build": "npm run clean && npm run build:webpack",
"test": "NODE_ENV=production mocha './tests/**/*.spec.js' --compilers js:babel-core/register",
"clean": "rimraf dist",
"start": "node devServer.js"
},
"repository": {
"type": "git",
"url": ""
},
"author": "Theo Mer",
"license": "MIT",
"homepage": "",
"dependencies": {
"apollo-client": "^1.0.2",
"babel-core": "^6.5.2",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.3",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-object-rest-spread": "^6.5.0",
"babel-plugin-transform-react-display-name": "^6.5.0",
"babel-polyfill": "^6.5.0",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"eslint": "^3.4.0",
"eslint-plugin-babel": "^3.1.0",
"eslint-plugin-react": "^4.1.0",
"express": "^4.13.4",
"firebase": "^3.3.0",
"graphql-tag": "^1.3.2",
"graphql-tools": "^0.10.1",
"immutability-helper": "^2.1.2",
"lodash": "^4.17.4",
"node-env-file": "^0.1.8",
"raven-js": "^2.1.1",
"react": "^0.14.7",
"react-addons-css-transition-group": "^0.14.7",
"react-apollo": "^1.0.0-rc.3",
"react-dom": "^0.14.7",
"react-redux": "^4.4.0",
"react-router": "^2.0.0",
"react-router-redux": "^4.0.0",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.2",
"redbox-react": "^1.2.2",
"redux": "^3.3.1",
"redux-thunk": "^2.0.1",
"rimraf": "^2.5.2",
"style-loader": "^0.13.0",
"stylus": "^0.54.5",
"stylus-loader": "^2.3.1",
"subscriptions-transport-ws": "^0.5.5-alpha.0",
"webpack": "^1.12.14",
"webpack-dev-middleware": "^1.5.1",
"webpack-hot-middleware": "^2.7.1"
},
"devDependencies": {
"babel-plugin-transform-react-jsx": "^6.23.0",
"expect": "^1.14.0",
"expect-jsx": "^2.3.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7",
"sw-precache-webpack-plugin": "^0.9.1"
},
"babel": {
"presets": [
"react",
"es2015"
],
"env": {
"development": {
"plugins": [
[
"transform-object-rest-spread"
],
[
"transform-react-display-name"
],
[
"react-transform",
{
"transforms": [
{
"transform": "react-transform-hmr",
"imports": [
"react"
],
"locals": [
"module"
]
},
{
"transform": "react-transform-catch-errors",
"imports": [
"react",
"redbox-react"
]
}
]
}
]
]
},
"production": {
"plugins": [
[
"transform-object-rest-spread"
],
[
"transform-react-display-name"
]
]
}
}
},
"eslintConfig": {
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"env": {
"browser": true,
"node": true
},
"parser": "babel-eslint",
"rules": {
"quotes": [
2,
"single"
],
"strict": [
2,
"never"
],
"babel/generator-star-spacing": 1,
"babel/new-cap": 1,
"babel/object-shorthand": 1,
"babel/arrow-parens": 1,
"babel/no-await-in-loop": 1,
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2
},
"plugins": [
"babel",
"react"
]
}
}
What is the here, and how do I resolve it?

You need to tell your webpack config about your node environment. Add an entry for node into your webpack config with an empty value for the fs module:
var path = require('path');
var webpack = require('webpack');
module.exports = {
/* Your exisitng config as above */
node: {
fs: 'empty'
}
};

Using dotenv-webpack has resolved the issue.