I am working on integrating a package library named A with another package(website) named B , but in A I was getting error where it says cannot be used as a JSX component
I was be able to solve this issue by updating A package json with:
"resolutions": { "@types/react": "17.0.14", "@types/react-dom": "17.0.14" } and also added preinstall in scripts: "preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions"
This resolved the issue, but every time I change A package which is a dependency of B, I have to remove node_modules and package-lock to have a successful build and see the new changes in B which I think it is weird anyone has any idea? here are the package.json s A, package.json
here are the package.json s
A package.json
{
"version": "1.0.0",
"scripts": {
"build-storybook": "NODE_ENV=production build-storybook -c cfg/storybook -o dist/storybook",
"build:webpack": "NODE_ENV=production webpack",
"build": "node scripts/build.js",
"lint:fix": "eslint -c .eslintrc.js --fix --ext js,jsx,ts,tsx src",
"lint": "eslint -c .eslintrc.js --ext js,jsx,ts,tsx src",
"posttest": "generate-coverage-data",
"prepublish": "npm run typescript",
"preinstall": "([ ! -f package-lock.json ] && npm install --package-lock-only --ignore-scripts --no-audit); npx force-resolutions",
"release": "rm -rf dist && tsc --p tsconfig-cjs.json && npm run build",
"scaffold": "./scripts/scaffold.sh",
"storybook:build": "build-storybook -c ./storybook-config -o
"storybook": "start-storybook -p 6006",
"test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
"test:watch": "npm run test -- --watch",
"test": "jest --coverage",
"typescript": "tsc --project tsconfig.json",
"typescript-release": "tsc --p tsconfig-cjs.json"
},
"keywords": [
"react"
],
"dependencies": {
"@hookform/resolvers": "^1.3.7",
"@react-icons/all-files": "^4.1.0",
"@testing-library/dom": "^8.13.0",
"@testing-library/react-hooks": "^8.0.1",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
"emotion": "^10.0.27",
"install": "^0.13.0",
"is-hotkey": "^0.1.8",
"is-url": "^1.2.4",
"jest-environment-jsdom-sixteen": "^2.0.0",
"lodash.clonedeep": "^4.5.0",
"lodash.differenceby": "^4.8.0",
"lodash.escaperegexp": "^4.1.2",
"lodash.get": "^4.4.2",
"lodash.isempty": "^4.4.0",
"lodash.isequal": "^4.5.0",
"lodash.set": "^4.3.2",
"lodash.sortby": "^4.7.0",
"lodash.uniqueid": "^4.0.1",
"npm": "^8.19.2",
"office-ui-fabric-react": "^7.107.0",
"react-hook-form": "^6.15.7",
"react-redux": "^8.0.2",
"react-router-dom": "^5.2.0",
"slate": "^0.60.8",
"slate-history": "^0.59.0",
"slate-react": "^0.60.8"
},
"resolutions": {
"@types/react": "17.0.14",
"@types/react-dom": "17.0.14"
},
"peerDependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"date-fns": "^2.16.1",
"react-i18next": "^11.8.7",
"i18next": "^19.8.9"
},
"devDependencies": {
"@babel/core": "^7.6.0",
"@babel/helper-validator-identifier": "7.10.4",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"@babel/plugin-proposal-object-rest-spread": "^7.12.1",
"@babel/plugin-proposal-optional-chaining": "^7.12.1",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-react-jsx": "^7.12.1",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/plugin-transform-typescript": "^7.12.1",
"@babel/preset-env": "^7.12.1",
"@babel/preset-react": "^7.12.1",
"@babel/preset-typescript": "^7.12.1",
"@babel/runtime": "7.4.5",
"@sheerun/mutationobserver-shim": "^0.3.3",
"@storybook/addon-actions": "^6.0.26",
"@storybook/addon-essentials": "^6.0.26",
"@storybook/addon-info": "5.3.21",
"@storybook/addon-knobs": "^6.0.26",
"@storybook/addon-links": "^6.0.26",
"@storybook/addons": "^6.0.26",
"@storybook/react": "^6.0.26",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@types/date-fns": "^2.6.0",
"@types/enzyme": "^3.10.7",
"@types/history": "^4.7.8",
"@types/is-url": "^1.2.4",
"@types/jest": "^26.0.24",
"@types/lodash.clonedeep": "^4.5.6",
"@types/lodash.differenceby": "^4.8.6",
"@types/lodash.get": "^4.4.6",
"@types/lodash.isempty": "^4.4.6",
"@types/lodash.isequal": "^4.5.5",
"@types/lodash.set": "^4.3.6",
"@types/lodash.sortby": "^4.7.6",
"@types/react": "^17.0.14",
"@types/react-dom": "^17.0.14",
"@types/react-router-dom": "^5.2.0",
"@types/storybook-react-router": "^1.0.1",
"@typescript-eslint/eslint-plugin": "^4.4.0",
"@typescript-eslint/parser": "^4.4.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.19",
"date-fns": "^2.16.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"eslint": "7.11.0",
"eslint-config-prettier": "^7.0.0",
"eslint-plugin-jest": "^24.1.0",
"eslint-plugin-react": "^7.21.5",
"file-loader": "^6.2.0",
"i18next": "^19.8.9",
"react-i18next": "^11.8.7",
"fs-extra": "^5.0.0",
"globby": "^8.0.1",
"history": "^4.10.1",
"husky": "^4.3.8",
"identity-obj-proxy": "^3.0.0",
"jest": "^24.9.0",
"jest-environment-enzyme": "^7.1.2",
"jest-enzyme": "^7.1.2",
"jest-transform-stub": "^2.0.0",
"jest-when": "^3.2.1",
"lint-staged": "^10.5.3",
"prettier": "^2.2.1",
"prettier-plugin-organize-imports": "^1.1.1",
"react-to-typescript-definitions": "^1.2.0",
"storybook-react-router": "^1.0.8",
"typescript": "4.7.4",
"webpack-cli": "^4.2.0"
},
"npm-pretty-much": {
"publishDir": "",
"runRelease": "always"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
}
B package.json:
{
"version": "1.0.0",
"license": "UNLICENSED",
"files": [],
"scripts": {
"check-types": "tsc --project tsconfig.json",
"cypress": "cypress install && cypress run --env configFile=dev",
"cypress:open": "cypress open --env configFile=dev",
"cypress-beta": "cypress install && cypress info && cypress run --env configFile=beta || (npm run postcypress ; exit 1)",
"cypress-beta:open": "cypress open --env configFile=beta",
"cypress-gamma": "cypress install && cypress run --env configFile=gamma || (npm run postcypress ; exit 1)",
"cypress-gamma:open": "cypress open --env configFile=gamma",
"postcypress": "npm run merge-reports",
"posttest": "if command -v generate-coverage-data >/dev/null 2>&1; then generate-coverage-data; fi",
"merge-reports": "node ./scripts/merge-reports.js",
"clean": "rm -rf $(readlink build) && rm -rf build coverage",
"createmons": "createmons",
"lint": "eslint -c .eslintrc.js --ext js,jsx,ts,tsx src",
"lint-fix": "eslint -c .eslintrc.js --fix --ext js,jsx,ts,tsx src",
"lint-fix-prettier": "npm run lint-fix && npm run prettier",
"listcloudformationoutputs": "listcloudformationoutputs",
"build": "npm run lint-fix-prettier && NODE_ENV=production webpack --config configuration/webpack.config && node ./configuration/prepare-cdk-files",
"server": "SERVER_MODE=standalone webpack serve --config configuration/webpack.config",
"mons-server": "webpack serve --config configuration/webpack.config",
"secure-mons-server": "webpack serve --config configuration/webpack.config --https --key ~/cert/keyFile.key --cert ~/cert/certFile.crt",
"prepublishOnly": "npm run build",
"prettier": "./node_modules/.bin/prettier --write 'src/**/*@(.js|.ts|.tsx)'",
"test": "jest",
"test-watch": "jest --watch",
"test:debug": "node --inspect --trace-warnings node_modules/.bin/jest --runInBand",
"test:strict": "node --trace-warnings --unhandled-rejections=strict node_modules/.bin/jest --runInBand",
"browser-test": "katal-integration-test --nightwatchBaseConfig browser-tests/nightwatch/nightwatch.base.json",
"browser-test-regenerate-screenshots": "REGENERATE_SCREENSHOTS=1 npm run browser-test -- --url http://$(hostname):4321",
"browser-test-local": "npm run browser-test -- --url http://$(hostname):4321",
"browser-test-beta-na": "npm run browser-test -- --url https://rainier-m1k.integ.amazon.com/colombiasampleapp/index.html --materialSetName katal.integration.credentials.betaEMCTestAccount --merchantId A2KAGNIRNSGDD --marketplaceId ATVPDKIKX0DER [this is an example. use your own app url]",
"browser-test-beta-eu": "npm run browser-test -- --url [url here] --materialSetName katal.integration.credentials.betaEMCTestAccount",
"browser-test-beta-fe": "npm run browser-test -- --url [url here] --materialSetName [material set here]",
"browser-test-beta-cn": "npm run browser-test -- --url [url here]--materialSetName [material set here]",
"browser-test-gamma-na": "npm run browser-test -- --url [url here] --materialSetName [material set here]",
"browser-test-gamma-eu": "npm run browser-test -- --url [url here] --materialSetName [material set here]",
"browser-test-gamma-fe": "npm run browser-test -- --url [url here] --materialSetName [material set here]",
"browser-test-gamma-cn": "npm run browser-test -- --url [url here] --materialSetName [material set here]",
"browser-test-prod-na": "npm run browser-test -- --url [url here]--materialSetName [material set here]",
"browser-test-prod-eu": "npm run browser-test -- --url [url here] --materialSetName [material set here]",
"browser-test-prod-fe": "npm run browser-test -- --url [url here] --materialSetName [material set here]",
"browser-test-prod-cn": "npm run browser-test -- --url [url here] --materialSetName [material set here]"
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": "eslint --cache --fix",
"src/**/*.{js,ts,jsx,tsx,css,md}": "prettier --write"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"dependencies": {
"@apollo/client": "3.1.3",
"@babel/core": "^7.9.0",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-env": "^7.9.5",
"@babel/preset-react": "^7.9.4",
"@babel/preset-typescript": "^7.9.0",
"@babel/register": "^7.8.6",
"@babel/runtime": "~7.12.18",
"@testing-library/jest-dom": "^5.9.0",
"@testing-library/react": "^10.0.4",
"@testing-library/react-hooks": "^3.2.1",
"@types/enzyme": "^3.10.8",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/jest": "^26.0.20",
"@types/lodash": "^4.14.149",
"@types/node": "^14.14.34",
"@types/react": "^16.8.10",
"@types/react-dom": "^16.8.3",
"@types/react-redux": "^7.1.7",
"@types/react-router-dom": "^5.1.3",
"@types/react-transition-group": "4.2.4",
"@types/redux-logger": "^3.0.7",
"@typescript-eslint/eslint-plugin": "^4.4.0",
"@typescript-eslint/parser": "^4.4.0",
"autoprefixer": "^10.2.4",
"aws-sdk": "^2.628.0",
"axios": "^0.21.1",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"core-js": "^3.9.0",
"cross-fetch": "3.1.4",
"css-loader": "^6.0.2",
"css-minimizer-webpack-plugin": "^3.0.0",
"cypress": "^7.0.0",
"date-fns": "^2.16.1",
"emotion": "^10.0.27",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"eslint": "7.11.0",
"eslint-config-prettier": "^7.0.0",
"eslint-plugin-jest": "^24.7.0",
"eslint-plugin-react": "^7.21.5",
"file-loader": "^6.2.0",
"fork-ts-checker-webpack-plugin": "^6.1.0",
"graphql": "^14.6.0",
"graphql-tag": "^2.10.3",
"html-webpack-plugin": "^5.2.0",
"husky": "^2.4.0",
"i18next": "^19.8.9",
"i18next-browser-languagedetector": "^6.0.1",
"i18next-icu": "^2.0.0",
"i18next-xhr-backend": "^3.2.2",
"identity-obj-proxy": "^3.0.0",
"intl-messageformat": "^9.4.7",
"jest": "^26.6.3",
"jest-enzyme": "^7.1.2",
"jest-transform-stub": "^2.0.0",
"js-yaml": "^4.0.0",
"junit-report-merger": "^1.0.0",
"lodash": "^4.17.11",
"mini-css-extract-plugin": "^1.3.8",
"mocha": "^3.2.0",
"mocha-junit-reporter": "^1.13.0",
"mocha-multi-reporters": "^1.1.7",
"mochawesome": "^3.1.1",
"mochawesome-merge": "^1.0.7",
"mochawesome-report-generator": "^3.1.5",
"nightwatch": "^1.5.0",
"office-ui-fabric-react": "7.107.0",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"otpauth": "^7.0.7",
"postcss": "^8.1.0",
"postcss-custom-media": "8.0.0",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^6.0.3",
"postcss-preset-env": "^6.6.0",
"prettier-plugin-organize-imports": "^1.1.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-error-boundary": "^3.1.0",
"react-hot-loader": "^4.12.21",
"react-i18next": "^11.8.7",
"react-intl": "^5.12.3",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-test-renderer": "^16.8.6",
"react-transition-group": "4.3.0",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-mock-store": "^1.5.4",
"redux-thunk": "^2.3.0",
"sass": "^1.32.8",
"sass-loader": "^12.0.1",
"style-loader": "^2.0.0",
"tachyons": "^7.0.1-5",
"terser-webpack-plugin": "^5.1.1",
"typescript": "4.7.4",
"url-loader": "^4.1.1",
"webpack": "^5.23.0",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
},
"devDependencies": {
"copy-webpack-plugin": "^5.1.1",
"lint-staged": "^10.5.3",
"prettier": "^2.2.1",
"redux-devtools-extension": "^2.13.8"
}
}
will appreciate your help
from cannot be used as a JSX component
No comments:
Post a Comment