Develop Reference

error after installing npm package ,You may need an additional loader to handle the result of these loaders

I've installed the npm package #yaireo/tagify v4.16.4 however when I try to start my react app I get the following error:
./node_modules/#yaireo/tagify/dist/tagify.js 594:33
Module parse failed: Unexpected token (594:33)
File was processed with these loaders:
* ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| headerRef = this.dropdown.getHeaderRef(),
| footerRef = this.dropdown.getFooterRef();
> newHeaderElem && headerRef?.parentNode.replaceChild(newHeaderElem, headerRef);
| newFooterElem && footerRef?.parentNode.replaceChild(newFooterElem, footerRef);
| },
My package.json looks like this:
{
"name": "portal_service",
"version": "0.1.0",
"homepage": ".",
"private": true,
"dependencies": {
"#ant-design/compatible": "1.1.0",
"#ant-design/icons": "4.7.0",
"#babel/plugin-proposal-decorators": "7.16.5",
"#casl/ability": "3.4.0",
"#casl/react": "1.0.4",
"#craco/craco": "6.4.3",
"#fortawesome/fontawesome-svg-core": "1.2.29",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/pro-duotone-svg-icons": "5.13",
"#fortawesome/pro-light-svg-icons": "5.13",
"#fortawesome/pro-regular-svg-icons": "5.13",
"#fortawesome/pro-solid-svg-icons": "5.13",
"#fortawesome/react-fontawesome": "0.1.11",
"#okta/okta-react": "3.0.1",
"#react-hook/resize-observer": "1.2.5",
"#tisoap/react-flow-smart-edge": "1.0.1",
"#yaireo/tagify": "4.13.1",
"ant-design-pro": "2.3.2",
"antd": "4.16.13",
"antd-img-crop": "3.16.0",
"bootstrap": "4.6.1",
"chart.js": "2.8.0",
"chartjs-plugin-zoom": "0.7.0",
"firebase": "9.6.1",
"google-map-react": "1.1.7",
"jsoneditor": "9.7.4",
"jsoneditor-react": "3.1.2",
"jsonwebtoken": "8.5.1",
"lodash": "4.17.21",
"mobx": "5.15.7",
"mobx-react": "5.4.4",
"mobx-react-lite": "1.5.2",
"moment": "2.24.0",
"moment-timezone": "0.5.34",
"papaparse": "5.3.1",
"prop-types": "15.7.2",
"rc-progress": "2.3.0",
"react": "16.14.0",
"react-beautiful-dnd": "13.0.0",
"react-chartjs-2": "2.7.4",
"react-circle-flags": "^0.0.17",
"react-click-outside": "3.0.1",
"react-cropper": "2.1.8",
"react-dom": "16.14.0",
"react-flow-renderer": "10.0.4",
"react-google-login": "5.1.20",
"react-intl": "2.8.0",
"react-onclickoutside": "6.12.1",
"react-phone-number-input": "3.1.44",
"react-quill": "1.3.3",
"react-router-dom": "5.3.0",
"react-scripts": "4.0.3",
"react-select": "5.2.2",
"react-top-loading-bar": "1.2.0",
"reactstrap": "7.1.0",
"slugify": "1.4.0",
"styled-components": "5.3.3",
"superagent": "7.0.1",
"superagent-promise": "1.1.0",
"uuid": "8.3.2"
},
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
"start": "craco start",
"start:withMockServer": "npx concurrently --kill-others 'yarn run mock-server' 'yarn start'",
"build": "craco build",
"test": "craco test --env=jsdom",
"test:withLiveCoverage": "npx concurrently --kill-others 'yarn test --coverage --watchAll' 'npx live-server coverage/lcov-report'",
"eject": "react-scripts eject",
"mock-server": "npx json-server src/utils/mockData.js --port 4000 --watch --delay 1500",
"lint": "eslint ./src",
"lint-fix": "eslint ./src --fix"
},
"devDependencies": {
"babel-plugin-styled-components": "2.0.2",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.15.6",
"enzyme-to-json": "3.6.2",
"eslint-config-airbnb": "19.0.2",
"eslint-plugin-import": "2.25.3",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-react": "7.29.4",
"eslint-plugin-react-hooks": "4.3.0",
"faker": "4.1.0",
"husky": "1.3.1",
"jest-styled-components": "6.3.4",
"json-server": "0.14.2",
"lint-staged": "8.2.1",
"mobx-react-devtools": "6.1.1",
"react-error-overlay": "6.0.9",
"source-map-explorer": "1.8.0"
},
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,json,css}": [
"git add"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"cracoConfig": "config/craco.config.js",
"resolutions": {
"//": "See https://github.com/facebook/create-react-app/issues/11773",
"react-error-overlay": "6.0.9"
}
}
We are using craco to run our react app. The craco config looks like this:
module.exports = {
babel: {
plugins: [
['#babel/plugin-proposal-decorators', { legacy: true }],
['babel-plugin-styled-components'],
],
},
// Disables react-scripts's own ESLint from running on every compilation. This prevents a very long compilation time.
// We don't need react-scripts to run its own ESLint every time, because we have our own ESLint configuration to use with "npm run lint"
eslint: {
enable: false,
},
};
Does anyone know what I can do to fix the error? We've tried different versions of the npm package but all of them throw a similar error. We really need this package for a feature I am working on so there is no option for an alternative.

