Develop Reference

React-router-dom update 5 to 6 Object(...) is not a function

I am trying to upgrade react-router-dom v5 to v6.
I removed , change to .
Now when I create simple functional component, pass to my , it works.
<BrowserRouter>
<Routes>
<Route
path="/"
key="homepage"
component={<MyComponent />}
/>
</Routes>
</BrowserRouter>
but when I try my real routes I get a lot of errors similar this:
index.tsx:66 Uncaught TypeError: Object(...) is not a function
at Module.<anonymous> (index.tsx:66:1)
at ./src/app/profile/component/profile-gallery-filter-form/index.tsx (index.tsx:94:1)
at __webpack_require__ (bootstrap:856:1)
at fn (bootstrap:150:1)
This is my package.json
{
"name": "frontend",
"version": "0.6.57",
"private": true,
"dependencies": {
"#emotion/react": "^11.7.0",
"#emotion/styled": "^11.6.0",
"#js-joda/core": "^5.2.0",
"#js-joda/timezone": "^2.12.0",
"#mui/material": "^5.2.1",
"#repugraf/tinymce-react": "^3.8.1",
"#sentry/react": "^6.19.2",
"#sentry/tracing": "^6.19.2",
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"#tinymce/tinymce-react": "^3.13.1",
"#types/autobahn": "^18.10.0",
"#types/axios": "^0.14.0",
"#types/classnames": "^2.3.1",
"#types/emoji-mart": "^3.0.9",
"#types/google-map-react": "^2.1.1",
"#types/jest": "^26.0.23",
"#types/node": "^12.20.12",
"#types/react": "^17.0.5",
"#types/react-bootstrap-date-picker": "^4.0.9",
"#types/react-chartjs-2": "^2.5.7",
"#types/react-confirm": "^0.1.4",
"#types/react-dom": "^17.0.3",
"#types/react-filepond": "^7.1.0",
"#types/react-google-recaptcha": "^2.1.2",
"#types/react-phone-number-input": "^3.0.6",
"#types/react-router": "^5.1.14",
"#types/react-router-dom": "^5.3.3",
"#types/react-select": "^4.0.15",
"#types/react-webcam": "^3.0.0",
"#types/redux-form": "^8.3.1",
"#types/redux-saga": "^0.10.5",
"#types/socket.io-client": "^3.0.0",
"#types/styled-components": "^5.1.9",
"#use-it/event-listener": "^0.1.7",
"#wojtekmaj/react-timerange-picker": "^3.5.0",
"autobahn": "^20.9.2",
"axios": "^0.21.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"bic-validator": "^1.27.0",
"bootstrap": "^5.1.3",
"classnames": "^2.3.1",
"connected-react-router": "^6.9.1",
"emoji-js": "^3.6.0",
"emoji-mart": "^3.0.1",
"eslint-plugin-deprecation": "^1.2.1",
"eslint-plugin-unicorn": "^35.0.0",
"filepond": "^4.30.3",
"filepond-plugin-file-validate-size": "^2.2.4",
"filepond-plugin-file-validate-type": "^1.2.8",
"filepond-plugin-image-preview": "^4.6.6",
"font-awesome": "^4.7.0",
"fp-ts": "^2.10.5",
"google-map-react": "^2.1.9",
"gos-socket-client": "^0.0.4",
"http-status-codes": "^2.1.4",
"io-ts": "^2.2.16",
"is-online": "^9.0.1",
"js-file-download": "^0.4.12",
"lodash": "^4.17.21",
"material-ui-dropzone": "^3.5.0",
"parcel-bundler": "^1.12.5",
"query-string": "^7.0.0",
"rc-slider": "^10.0.0-alpha.5",
"react": "^17.0.2",
"react-bootstrap": "^2.3.1",
"react-chartjs-2": "^4.0.1",
"react-chat-widget": "git+https://github.com/krajcikondra/react-chat-widget.git#v3.1.27",
"react-confirm": "^0.1.24",
"react-contenteditable": "^3.3.6",
"react-date-picker": "^8.4.0",
"react-dom": "^17.0.2",
"react-dropzone": "^11.3.2",
"react-dropzone-uploader": "^2.11.0",
"react-filepond": "^7.1.1",
"react-flags-select": "^2.1.2",
"react-google-recaptcha-v3": "^1.9.7",
"react-hover-video-player": "^9.3.1",
"react-html-parser": "^2.0.2",
"react-i18next": "^11.8.15",
"react-image-gallery": "^1.0.9",
"react-image-lightbox": "^5.1.4",
"react-images-uploading": "^3.1.2",
"react-phone-number-input": "^3.1.21",
"react-player": "^2.9.0",
"react-pro-sidebar": "^0.6.0",
"react-redux": "^7.2.4",
"react-redux-i18n": "^1.9.3",
"react-redux-toastr": "^7.6.5",
"react-router": "^5.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "4.0.3",
"react-select": "^5.2.2",
"react-sortable-hoc": "^2.0.0",
"react-string-replace": "^1.1.0",
"react-use-localstorage": "^3.5.3",
"react-webcam": "^6.0.1",
"reactjs-autobahn": "^1.8.19",
"redux-form": "^8.3.7",
"redux-form-dropzone": "0.0.1",
"redux-saga": "^1.1.3",
"sass": "^1.32.12",
"simple-peer": "^9.11.0",
"socket.io-client": "2.2.0",
"styled-components": "^5.3.0",
"ts-opt": "^2.3.0",
"typescript": "^4.2.4",
"universal-cookie": "^4.0.4",
"use-query-params": "^1.2.2",
"web-vitals": "^1.1.2"
},
"scripts": {
"start-dev": "react-scripts --openssl-legacy-provider start",
"start": "react-scripts start",
"build": "export NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
"build-dev": "react-scripts build",
"test": "react-scripts test --watchAll=false",
"eject": "react-scripts eject",
"lint": "eslint --ext .ts,.tsx src --report-unused-disable-directives",
"lint-fix": "eslint --ext .ts,.tsx src --report-unused-disable-directives --fix",
"release": "bash .docker/release.sh"
},
"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": {
"#types/chart.js": "^2.9.35",
"#types/lodash": "^4.14.168",
"#types/react-image-gallery": "^1.0.2",
"#types/react-redux-i18n": "0.0.11",
"#types/react-redux-toastr": "^7.6.0",
"#typescript-eslint/eslint-plugin": "^4.29.3",
"#typescript-eslint/parser": "^4.29.3",
"chart.js": "^3.7.1",
"filepond-plugin-image-exif-orientation": "^1.0.11"
}
}
Somebody know what is wrong? I can't figure it out. Maybe react-router-dom need other version of some other package?
Thanks in advance

