React-Native "/Components` could not be found from " Error - reactjs

This is my first question on Stack.
I am trying to run react-native project.But i have this problem
i tried to start with npx,lots of times delete node modules and reinstall npm.
Also at every starting use -- --reset-cache. and run "npm install then react-native upgrade --legacy"
"dependencies": {
"#react-native-async-storage/async-storage": "^1.14.1",
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/bottom-tabs": "^5.11.8",
"#react-navigation/native": "^5.9.3",
"#react-navigation/stack": "^5.14.3",
"#reduxjs/toolkit": "^1.5.0",
"#thecodingmachine/redux-toolkit-wrapper": "^1.3.0",
"axios": "^0.21.1",
"i18next": "^19.9.1",
"jetifier": "^1.6.6",
"react": "16.8.3",
"react-i18next": "^11.8.8",
"react-native": "^0.59.9",
"react-native-appearance": "^0.3.4",
"react-native-flipper": "^0.78.0",
"react-native-gesture-handler": "^1.0.16",
"react-native-onboarding-swiper": "^1.1.4",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.18.0",
"react-navigation": "^4.4.4",
"react-redux": "^7.2.2",
"react-router-native": "^5.2.0",
"reactjs-components": "^5.0.3",
"redux": "^4.0.5",
"redux-flipper": "^1.4.2",
"redux-persist": "^6.0.0",
"then": "0.0.1",
"upgrade": "^1.1.0"
},
"devDependencies": {
"#babel/core": "7.13.1",
"#babel/runtime": "^7.13.7",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "26.6.3",
"babel-plugin-module-resolver": "^4.1.0",
"eslint": "^7.21.0",
"eslint-import-resolver-babel-module": "^5.2.0",
"eslint-plugin-import": "^2.22.1",
"jest": "26.6.3",
"metro-react-native-babel-preset": "0.65.1",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"moduleNameMapper": {
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
},
"setupFiles": [
"./jest.setup.js"
],
"timers": "fake",
"testEnvironment": "jsdom"
i tried lots of things but here is the conclusion;
error: bundling failed: Error: Unable to resolve module `../../Components` from `/home/egehan/Masaüstü/mobile-master/src/Containers/Example/Index.js`: The module `../../Components` could not be found from `/home/egehan/Masaüstü/mobile-master/src/Containers/Example/Index.js`. Indeed, none of these files exist:
* `/home/egehan/Masaüstü/mobile-master/src/Components(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx) ```

Related

SCRIPT1028: SCRIPT1028: Expected identifier, string or number

I am working on an React App, and I can not open this app in Safari and IE.
For IE-11: SCRIPT1028: SCRIPT1028: Expected identifier, string or number
For Safari(10.1.2) : SyntaxError: Unexpected token '...'. Expected a property name.
my package.json file is as..
"dependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.6.2",
"#storybook/addon-backgrounds": "^3.4.8",
"#storybook/react": "^4.0.0-alpha.4",
"#types/d3": "^5.0.0",
"#types/debug": "^0.0.30",
"#types/enzyme": "^3.1.9",
"#types/jest": "^23.1.4",
"#types/moment-timezone": "^0.5.4",
"#types/react": "^16.9.11",
"#types/react-dom": "^16.9.3",
"#types/react-intl": "^2.3.16",
"#types/react-mentions": "2.4.0",
"#types/react-redux": "^7.1.5",
"#types/react-router": "^5.1.2",
"#types/react-router-dom": "^5.1.0",
"#types/react-select": "^1.2.6",
"#types/react-show-more": "^2.0.1",
"#types/reactour": "^1.13.1",
"#types/redux": "^3.6.0",
"#types/redux-form": "^7.3.1",
"#types/redux-logger": "^3.0.6",
"#types/storybook__addon-backgrounds": "^3.2.0",
"#types/storybook__react": "^3.0.8",
"#types/styled-components": "^4.1.19",
"awesome-typescript-loader": "^5.2.0",
"axios": "^0.18.0",
"babel-engine-plugin": "^0.3.0",
"babel-loader": "^7.0.0",
"babel-register": "^6.26.0",
"connected-react-router": "^4.4.1",
"cosed": "^1.1.8",
"d3": "^5.7.0",
"date-fns": "^1.29.0",
"debug": "^3.1.0",
"duplicate-package-checker-webpack-plugin": "^3.0.0",
"emoji-mart": "^2.6.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"gen-tester": "^3.1.2",
"history": "^4.10.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.1.0",
"husky": "^0.14.3",
"immer": "^1.3.1",
"jest": "^23.3.0",
"jest-environment-enzyme": "^6.0.2",
"jest-enzyme": "^6.0.2",
"jest-styled-components": "^6.0.0",
"lint-staged": "^7.2.0",
"moment-timezone": "^0.5.14",
"prettier": "^1.13.7",
"prop-types": "^15.7.2",
"react": "^16.11.0",
"react-cosed": "^1.0.9",
"react-dom": "^16.11.0",
"react-intl": "^2.8.0",
"react-redux": "^5.1.1",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-select": "^1.2.1",
"reactour": "^1.15.4",
"redux": "^4.0.0",
"redux-cosed": "^1.0.1",
"redux-form": "^8.2.6",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.3.0",
"styled-components": "^4.4.1",
"ts-jest": "^23.0.0",
"tslint": "^5.9.1",
"tslint-config-prettier": "^1.13.0",
"tslint-no-circular-imports": "^0.5.0",
"typescript": "^3.0.1",
"uglifyjs-webpack-plugin": "^1.2.7",
"url-loader": "^1.0.1",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.5",
"webpack-merge": "^4.1.3"
},
"devDependencies": {
"#types/lodash.debounce": "^4.0.4",
"firebase-tools": "^6.1.0",
"lodash.debounce": "^4.0.8"
}
If some more details needed please let me know.
Please suggest, what do i need to do.... Thanks
My webpack.js file is as....
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const {
CheckerPlugin,
TsConfigPathsPlugin,
} = require('awesome-typescript-loader');
const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
const ROOT = path.resolve(__dirname, '..');
module.exports = {
module: {
rules: [
{
test: /.tsx?$/,
use: 'awesome-typescript-loader',
exclude: /node_modules/,
},
{
test: /.(png|jpg|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 25000,
},
},
],
},
{
test: /.html$/,
use: 'html-loader',
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
modules: [path.resolve(ROOT, 'shared'), 'node_modules'],
plugins: [new TsConfigPathsPlugin()],
},
plugins: [
new HtmlWebPackPlugin({
template: path.join(ROOT, 'shared', 'index.html'),
filename: './index.html',
}),
new CheckerPlugin(),
new DuplicatePackageCheckerPlugin(),
],
};
I think babel-loader will work but can't find any way to use babel-loader. I need this app to run on ie11 and safari as well.
Please suggest some solution...
The issue is that by default the application was being rendered on IE7, that is - not on IE11/Edge that supports the transpiled build. So I had to mention the meta information to let the browser know that the intended browser is IE11/Edge. Add this to the head section of your index.html:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Now you might be getting some errors in the console that read SCRIPT5009: 'Set' is undefined - refer to the below link relating to polyfills for the Set collection type:
React JavaScript Environment Requirements
For more information on the issue see:
React app not rendering in IE11 and below
Because you are opening it in Microsoft edge, try opening it in latest chrome version... problem will be solved.....this works for ReactJs projects

