I've been working on a project, but when I try to build it I got the following error:
Failed to minify the code from this file:
./node_modules/emailjs-com/es/utils/validateParams.js:1:7
I am using craco to build the project. I have researched about this error, but I was not able to make any of the solutions I found work on my case.
My package.json:
{
"name": "my-portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"-": "^0.0.1",
"#craco/craco": "^5.9.0",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-brands-svg-icons": "^5.15.3",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/react-fontawesome": "^0.1.14",
"#heroicons/react": "^1.0.1",
"dotenv": "^10.0.0",
"emailjs": "^3.5.0",
"emailjs-com": "^3.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-icons": "^4.2.0",
"react-scripts": "^1.1.5",
"save-dev": "^0.0.1-security"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"devDependencies": {
"autoprefixer": "^9.8.6",
"gh-pages": "^3.2.3",
"postcss": "^7.0.36",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.2"
}
}
I would like to know if there is a way to build it without executing any minification, or if it is really required, how to solve the minification that I am having when trying to minify my code.
Related
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,
};
I get this error when I try to run my TypeScript application:
Namespace '"C:/DevTools/git/motor.ui/node_modules/history/index"' has no exported member 'LocationState'.
This is my package.json:
{
"name": "motor.ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"#digital/react-avis-atom": "^2.4.0",
"#elastic/apm-rum": "^5.6.1",
"#types/react-router-dom": "^4.3.0",
"axios": "^0.18.0",
"classnames": "^2.2.6",
"moment": "^2.22.2",
"query-string": "5",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-moment": "^0.7.9",
"react-router-dom": "^4.4.0-alpha.1",
"react-scripts-avis": "2.16.75"
},
"scripts": {
"start": "react-scripts-avis start",
"build": "sh -ac '. ./.env.${REACT_APP_ENV}; react-scripts-avis build'",
"build:sys": "REACT_APP_ENV=sys yarn run build",
"build:uat": "REACT_APP_ENV=uat yarn run build",
"build:production": "REACT_APP_ENV=production yarn run build",
"test": "react-scripts-avis test --env=jsdom",
"eject": "react-scripts-avis eject",
"lint": "yarn tslint",
"tslint": "tslint -t stylish -c tslint.json -e '**/node_modules/**/*' 'src/**/*.+(ts|tsx)'",
"tslint-fix": "yarn tslint --fix",
"tslint-staged": "LIST=`git diff-index --cached --name-only HEAD | grep .*\\\\.ts | grep -v json`; if [[ ! -z ${LIST} ]]; then tslint -t stylish $LIST; else echo 'empty'; fi",
"analyze": "source-map-explorer build/static/js/main.*",
"uploadSrcMap": "NODE_TLS_REJECT_UNAUTHORIZED=0 node ./tools/sourceMapUploader.js"
},
"coverageThreshold": {
"global": {
"branches": 90,
"functions": 90,
"lines": 90,
"statements": 90
}
},
"devDependencies": {
"#types/classnames": "^2.2.6",
"#types/enzyme": "^3.1.13",
"#types/enzyme-adapter-react-16": "^1.0.3",
"#types/jest": "^23.3.1",
"#types/node": "^10.9.4",
"#types/react": "^16.4.13",
"#types/react-dom": "^16.0.7",
"#types/webpack-env": "^1.13.6",
"axios-mock-adapter": "^1.15.0",
"enzyme": "^3.5.0",
"enzyme-adapter-react-16": "^1.3.1",
"source-map-explorer": "^1.6.0",
"typescript": "^3.0.3"
},
"homepage": "."
}
How do I resolve this?
Your version of #types/react-router-dom is too old, try upgrading to a 5.x version.
This is a very strange issue but I was using react-table 7.0.0.rc16 and I recently upgraded to react-table 7.0.1 the problem is my data works in dev mode but as soon I create a react build it wont render anything I would like to know why and I am attaching my package.json for the same.
sandbox
Demo
Package.json
{
"name": "test",
"homepage": "http://www.test.com",
"version": "0.0.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^1.3.11",
"#material-ui/core": "^4.4.2",
"#material-ui/icons": "^4.4.3",
"#material-ui/lab": "^4.0.0-alpha.39",
"#material-ui/pickers": "^3.2.6",
"bootstrap": "^4.4.1",
"classnames": "^2.2.6",
"date-fns": "^2.9.0",
"echarts": "4.2.1",
"echarts-for-react": "^2.0.15-beta.0",
"formik": "^1.5.8",
"formik-material-ui": "^0.0.22",
"google-map-react": "^1.1.5",
"i18next": "^17.0.18",
"i18next-browser-languagedetector": "^4.0.0",
"i18next-xhr-backend": "^3.2.0",
"immutable": "^4.0.0-rc.12",
"node-sass": "^4.12.0",
"prop-types": "^15.6.1",
"react": "^16.9.0",
"react-csv": "^2.0.3",
"react-custom-scrollbars": "^4.2.1",
"react-d3-tree": "^1.16.1",
"react-dom": "^16.9.0",
"react-google-maps": "^9.4.5",
"react-i18next": "^10.13.1",
"react-redux": "^7.1.1",
"react-router-dom": "^5.1.2",
"react-scripts": "^2.0.3",
"react-table": "7.0.1",
"redux": "^4.0.4",
"redux-saga": "^1.1.3",
"yup": "^0.27.0"
},
"scripts": {
"start": "react-scripts start",
"watch": "react-scripts start --watch",
"build": "CI=false react-scripts --expose-gc --max-old-space-size=4096 build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"devDependencies": {
"eslint-config-prettier": "^6.4.0",
"eslint-plugin-prettier": "^3.1.1",
"prettier": "^1.18.2"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Package-lock.json is also attached as a file
image of table
I am using node v10.23.1 and npm 6.14.10.
This is a problem with react-table v7.0.1, upgrading to v7.0.2 fixes the problem.
It's a minification bug. Here is the exact commit that fixed the problem.
From the Changelog :
7.0.2
Fixed an issue where the internal flexRenderer would not work correctly in production due to the strangest friggin' minification bug
I've ever encountered. 🤷♂️
When running npm start I get this error
Cannot find module 'react-dev-utils/WebpackDevServerUtils'
I even tried deleting and reinstalling. Any help? Here's package.json
{
"name": "tic-tac-toe-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4",
"webpack": "^4.15.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"react-dev-utils": "^5.0.1",
"react-scripts": "^1.1.4",
"webpack": "^1.15.0",
"webpack-cli": "^3.0.8",
"webpack-command": "^0.4.1",
"webpack-dev-server": "^3.1.4"
}
}
Delete the "node_modules' folder within the project
Then run npm install again
I use reactjs for frontend and expressjs for backend API.
I tried this
{
"name": "carweb",
"version": "0.1.0",
"private": true,
"dependencies": {
"async": "^2.5.0",
"body-parser": "^1.17.2",
"cors": "^2.8.4",
"crypto-js": "^3.1.9-1",
"dotenv": "^4.0.0",
"expressjs": "^1.0.1",
"jquery": "^3.2.1",
"jwt-simple": "^0.5.1",
"nodemon": "^1.11.0",
"react": "^15.6.1",
"react-countup": "^2.1.1",
"react-document-title": "^2.0.3",
"react-dom": "^15.6.1",
"react-materialize": "^1.0.6",
"react-rethinkdb": "^0.6.0",
"react-router-dom": "^4.1.2",
"react-scripts": "1.0.10",
"rethinkdb": "^2.3.3",
"spicy-datatable": "^0.4.0",
"web-storage": "^1.0.0"
},
"scripts": {
"start": "react-scripts start",
"backend": "nodemon ./src/js/backend/app.js",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
This work perfectly. So I want to combine both commands together.
I tried:
react-scripts start && nodemon ./src/js/backend/app.js
This is not working.
Try this npm package https://www.npmjs.com/package/concurrently
It'll allow you to do what you want. The question is "is this approach correct"