I am using ANTd with a React application I am building for a school project. The App runs fine however, on startup I get the following: craco: *** Cannot find ESLint loader (eslint-loader). *** which is concerning. I have looked into this and apparently this link https://github.com/gsoft-inc/craco/pull/219 offers support for the issue. I am not advanced enough to know how to apply this fix to my own React project and I feel myself and other beginners would benefit greatly from an explanation on how to do so. Thanks to whoever can help!
For react, this happens when we have DISABLE_ESLINT_PLUGIN=true in our environment variable (or in the .env.production file). Instead, we should disable ESLint in craco.
Remove DISABLE_ESLINT_PLUGIN=true from environment variable or env file.
Then in craco.config.js, add this:
module.exports = {
// ...
eslint: {
enable: false
},
// ...
}
This worked for me too. Run npm install after making changes in craco.config profile
Was an easy fix.
In package.json replace/add the following dependencies:
{
"name": "antd-demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.1.1",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.6.3",
"antd": "^4.12.2",
"craco-less": "^1.17.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.2",
"web-vitals": "^1.1.0"
},
I wanted to integrate Google Maps with my Angular project. In the pilot version, I was just following this link https://angular-maps.com/guides/getting-started/. Currently, I am stuck in error:
node_modules/#agm/core/lib/directives/map.d.ts:232:43 - error TS2694: Namespace 'google.maps' has no exported member 'MouseEvent'
232 mapDblClick: EventEmitter<google.maps.MouseEvent>;
I went to the file location and got this
mapClick: EventEmitter<google.maps.MouseEvent | google.maps.IconMouseEvent>;
/**
* This event emitter gets emitted when the user right-clicks on the map (but not when they click
* on a marker or infoWindow).
*/
mapRightClick: EventEmitter<google.maps.MouseEvent>;
/**
* This event emitter gets emitted when the user double-clicks on the map (but not when they click
* on a marker or infoWindow).
*/
mapDblClick: EventEmitter<google.maps.MouseEvent>;
/**
Dependencies:
npm install #agm/core
npm i #types/googlemaps
I found, that the workaround mentioned in some of the other answers does not work if you are using #agm/core. I came across the same error when updating to Angular 11.
It seems, that Angular 11 does not work properly in combination with #agm/core 3.0.0-beta.0 (newest version). Try to downgrade #agm/core to the previous version 1.1.0. This worked for me.
"dependencies": {
"#agm/core": "^1.1.0"
}
It work around solution found on this github response
"dependencies": {
"#angular/google-maps": "^11.0.0"
}
then add
"devDependencies": {
"#types/googlemaps": "3.39.14"
}
Guys the solution is already merged,
https://github.com/DefinitelyTyped/DefinitelyTyped/pull/50565#issuecomment-759785211
try installing #types/googlemaps#3.43.2 from npm.
I faced the same issue with Angular 11. Here is the combination that worked fine for me (package.json):
"dependencies": {
...
"#agm/core": "^1.1.0",
...
}
"devDependencies": {
...
"#types/googlemaps": "^3.39.12",
...
}
P.S.: Some tutorials recommend to add #google/maps but I did not add that package.
Had the same error on my Angular 12 project but it worked after downgrading #types/googlemaps.
"dependencies": {
"#agm/core": "^3.0.0-beta.0",
},
"devDependencies": {
"#types/googlemaps": "^3.39.12",
}
I'm adding a new answer with a radical solution.
TL;DR:
I got rid of agm/core and replaced it by the ngx-autocomplete package. I also updated my angular to v12 in the process, but that was most likely not necessary. Ref to article.
Long version:
Previously, I needed to use 2 packages
agm/core to get google-map edition that provided onAddressChange in my components so I could get the google place ID, latLng, etc
angular/google-maps for showing a map with a marker on an address
those packages need to be version-synchronized with a typescript #type/googlemaps package
After looking at various answers I found many things to watch our for
Version numbers (and presence or absence of "^" is important)
Having the #type package in dependencies and not devDependencies may help
Adding "googlemaps" to the compilerOptions.types array in all tsconfig*.json (.app.json, .spec.json, tsconfig.json)
Despite this and trying various configurations, I could not make it work. It seems like I needed, in order to fix all my bugs, both
#types/googlemaps": >= 3.39.14
#types/googlemaps": <= 3.39.12
With errors like
Generic type 'MapHandlerMap' requires 1 type argument(s).
or
Namespace 'google.maps' has no exported member 'MouseEvent'
My mindset was the following: instead of downgrading version until I find the good one, just bump everything to the latest version (using ng update it went rather smoothly), which included all angular modules, and then get rid of incompatible libraries that are not maintained and/or deprecated.
Turns out agm/core became the main culprit. Just look at how long it has been stuck at 3.0.0-beta.0, and the semver patch version beta.0 is already a big hint that you should not use this package.
After googling a bit, I found out that the ngx-google-places-autocomplete package was much more straightforward to implement, and offered a much simpler interface with only one handler to implement (just look at the article I linked in the tl;dr - you can implement it in a few secs). It was also compatible with angular/google-maps and the type package without doing anything else.
I mentioned that I upgraded to angular 12, but I believe you do not need to do this, and ngx-google-places-autocomplete can most likely work with anterior angular versions. Just get rid of agm.
I had same issue with Angular-Cli 11 and "#agm/core": "^3.0.0-beta.0",
I resolved by adding #types/googlemaps: "3.39.12" to my devDependencies, now it works !
none of the above worked for me, my angular version is 10 and as per this the issue is with compatibility of #angular/googlemaps and #types/googlemaps on which angular team is currently working.
With the latest version, MouseEvent is now named MapMouseEvent.
Tied with
"#angular/google-maps": "^13.2.3",
"#types/google.maps": "3.47.4"
be careful tho download this one not to download #types/googlemaps without the *.*, which is a deprecated library
I found this solution and work for me.
I use Angular 10
because #agm/core support latest angular v.10
Solution below,
npm i #agm/core#^3.0.0-beta.0
npm i #types/googlemaps#3.39.13 --save-dev
Full code
{
"name": "web-vacc-care-ng10",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^3.0.0-beta.0",
"#angular/animations": "~10.2.4",
"#angular/common": "~10.2.4",
"#angular/compiler": "~10.2.4",
"#angular/core": "~10.2.4",
"#angular/forms": "~10.2.4",
"#angular/platform-browser": "~10.2.4",
"#angular/platform-browser-dynamic": "~10.2.4",
"#angular/router": "~10.2.4",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1002.3",
"#angular/cli": "~10.2.3",
"#angular/compiler-cli": "~10.2.4",
"#types/googlemaps": "^3.39.13",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
}
}
Work for me.
Since upgrading to Angular 11 I started to experience this issue.
The work around is; in your "node_modules/#agm/core/lib/services/" folder, you will need to change MapHandlerMap to MapMouseEvent at a few places (check your terminal log to see where).
Currently learning React JS, I am still newbie regarding these technologies.
After updating the webpack from 4.30.0 to 5.10.0 then I run npm start, some errors appeared as below. I have tried to delete node_modules and reinstall, then npm start, it doesn't change anything.
Dependencies :
"webpack": "^5.10.0",
"webpack-cli": "^4.2.0",
"webpack-dev-middleware": "4.0.2",
"webpack-hot-middleware": "2.25.0",
"webpack-pwa-manifest": "4.3.0",
Error :
Solved similar issue with upgrading
"webpack-dev-server": "^4.0.0-beta.3",
I believe 3.x is not fully compatible.
When wrapping a component with connect()(Component), I am getting an error on my React Native application. "_react.default.memo is not a function (In _react.default.memo(ConnectFunction), _react.default.memo is undefined. How can I resolve this issue?
Screenshot of the error
I believe this issue is based on my version numbers with React and Redux. But I am unable to locate the culprit. This application is in very early development, but perhaps I just forgot to connect something with my store.
Currently my versions from package.json are the following
"dependencies": {
"expo": "^32.0.6",
"react": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-navigation": "^3.8.1",
"react-redux": "^7.0.2",
"redux": "^4.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.1.1",
"schedule": "^0.4.0"
}
I have tried rolling back react-redux to 6.0.0 and react to 16.5.0 as described in this thread but, I get a different error.
Unable to resolve "./utils/batch" from "node_modules/react-redux/lib/index.js"
I have tried uninstalling and reinstalling react-redux. (including deleting the folder). I don't even see a call to utils/batch inside that index.js file.
Any help would be greatly appreciated. The component renders correctly before connect is added. Exception happens when export default connect()(ComponentName) is invoked.
if needed, my repository is found here. Since then, though, I have toyed with the versions.
Switching to React Redux 6.0.0 npm install react-redux#6.0.0.
In order to get rid of the Unable to resolve "./utils/batch" from "node_modules/react-redux/lib/index.js"
Clear expo caches with expo r -c.
https://forums.expo.io/t/how-to-clear-the-react-native-packager/1352
I think I was just able to resolve this. I finally caved and installed yarn letting Yarn take over the dependency install seemed to have worked.
My dependencies are running at
"dependencies": {
"expo": "^32.0.6",
"react": "16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-navigation": "^3.8.1",
"react-redux": "^6.0.0",
"redux": "^4.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.1.1",
"schedule": "^0.4.0"
},
and my app is back to running with everything acting compatible again. Not sure what was done differently with Yarn. But I am relieved that I got this back up. I hope this helps others!
Currently I'm using React Native 0.42.0 with React 15.4.2, and there is a bugfix: Fix crash if native code tries to update the size of a modal view after JS has removed it in the 0.44.0 which is the latest release of the React Native. I wanted to update for the latest version but it's require 16.0.0-alpha.6 React version. There is problems, because the other npm packages don't support the alpha version of the React and they require the 15.x.x version.
What is the proper solution for this problem?
There is my related part of the package.json:
"dependencies": {
"axios": "^0.16.1",
"lodash": "^4.17.4",
"querystring": "^0.2.0",
"react": "16.0.0-alpha.6",
"react-addons-pure-render-mixin": "^15.4.2",
"react-native": "0.44.0",
"react-native-cookies": "^3.1.0",
"react-native-device-info": "^0.10.2",
"react-native-lazyload": "^1.1.0",
"react-native-router-flux": "^3.38.0",
"react-native-swiper": "^1.5.4",
"react-native-vector-icons": "^4.0.0",
"react-navigation": "^1.0.0-beta.7",
"react-redux": "^5.0.3",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0"
},
I don't know if this can be taken as a response but in my case having the same problem i only updated into the latest version possible without depending on the alpha version of react (0.42), and we'll need to wait until the next React.js versions comes out.
The official explain that i heard was that react-native take some React Fiber considerations that are not included on React.js for now