I have been using react-leaflet for a while now, and after a few weeks I deleted the files inside the node_modules and reinstalled them, and I did not touch the react-leaflet version at all, but when I try to run the project, it gives me an error.
./node_modules/#react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| useEffect(function updatePathOptions() {
| if (props.pathOptions !== optionsRef.current) {
const options = props.pathOptions ?? {};
| element.instance.setStyle(options);
| optionsRef.current = options;
In order to run it, the react-leaflet library must be downgraded.
These are the steps:
remove react-leaflet: npm uninstall react-leaflet
update your react-scripts version to 3.3.0 or higher: npm install --save react-scripts#latest
remove node_module directory (optional)
clean cache:
npm cache clean --force
Install the working versions:
npm i react-leaflet#3.1.0 #react-leaflet/core#1.0.2
You can now run the client doing npm start.
Related
Build of my project is failing - it is throwing the below mentioned error.
React version - 17.0.2
react-scripts - 4.0.3
app-frontend\App>yarn build
yarn run v1.22.17
$ react-app-rewired build
Creating an optimized production build...
Failed to compile.
./node_modules/tempa-xlsx/node_modules/pako/lib/zlib/trees.js 237:106
Module parse failed: Unexpected token (237:106)
File was processed with these loaders:
./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| * not null.
| */
function gen_bitlen(s, desc) /* deflate_state s;/ /* tree_desc desc; / the tree descriptor //{
| var tree = desc.dyn_tree;
| var max_code = desc.max_code;
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I've tried by upgrading react-scripts from 3.44 to 4.0.3
I've removed the node_modules and re-ran the yarn install and yarn build again.
Had the exact same problem. I had to downgrade some #Babel libraries. Found the solution from here.
Basically, add this to the dependencies in your package.json:
"#babel/core": "7.19.6",
"#babel/generator": "7.19.6",
"#babel/compat-data": "7.19.4",
"#babel/helper-compilation-targets": "7.19.3",
"#babel/helper-create-class-features-plugin": "7.19.0",
"#babel/helper-module-transforms": "7.19.6",
Then run npm install again.
You need to add : above mentioned babel libraries (thatGuyDaki) in resolutions section instead of depedencies in package.json. so that it does not install any further updates of babel libraries, usually whenever your yarn-lock.json/package-lock.json files deleted, then more upto date babel version gets pulled In. that's why you are getting an error.
By adding babel libraries in resolutions : resolutions is simply a map of package names and the exact versions of those packages that should be kept in the dependency tree and also it will remove previous versions.
resolutions : {
"#babel/core": "7.19.6",
"#babel/generator": "7.19.6",
"#babel/compat-data": "7.19.4",
"#babel/helper-compilation-targets": "7.19.3",
"#babel/helper-create-class-features-plugin": "7.19.0",
"#babel/helper-module-transforms": "7.19.6"
}
I am trying to create a react app on Heroku and I want to make use of vmsg (https://github.com/Kagami/vmsg).
I have set up a small app following these instructions:
https://github.com/mars/create-react-app-buildpack
Quick Start
I also ran:
npm install vmsg --save
I am now able to confirm that this file exists:
node_modules/vmsg/vmsg.wasm
Nevertheless inside index.js I hit a problem on this code (coming from the vmsg demo)):
handleRecord = () => {
vmsg.record({
wasmURL: require("vmsg.wasm"),
shimURL: "https://unpkg.com/wasm-polyfill.js#0.2.0/wasm-polyfill.js",
}).then(record => {
this.setState({record});
});
};
I get the error message:
remote: ./src/index.js
remote: Cannot find module: 'vmsg.wasm'. Make sure this package is installed.
remote:
remote: You can install this package by running: npm install vmsg.wasm.
I suppose I only need to put the proper import at the top of index.js.
Or modify this line:
wasmURL: require("vmsg.wasm"),
Though I am not sure and what I tried failed. Am I right? If YES, what is the right way to do it?
Or do I really need to run "npm install vmsg.wasm" as mentioned in the message?
.....
After giving it a try, this is actually not a valid solution; running:
npm install vmsg.wasm
is of no use.
I created a native module and created another project to test it locally.
Here are my steps:
cd <Testing project>
npm install ../<Module project>
react-native link <module name>
react-native run-android
Then I got following error:
error: bundling failed: Error: Unable to resolve module `react-native-helloworld` from `G:\Test\App.js`: Module `react-native-helloworld` does not exist in the Haste module map
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
I've searched StackOverflow for the issue, but there's no workable solution. The suggested solution 'clear the cache and reset everything' cannot work.
However, the module can work if I publish it to https://www.npmjs.com/ and then install it via npm install <module name>.
The only difference is the installing way.
I got a similar error complaining about how it could not find 'path' from where ever it was looking for. In the end I figured out that the issue was completely unrelated.The following auto import was accidentally added to my code (probably when I was creating a style using 'textTransform')
import { transform } from "#babel/core";
Once I noticed that and removed it, the project was buildable. It might help to check recent changes in your code to see if something similar got added.
Chances are that you're accidentaly symlinking your library inside node_modules when you use npm, instead of using npm you can use yarn
yarn add file:../<module_project>
I am trying to use a package from a relative path and I have done npm install ../../ExamplePackage and react-native install ../../ExamplePackage. These packages are relative by multiple levels and not just one.
I am getting the following errors
error: bundling failed: Error: Unable to resolve module `ExamplePackage` from `/Users/vikasagr/workspace/test/ReactNative/MyPackage/src/index.js`: Module `ExamplePackage` does not exist in the Haste module map
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`. 4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
at ModuleResolver.resolveDependency (/Users/vikasagr/workspace/test/ReactNative/MyPackage/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:161:1460)
at ResolutionRequest.resolveDependency (/Users/vikasagr/workspace/test/ReactNative/MyPackage/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:91:16)
at DependencyGraph.resolveDependency (/Users/vikasagr/workspace/test/ReactNative/MyPackage/node_modules/metro/src/node-haste/DependencyGraph.js:272:4579)
at dependencies.map.relativePath (/Users/vikasagr/workspace/test/ReactNative/MyPackage/node_modules/metro/src/DeltaBundler/traverseDependencies.js:376:19)
at Array.map (<anonymous>)
at resolveDependencies (/Users/vikasagr/workspace/test/ReactNative/MyPackage/node_modules/metro/src/DeltaBundler/traverseDependencies.js:374:16)
at /Users/vikasagr/workspace/test/ReactNative/MyPackage/node_modules/metro/src/DeltaBundler/traverseDependencies.js:212:33
at Generator.next (<anonymous>)
at step (/Users/vikasagr/workspace/test/ReactNative/MyPackage/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:313)
at /Users/vikasagr/workspace/test/ReactNative/MyPackage/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:473
I tried all the steps but nothing worked. I also tried haul but that wasn't also working for me.
Symlinks were probably causing your problem. npm install with a local path installs libraries in node_modules with a symlink pointing to the local path of the package. Unfortunately this causes an issue with the react native metro bundler (" does not exist in the Haste module map").
I had the same issue with npm install. react-native install works for me, and that does not create symlinks.
Using wml is another good approach. It replicates the behavior of a symlink by automatically copying changes between your local library and its installed copy in node_modules.
See https://github.com/facebook/react-native/issues/23327 for a similar issue.
You can try WML.
https://www.npmjs.com/package/wml
What it does:
replaces npm link with something that actually works!
It worked for me !
Cheers
I want to import this npm package from npm but it returns error
I have init new project and done this
npm install #google/maps --save
var googleMapsClient = require('#google/maps')
Error is this
this is error log
error: bundling: UnableToResolveError: Unable to resolve module `url` from `/Users/barron9/Downloads/meteor/node_modules/#google/maps/lib/internal/make-api-call.js`: Module does not exist in the module map or in these directories:
/Users/barron9/Downloads/meteor/node_modules
, /Users/barron9/Downloads/node_modules
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`.
at ResolutionRequest._resolveNodeDependency (/Users/barron9/Downloads/meteor/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:394:11)
at ResolutionRequest.resolveDependency (/Users/barron9/Downloads/meteor/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:141:29)
at dependencyNames.map.name (/Users/barron9/Downloads/meteor/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:145:59)
at Array.map (native)
at ResolutionRequest.resolveModuleDependencies (/Users/barron9/Downloads/meteor/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:145:42)
at Promise.resolve.then (/Users/barron9/Downloads/meteor/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:169:21)
at process._tickCallback (internal/process/next_tick.js:109:7)
Bundling `index.android.js` 94.3% (405/417), failed.
error: bundling: UnableToResolveError: Unable to resolve module `url` from `/Users/barron9/Downloads/meteor/node_modules/#google/maps/lib/internal/make-api-call.js`: Module does not exist in the module map or in these directories:
/Users/barron9/Downloads/meteor/node_modules
, /Users/barron9/Downloads/node_modules
Please try:
import googleMapsClient from '#google/maps';
Otherwise, that package does not target React-Native, I think.
Would you consider using the correct package for react-native, which works well in my react-native project:
https://github.com/airbnb/react-native-maps