Something in your build process is loading the wrong version

I am getting following error. Can't figure out solution. I found many post which looks duplicate here but, nothing work.
like: Requires Babel "7.0.0-0" but was loaded with "6.26.3"
node_modules#babel\helper-plugin-utils\lib\index.js
throw Object.assign(err, {
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of #babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "#babel/core" or "babel-core" to see
what is calling Babel.
Here following is my package.json
"dependencies": {
"express": "^4.16.4",
"isomorphic-fetch": "^2.2.1",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-redux": "^5.1.1",
"react-router": "^4.3.1",
"react-router-config": "^1.0.0-beta.4",
"react-router-dom": "^4.3.1",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.2.2",
"#babel/plugin-proposal-class-properties": "^7.2.0",
"#babel/plugin-transform-runtime": "^7.2.0",
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^24.0.0",
"babel-loader": "^7.1.5",
"css-loader": "^1.0.1",
"cypress": "^3.1.3",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1",
"enzyme-to-json": "^3.3.5",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.0.0",
"jest-fetch-mock": "^2.0.1",
"json-loader": "^0.5.7",
"nodemon": "^1.18.9",
"npm-run-all": "^4.1.5",
"open": "0.0.5",
"redux-devtools": "^3.4.2",
"redux-mock-store": "^1.5.3",
"regenerator-runtime": "^0.13.1",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.0.1",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14",
"webpack-node-externals": "^1.7.2"
},
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-transform-runtime",
"#babel/plugin-proposal-class-properties"
]
}
I am getting on npm start.
"start": "webpack -d && nodemon --exec babel-node ./server"
Found it :-)
I noticed that babel-node is not among your dependencies, therefore you must be using a global version of babel-node, likely version 6... So, just add the correct one into your devDependencies:
npm install --save-dev #babel/node
What is the output of npm ls babel-core? I realised that I have babel-cli#6.26.0 and babel-register#6.26.0, I removed them and installed #babel/cli and #babel/register
My config files look like this:
In package.json:
"resolutions": {
"babel-core": "7.0.0-bridge.0"
}
In .babelrc :
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-transform-runtime",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-transform-async-to-generator"
]}
After all changes, it might be a good idea to delete your lock file and rebuild it.