react-router-dom#6 is completely written in typescript, so you can remove "#types/react-router": "^5.1.14" and "#types/react-router-dom": "^5.3.3" from the project's dependencies as they are no longer necessary and may possibly mess with any linters and transpilers your project uses.
npm uninstall -S #types/react-router #types/react-router-dom
You've also a conflicting version of react-router installed and it should be removed. react-router-dom re-exports all of react-router for convenience.
npm uninstall -S react-router
The only other issue I see is in the code. The react-router-dom#6 Route component API changed significantly from v5; there is no longer any component, and render and children function props, all replaced by a single element prop taking a ReactNode value, a.k.a. JSX.
Example:
<BrowserRouter>
<Routes>
<Route
path="/"
key="homepage"
element={<MyComponent />}
/>
</Routes>
</BrowserRouter>

Unfortunately same problem after update my code and uninstall react-router library.
After 4 hours of debugging I find out problem is in import of files.
When I import file by this way:
index.tsx
import {profileAction} from './model';
// import {profileAction} from './model/action'; // when I change import to this it works
and model/index.tsx looks
export * from './action';
export * from './action-type';
export * from './api';
export * from './state';
export * from './sagas';
and model/action.ts looks:
export const profileAction = {...}
then I ever get error like this:
index.tsx:66 Uncaught TypeError: Object(...) is not a function
at Module.<anonymous> (index.tsx:66:1)
at ./src/app/profile/component/profile-gallery-filter-form/index.tsx (index.tsx:94:1)
at __webpack_require__ (bootstrap:856:1)
at fn (bootstrap:150:1)
i haven't a clue why my imports are broken. Since update react-router-dom all imports works fine.

Uncaught TypeError: Object(…) is not a function in internal Vue3