How to add prettier command before code commit or on save file through devdependencies

I am working with react project.
I want my vscode to autoformat when I save the code but want to do by adding some package inside package.json(I am not sure whether it is possible or not) & not with vscode because people have their own configuration in vscode so to be identical with those config i want to do it with some prettier. Here is my prettier config file
.prettierrc.json
{
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 120
}
package.json
{
"name": "XXXXXXXXXXXX",
"version": "0.1.0",
"private": true,
"dependencies": {
"antd": "^4.20.0",
"browser-image-compression": "^2.0.0",
"dotenv": "^16.0.0",
"eslint": "^8.13.0",
"eslint-config-prettier": "^8.5.0",
"formik": "^2.2.9",
"isomorphic-fetch": "^3.0.0",
"material-ui-icons": "^1.0.0-beta.36",
"moment": "^2.29.3",
"prettier-eslint": "^13.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-dropzone": "^12.0.5",
"react-js-pagination": "^3.0.3",
"react-modal": "^3.14.4",
"react-moment": "^1.1.2",
"react-multiselect-checkboxes": "^0.1.1",
"react-number-format": "^4.9.3",
"redux": "^4.2.0",
"redux-form": "^8.3.8",
"redux-observable": "^2.0.0",
"redux-promise-middleware": "^6.1.2",
"redux-thunk": "^2.4.1",
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"format": "npx prettier --write .",
"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": {
"husky": "^8.0.0",
"prettier": "2.6.2",
"pretty-quick": "^3.1.3"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
}
}

You can use Prettier with a pre-commit tool. This can re-format your files that are marked as “staged” via git add before you commit.
Make sure Prettier is installed and is in your devDependencies before you proceed.
npx mrm#2 lint-staged
use this link for further info
Pre-commit Hook

Content is not loading because its MIME type, "text/html" is not "text/css"

I tried to deploy my MERN application on Heroku, but when tried to run "heroku local" localhost 5000 showed an empty page and the console show the following errors. These are the errors:
I've already tried so many solutions but none of them worked.
This is the package.json file from the node application:
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "app.js",
"dependencies": {
"axios": "^0.21.1",
"bcrypt": "^5.0.1",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"express": "^4.17.1",
"express-handlebars": "^5.3.3",
"express-session": "^1.17.2",
"mongoose": "^5.13.7",
"nodemon": "^2.0.12",
"passport": "^0.4.1",
"passport-local": "^1.0.0",
"react-router": "^5.2.1"
},
"devDependencies": {},
"engines": {
"node": "14.16"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"cd client && npm run build",
"install-client":"cd client && npm install",
"start": "nodemon app.js",
"heroku-postbuild":"cd client && npm run install-client && npm run build"
},
"author": "",
"license": "ISC"
}
This is the code snippet added to the server.js
if (process.env.NODE_ENV == 'production') {
app.use(express.static('client/build'));
}
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'))
});
And this is the package.json from the react application
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000",
"dependencies": {
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"history": "^5.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router": "^5.2.1",
"react-router-dom": "^5.2.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts 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"
]
}
}

I think problem might be server.js file cannot access properly build folder of the frontend/client. Can you delete all of this:
if (process.env.NODE_ENV == 'production') {
app.use(express.static('client/build'));
}
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'))
});
And add this:
app.use(express.static(path.join(__dirname, './client/build')));
I assume your client folder and server.js file are at the same level, that's why it is ./client... If not, define path route accordingly. Please let me know if it works.

Jest not finding all tests