material UI Multiple Select not viewing several selected items when they selected, my be css issue

I tried to use the Multiple Select. But I get a difference, is that when many items are selected, they are not viewed, I couldn't change the height to be enough to display selected options. please help.
I am sure it is height property because I added height:auto using chrome console and so selected options could be viewed and issue solved at the console. You can guide me through adding the height feature properly. The height may be added to chips style at the styles.
By the way, the problem doesn't appear on a fresh copy of create-react-app that I tested it on it today, but my project which faces the problem is based on a create-project-app generated long time ago, I thought updates or create-react-app releases make difference.
Material UI version: v1.0.0-beta.33
package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": {
"auth/google": {
"target": "https://server243.azurewebsites.net"
},
"/api/*": {
"target": "https://server243.azurewebsites.net"
},
"/apis/*": {
"target": "https://server243.azurewebsites.net"
}
},
"dependencies": {
"autoprefixer": "7.1.6",
"aws-amplify": "^0.2.0",
"aws-amplify-react-native": "^0.2.2",
"axios": "^0.17.1",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.1.0",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.7",
"dotenv": "4.0.0",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.0.1",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"jquery": "^3.2.1",
"material-ui": "^1.0.0-beta.24",
"material-ui-icons": "^1.0.0-beta.17",
"materialize-css": "^0.100.2",
"moment": "^2.20.1",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"prop-types": "^15.6.0",
"raf": "3.4.0",
"react": "^16.0.0",
"react-bootstrap": "^0.31.5",
"react-dev-utils": "^4.2.1",
"react-dom": "^16.0.0",
"react-hot-loader": "^3.1.3",
"react-loader": "^2.4.2",
"react-loading-skeleton": "^0.3.1",
"react-moment": "^0.6.8",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-select": "^1.0.0-rc.10",
"react-select-me": "^0.9.0",
"react-virtualized-select": "^3.1.0",
"redux": "^3.7.2",
"redux-auth": "0.0.5-beta5",
"redux-auth-wrapper": "^2.0.2",
"redux-thunk": "^2.2.0",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"universal-cookie": "^2.1.2",
"url-loader": "0.6.2",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.3",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
"cypress:open": "cypress open"
},
"devDependencies": {
"cypress": "^1.4.1"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,mjs}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"mjs",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
Temporary solution: I updated the height and padding at node_modules\material-ui\Select\Select.js but I wish I get right way to solve it.
selectMenu: {
width: 'auto', // Fix Safari textOverflow
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
lineHeight: 'calc(1em + ' + (theme.spacing.unit * 2 - 2) + 'px)',
// I, abdulrhman, added the following:
height:'auto',
paddingTop: 20,
},
I believe the SelectField will have the expected behavior in newer versions of the beta. You should try updating to the latest version (material-ui^1.0.0-beta.33 at the time of this writing).
You can update to this version with the npm command:
npm install --save material-ui#1.0.0-beta.33

Issue with react-dom when deploying on heroku Error: Cannot resolve 'file' or 'directory' ./lib/ReactDOM