I have strange error, i don’t know what causing this but last time i develop my project was fine. After no reason my chrome browser lost its cache data (next day). when i run my vue3 project the error appears. What console logs said
App.vue?3dfd:11 Uncaught TypeError: Object(...) is not a function
at eval (App.vue?3dfd:11)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/#vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/#vue/cli-service/node_modules/vue-loader-v16/dist/index.js?!./src/App.vue?vue&type=template&id=7ba5bd90
img1
And that pointing to something right before
img2
This is my main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
import Notifications from 'vue3-vt-notifications'
import { store } from './stores'
import Particles from 'particles.vue3'
// import tailwind css
import '../src/styles.css'
// firebase auth service
import { projectAuth } from './firebase/config'
let app
projectAuth.onAuthStateChanged(() => {
if(!app){
app = createApp(App)
.use(router)
.use(store)
.use(Particles)
.use(VueAxios, axios)
.use(Notifications)
.mount('#app')
}
})
and this is my package.json
{
"name": "myproject",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-css": "tailwindcss build src/styles.css -o public/styles.css"
},
"dependencies": {
"#dafcoe/vue-collapsible-panel": "^0.2.0",
"#tailwindcss/postcss7-compat": "^2.0.2",
"#tinymce/tinymce-vue": "^4.0.0",
"algoliasearch": "^4.10.5",
"autoprefixer": "^9.8.6",
"axios": "^0.21.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"core-js": "^3.6.5",
"d3": "^7.0.0",
"d3-svg-legend": "^2.25.6",
"d3-v6-tip": "^1.0.9",
"date-fns": "^2.16.1",
"es6-promise": "^4.2.8",
"firebase": "^8.2.1",
"firebase-admin": "^9.4.2",
"firebase-functions": "^3.13.1",
"firebaseui": "^4.7.1",
"js-md5": "^0.7.3",
"jspdf": "^2.3.1",
"node-sass": "^5.0.0",
"particles.vue3": "^1.12.2",
"postcss": "^7.0.35",
"sass-loader": "^11.0.1",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.2",
"vue": "^3.0.0",
"vue-axios": "^3.2.4",
"vue-clipboard3": "^1.0.0",
"vue-disqus": "^5.1.0",
"vue-dropdowns": "^1.1.2",
"vue-google-signin-button": "^1.0.4",
"vue-instantsearch": "^4.0.0",
"vue-load-image": "^1.1.0",
"vue-loader": "^15.9.7",
"vue-meta": "^3.0.0-alpha.2",
"vue-nav-tabs": "^0.5.7",
"vue-rate": "^2.4.0",
"vue-router": "^4.0.0-0",
"vue-typewriter": "^2.2.1",
"vue3-carousel": "^0.1.13",
"vue3-datepicker": "^0.2.4",
"vue3-vt-notifications": "^1.0.0",
"vuex": "^4.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0"
}
}
In Addition, I don’t know if this related or not every time in run serve. it finish at 98% with this warning:
img3
Somebody please help me

I also encountered the same problem, and finally found that when I imported nanoid, deconstruction was not used. After adding {}, the error was resolved. You can see if it is the problem of importing third-party libraries.

Flow 'unexpected token <' for jsx code in IDE