Jest is not finding all of my test files. It is ignoring a directory. When I run npm run jest:watch my tests in ./server and its subdirectories are tested but no tests are found in ./client
What I have tried
I have tried creating a generic test file and moving it around. I found it would work in the following circumstances.
I have also tried using a direct path to the file - which didn't work.
Possible causes
I think it may be something to do with the unusual directory structure I have
./client
./server
as opposed to
./server.js
./other server files..
./client/...client files
or it may be die to me trying to run jest from the node.js app and also have it look at files in the client directory (which contains an app written in React) - I don't care about running tests on react components (only modules). Alternatively it could be something to do with jest in the client directory messing things up.
filename
./server/middleware
./
./client
delete.test.js
found by jest
found by jest
not found
My setup
my folder structure looks like this
./
./client (react client app)
./client/package.json
./client/node_modules
package.json
node.modules
./server (node.js api app)
./server/package.json
my jest is running from the ./package.json file.
Other things I have tried
I have tried using direct paths for my file the below code works
"testMatch": ["<rootDir>/server/delete.test.js"],
but this code (in the folder I want) does not
"testMatch": ["<rootDir>/client/delete.test.js"],
code setup
./package.json
{
"name": "Infoshot",
"version": "0.0.4",
"description": "Research Tool",
"main": "cd ./server && server.js",
"scripts": {
"start": "cd ./server && node server.js",
"server": "cd ./server && nodemon server.js",
"client": "npm start --prefix ./client/",
"clientinstall": "npm install --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "cd ./client && NPM_CONFIG_PRODUCTION=false npm install && CI= npm run build",
"compile-saas": "node-sass ./client/src/scss/a_main.scss ./server/nodeClient/public/css/main.css -w",
"test": "jest",
"test:watch": "npm run test -- --watch"
},
"jest": {
"testEnvironment": "node",
"testPathIgnorePatterns": [
"./node_modules"
]
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.21.0",
"bcryptjs": "^2.4.3",
"config": "^3.2.2",
"dotenv": "^8.2.0",
"ejs": "^3.1.5",
"enzyme": "^3.11.0",
"express": "^4.17.1",
"express-validator": "^6.2.0",
"ijavascript": "^5.2.0",
"jest": "^26.6.3",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.7.0",
"nodemailer": "^6.4.14",
"nodemailer-sendgrid": "^1.0.3"
},
"devDependencies": {
"concurrently": "^4.1.2",
"node-sass": "^5.0.0",
"nodemon": "^1.19.2"
}
}
delete.test.json
describe.only('DELETE TEST: getDocument', () => {
test('Say Hi', async () => {
const bum = 'bum';
expect(bum).toBe(bum);
});
});
./client/package.json
As I said earlier I don't think this is relavant as it is not be run as I am running jest from ./server with npm run jest:watch
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.19.0",
"config": "^3.3.2",
"dotenv": "^8.2.0",
"enzyme-adapter-react-16": "^1.15.3",
"node-sass": "^4.14.1",
"react": "^16.9.0",
"react-beautiful-dnd": "^13.0.0",
"react-dom": "^16.9.0",
"react-router-dom": "^5.0.1",
"react-scripts": "^3.4.4",
"react-transition-group": "^4.3.0",
"serve": "^11.3.2",
"styled-components": "^5.1.1",
"uuid": "^3.3.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"previewProd": "react-scripts build && serve"
},
"jest": {
"collectCoverageFrom": [
"src/components/documentEditor/*.js",
"<rootDir>/server/",
"!<rootDir>/node_modules/",
"!<rootDir>/src/index.js",
"!<rootDir>/src/registerServiceWorker.js"
]
},
"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"
]
},
"proxy": "http://localhost:5000",
"devDependencies": {
"#testing-library/react": "^10.4.9"
}
}

I found that if I removed all the mentions of jest in the ./client/package.json and also replaced the ./package.json with
"collectCoverageFrom": [
"**/*.{js,jsx}",
"!**/node_modules/**"
]
it worked.

React app shows nothing in build and after electron-pack

It works fine in development when i do npm start or i do npm run electron-is-dev but when i run npm run build or npm run electron-pack the app doesn't show anything but it shows icon and title on the browser tab.
screenshot of how app looks after build. shows nothing
How do i fix that.
here is my package.json file.
{
"name": "cafe-chaska-pos",
"version": "1.0.0",
"author": "Touseef Ahmad",
"description": "Point of sale solution for cafe chaska",
"main": "public/electron.js",
"homepage": ".",
"private": true,
"dependencies": {
"#material-ui/core": "^4.9.13",
"#material-ui/lab": "^4.0.0-alpha.52",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"animated-number-react": "^0.1.1",
"axios": "^0.19.2",
"body-parser": "^1.19.0",
"cookie-parser": "~1.4.4",
"cors": "^2.8.5",
"debug": "~2.6.9",
"electron-is-dev": "^1.2.0",
"express": "~4.16.1",
"http-errors": "~1.6.3",
"mongoose": "^5.9.17",
"morgan": "~1.9.1",
"multer": "^1.4.2",
"node-sass": "^4.14.1",
"pug": "2.0.0-beta11",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-router-dom": "^4.3.1",
"react-scripts": "3.4.0",
"react-toastify": "^6.0.4",
"uifx": "^2.0.7"
},
"scripts": {
"start": "concurrently \"yarn start-frontend || npm run start-frontend\" \"yarn start-backend || npm run start-backend\"",
"start-backend": "nodemon ./server/bin/www",
"start-frontend": "react-scripts start",
"install-requirements": "pip install -r server/requirements.txt",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"electron-dev": "concurrently \"cross-env BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron .\"",
"electron-pack": "electron-builder -c.extraMetadata.main=build/electron.js",
"preelectron-pack": "react-scripts build"
},
"eslintConfig": {
"extends": "react-app"
},
"devDependencies": {
"concurrently": "^4.1.1",
"cross-env": "^5.2.0",
"electron": "^5.0.8",
"electron-builder": "^21.1.5",
"wait-on": "^3.3.0"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}