I have a create-react-app on heroku. When I try to deploy a change to production it is failing and giving me the following error:
Module not found: Error: Cannot resolve 'file' or 'directory' ./lib/ReactDOM in /tmp/build_a87ef5601c25702212bff26dba1f999c/node_modules/react-dom
However, it is successful when I do npm run build. Here is my package.json file:
{
"name": "test_app",
"version": "0.1.0",
"private": true,
"devDependencies": {
"autoprefixer": "6.5.1",
"babel-core": "6.17.0",
"babel-eslint": "7.0.0",
"babel-jest": "16.0.0",
"babel-loader": "6.2.5",
"babel-preset-react-app": "^1.0.0",
"case-sensitive-paths-webpack-plugin": "1.1.4",
"chalk": "1.1.3",
"connect-history-api-fallback": "1.3.0",
"cross-spawn": "4.0.2",
"css-loader": "0.25.0",
"detect-port": "1.0.1",
"dotenv": "2.0.0",
"eslint": "3.8.1",
"eslint-config-react-app": "^0.3.0",
"eslint-loader": "1.6.0",
"eslint-plugin-flowtype": "2.21.0",
"eslint-plugin-import": "2.0.1",
"eslint-plugin-jsx-a11y": "2.2.3",
"eslint-plugin-react": "6.4.1",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.9.0",
"filesize": "3.3.0",
"find-cache-dir": "0.1.1",
"fs-extra": "0.30.0",
"gzip-size": "3.0.0",
"html-webpack-plugin": "2.24.0",
"http-proxy-middleware": "0.17.2",
"jest": "16.0.2",
"json-loader": "0.5.4",
"object-assign": "4.1.0",
"path-exists": "2.1.0",
"postcss-loader": "1.0.0",
"promise": "7.1.1",
"react": "^15.4.1",
"react-addons-test-utils": "^15.4.1",
"react-dev-utils": "^0.3.0",
"react-dom": "^15.4.1",
"recursive-readdir": "2.1.0",
"rimraf": "2.5.4",
"strip-ansi": "3.0.1",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.13.2",
"webpack-dev-server": "1.16.2",
"webpack-manifest-plugin": "1.1.0",
"whatwg-fetch": "1.0.0"
},
"dependencies": {
"axios": "^0.15.2",
"react": "^15.4.1",
"react-bootstrap": "^0.30.6",
"react-dom": "^15.4.1",
"react-redux": "4.4.5",
"react-router": "^3.0.0",
"redux": "^3.6.0",
"redux-logger": "^2.7.4",
"redux-thunk": "^2.1.0",
"socket.io": "^1.5.1"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"jest": {
"moduleFileExtensions": [
"jsx",
"js",
"json"
],
"moduleNameMapper": {
"^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/FileStub.js",
"^.+\\.css$": "<rootDir>/config/jest/CSSStub.js"
},
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testPathIgnorePatterns": [
"<rootDir>/(build|docs|node_modules)/"
],
"testEnvironment": "node"
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
I tried removing the node_modules file and re-installing per the advice here but I continue to get the same error. I have buildpack set up with heroku and was able to successfully deploy the app last week. Any help or advice would be greatly appreciated.

Unable to get test coverage for react using JEST

I am trying to run JEST for the react code,it always shows PASS and not running any script written inside test folder.Inside coverage folder also i am not getting any components folder being created.kindly let me know how to fix it
following are my configurations
package.json
{
"devDependencies": {
"axios": "^0.11.1",
"babel": "^6.5.2",
"babel-core": "^6.7.4",
"babel-eslint": "^4.1.6",
"babel-jest": "^9.0.3",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"bower-webpack-plugin": "^0.1.9",
"css-loader": "^0.23.1",
"es6-promise": "^3.2.1",
"es6bindall": "0.0.5",
"eslint": "^1.10.3",
"eslint-loader": "^1.0.0",
"eslint-plugin-react": "^5.0.0",
"express": "^4.13.4",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.4",
"grunt": "^1.0.1",
"grunt-cli": "^1.2.0",
"grunt-jest": "^0.2.0",
"grunt-webpack": "^1.0.11",
"imports-loader": "^0.6.5",
"jasmine-ajax": "^3.2.0",
"jest-cli": "^0.9.2",
"node-sass": "^3.4.2",
"react": "^15.0.0",
"react-dom": "^15.0.0",
"react-fileupload": "^2.2.0",
"react-hot-loader": "^1.2.9",
"react-router": "^2.6.1",
"sass-loader": "^3.2.0",
"sinon": "^1.17.4",
"style-loader": "^0.13.1",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
},
"scripts": {
"prestart": "webpack",
"build": "webpack",
"test": "jest",
"lint": "node_modules/.bin/eslint -f html app-client.js components > report.html || exit 0",
"start": "node app-server.js"
},
"jest": {
"scriptPreprocessor": "<rootDir>/jest-script-preprocessor",
"collectCoverage": true,
"preprocessorIgnorePatterns": [
"../frontend/node_modules/"
],
"testFileExtensions": [
"js",
"es6"
],
"moduleFileExtensions": [
"js",
"json",
"es6"
],
"unmockedModulePathPatterns": [
"react",
"fbjs",
"react-dom",
"react-addons-test-utils",
"es6bindall",
"axios",
"promise",
"react-router",
"sinon"
],
"verbose": true
}
}
The folder for your tests should be __tests__ not tests. If you want to change that you need to use testRegex option.
If you want run it with coverage you can do:
jest --coverage
or in your script case:
npm test -- --coverage
Be aware that I am talking about latest version of Jest (14.x). You can find an example I wrote about setting up Jest and running tests with or without coverage.

Resources