For some reason my ide is printing out 'Unexpected token <. Remember, adjacent JSX elements must be wrapped in an enclosing parent tag' for the following react code. I don't understand why it's printing that error since the component it's referring to is wrapped in an enclosing parent tag the <TableBody> tag specifically.
/* #flow */
import React from 'react'
import TableBody from '#material-ui/core/TableBody'
import Roster from './roster.jsx'
import type { MembersType } from '../../typeDefs/MembersType.js'
type RanksType = {
_id: string | number,
rankName: string,
members: Array<MembersType>
};
export default (props: {
members: MembersType
}) => (
<TableBody>
{props.members.map(({
_id,
rankName,
members,
}: RanksType) => (
<Roster <---specifically refering to this element
key={_id}
rank={rankName}
members={members}
/>
))}
</TableBody>
)
Package.json
{
"name": "novacms",
"private": true,
"scripts": {
"start": "meteor --settings settings-production.json --port $IP:$PORT",
"dev": "meteor --settings settings-development.json --port $IP:$PORT",
"test": "meteor test --driver-package cultofcoders:mocha --port $IP:$PORT"
},
"dependencies": {
"#babel/runtime": "^7.0.0-beta.42",
"#novacms/assign": "^1.0.0",
"#novacms/dependancy-injector": "^1.0.0",
"#novacms/event-store": "^1.0.0",
"#novacms/extend": "^1.0.0",
"#novacms/extendschema": "^1.0.1",
"#novacms/has": "^1.0.0",
"#novacms/pipe": "^1.0.0",
"#novacms/type-check": "^1.0.0",
"#material-ui/core": "^1.0.0-rc.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-optional-chaining": "^7.0.0-beta.3",
"bcrypt-nodejs": "0.0.3",
"event-emitter": "^0.3.5",
"faker": "^4.1.0",
"lodash": "^4.17.5",
"md5": "^2.2.1",
"meteor-apihelper": "^1.0.0",
"meteor-node-stubs": "^0.3.3",
"mobx": "^3.6.1",
"mobx-react": "^4.4.2",
"moment": "^2.21.0",
"npm": "^5.10.0",
"prettier": "^1.12.1",
"prop-types": "^15.6.1",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-router": "^4.2.0",
"react-storybook": "^1.0.0",
"recompose": "^0.26.0",
"semantic-ui-css": "^2.3.1",
"semantic-ui-react": "^0.79.1",
"simpl-schema": "^1.4.2",
"simpl-schema-mockdoc": "^1.0.5",
"sinon": "^4.5.0",
"spacejam": "^1.6.1"
},
"devDependencies": {
"babel-eslint": "^8.2.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"chai": "^4.1.2",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-import-resolver-meteor": "^0.4.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-meteor": "^5.0.0",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-flowtype": "^2.46.3"
},
"parser": "babel-eslint"
}
VSCode config
{
"files.eol": "\r\n",
"editor.fontFamily": "'Fira Mono', Consolas, 'Courier New', monospace",
"eslint.workingDirectories": [
"./src",
"./client",
"./imports",
"./server"
],
"react.beautify.onSave": true,
"editor.tabSize": 2,
"files.trimTrailingWhitespace": true,
"javascript.validate.enable": false,
"javascript.format.enable": false,
}
.babelrc
{
"plugins": ["transform-decorators-legacy", "transform-class-properties", "syntax-dynamic-import"]
}

I had a very similar issue.
Firstly delete (rename) your .babelrc file which you use (remove where ever you set it).
If storybook can't find that file, then it will use its own settings. This worked for me to prove that it was that file that caused the issue.
If this is the same for you then create a new .babelrc file, and place it into the storybook folder. Storybook will now use this and your project can continue to use the existing one.
The tricky part is finding the config setting in you existing .babelrc file that is breaking storybook - for me it was the react-hot-load/babel, but you don't have that listed.
My file ended up with only #babel/plugin-proposal-class-properties and #babel/plugin-proposal-rest-spread for plugins.

getDerivedStateFromProps not called in React Native

I'm trying to use the new getDerivedStateFromProps lifecycle method in my React Native component but the method never gets called. I've tried looking it up but found no issues in the react-native repo. No results on StackOverflow or Google either.
What I did find are a reddit thread and a StackOverflow issue which both cite updating react-dom as a solution, which would not work in this case since there's no dom in React Native.
Can anyone confirm if this method is supposed to work in React Native? If it can be used, any help with solving this issue will be much appreciated.
Below is a simplified version of my component:
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Auth } from '../redux';
import ChillaAPI from '../api';
const withUserData = WrappedComponent => {
class UserDataLoader extends React.Component {
static getDerivedStateFromProps(props, state) {
console.log('getDerivedStateFromProps');
if (props.uid !== state.uid) {
return {
uid: props.uid,
};
}
return state;
}
state = { uid: null };
render() {
console.log({ propsUid: this.props.uid });
console.log({ stateUid: this.state.uid });
return <WrappedComponent />;
}
}
UserDataLoader.propTypes = {
uid: PropTypes.bool.isRequired,
};
return connect(mapStateToProps)(UserDataLoader);
};
function mapStateToProps(state) {
return {
uid: Auth.selectors.getUid(state),
};
}
export default withUserData;
The log output from the component is as follows:
{ propsUid: null }
{ stateUid: null }
{ propsUid: 'jW78ej3JDgPpheadAlcrkG8UIZB2' }
{ stateUid: null }
Here is my package.json for good measure:
{
"name": "Chilla",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"start:reset": "node node_modules/react-native/local-cli/cli.js start --reset-cache",
"watch:lint": "node node_modules/eslint-watch/bin/esw -w",
"test": "jest",
"precommit": "lint-staged"
},
"lint-staged": {
"*.js": [
"node_modules/.bin/prettier --single-quote --trailing-comma es5 --write",
"eslint",
"git add"
]
},
"dependencies": {
"axios": "^0.18.0",
"firebase": "^4.13.1",
"husky": "^0.14.3",
"lint-staged": "^7.0.4",
"prop-types": "^15.6.1",
"react": "16.3.1",
"react-native": "^0.52.2",
"react-native-fetch-blob": "^0.10.8",
"react-native-image-picker": "^0.26.7",
"react-navigation": "^1.5.11",
"react-redux": "^5.0.7",
"recompose": "^0.27.0",
"redux": "^4.0.0",
"redux-logger": "^3.0.6"
},
"devDependencies": {
"babel-eslint": "^8.2.3",
"babel-jest": "22.4.3",
"babel-preset-react-native": "4.0.0",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"eslint-plugin-react-native": "^3.2.1",
"eslint-watch": "^3.1.4",
"jest": "22.4.3",
"prettier": "^1.12.1",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "react-native"
}
}

Updating to react-native#0.55.3 solved this issue

Module not found: Can't resolve 'autosuggest-highlight/match'

I am trying to compile my react website. But whenever I try to build, it fails. I keep getting
Module not found: Can't resolve 'autosuggest-highlight/match'
I have react-drawer just outside where this file is, as well as my npm and node modules up to date. Every time I try to update the files, or make a change, it doesn't even start to compile and crashes at "react-script start".
This is the code for the page that crashed:
import React from 'react';
import Autosuggest from 'react-autosuggest';
import * as AutosuggestHighlightMatch from 'autosuggest-highlight/match';
import * as AutosuggestHighlightParse from 'autosuggest-highlight/parse';
import ApiRequest from './ApiRequest.js';
class Search extends React.Component {
componentDidMount() {
new ApiRequest('GET', '/clientlist').send((res, people) => {
if (res.status == 200) {
this.setState({people});
} else if (res.status == 401 || res.status == 403) {
console.log('authentication error');
}
});
}
constructor() {
super();
this.state = {
value: '',
suggestions: [],
people: [],
selection: ''
};
this.renderSuggestion = (suggestion, {query}) => {
const suggestionText = `${suggestion.name}`;
const matches = AutosuggestHighlightMatch(suggestionText,query);
const parts = AutosuggestHighlightParse(suggestionText, matches);
return (
<span className='suggestion-content '
style={{backgroundImage: `url(${suggestion.profileimg || 'http://s3.amazonaws.com/37assets/svn/765-default-avatar.png'})`}}>
<span className="name">
{
parts.map((part, index) => {
const className = part.highlight ? 'highlight' : null;
return (
<span className={className} key={index}>{part.text}</span>
);
})
}
</span>
</span>
)
};
This is the image of my folder hierarchy:
Here is my Package.Json
{
"name": "medimo",
"version": "0.1.0",
"private": true,
"dependencies": {
"autosuggest-highlight": "^3.1.0",
"chart.js": "^2.6.0",
"es6-object-assign": "^1.1.0",
"history": "^1.17.0",
"moment": "^2.18.1",
"parse-react": "^0.5.2",
"parse-server": "^2.5.3",
"parse5": "^3.0.2",
"postcss": "^6.0.9",
"postcss-cssnext": "^3.0.2",
"react": "^15.6.1",
"react-autosuggest": "^9.3.2",
"react-chartjs-2": "^2.5.7",
"react-dom": "^15.6.1",
"react-dropdown": "^1.2.5",
"react-image": "^1.0.1",
"react-motion-drawer": "file:../custom-deps/react-motion-drawer",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"react-scripts": "1.0.10",
"react-sortable-hoc": "^0.6.7",
"react-tabs": "^1.1.0",
"socket.io-client": "^2.0.3",
"socket.io-react": "^1.2.0",
"utils": "^0.3.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3001",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^2.30.1",
"postcss-loader": "^2.0.6",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
}
}

I had the same problem with the exact same package funnily enough.
This is what I have that fixed it:
import AutosuggestHighlightMatch from "autosuggest-highlight/umd/match";
import AutosuggestHighlightParse from "autosuggest-highlight/umd/parse";

The dependency needs to be added it seems like:
npm i autosuggest-highlight

What solved the problem for me was to:
Delete node_modules directory
run npm install

Check-in official page document, following the way of import also working
import AutosuggestHighlightMatch from "autosuggest-highlight/match";
import AutosuggestHighlightParse from "autosuggest-highlight/parse";