Hello,
I am currently trying to display a Leaflet map on a react-native application.
I use the Expo Snack online editor for testing.
I imported the "leaflet" and "react-leaflet" packages:
{
"dependencies": {
"leaflet": "1.8.0",
"react-leaflet": "4.0.0",
"expo-constants": "~13.1.1",
"#expo/vector-icons": "^13.0.0",
"react-native-paper": "4.9.2"
}
}
but when importing "react-leaflet" in the App.js file, I have the following error:
react_leaflet error (Unable to resolve module 'hooks.js')
Can you help me, thanks.
Related
I develop a cross-platform react-native application inside a monorepo and want to render my app using react-native-web in the browser. To achieve that I followed this guide https://mmazzarolo.com/blog/2021-09-22-running-react-native-everywhere-web/. I'm also using the metro-react-native-babel-preset package for compiling my web-app, as described in the react-native-web guide https://necolas.github.io/react-native-web/docs/multi-platform/. Here is a part of my craco.config.js file (I use create-react-app with craco):
// craco.config.js
const webpack = require("webpack");
const { getWebpackTools } = require("react-native-monorepo-tools");
const monorepoWebpackTools = getWebpackTools();
module.exports = {
babel: {
presets: ["module:metro-react-native-babel-preset", "#babel/preset-react"]
},
webpack: {
configure: (webpackConfig) => {
// Allow importing from external workspaces.
monorepoWebpackTools.enableWorkspacesResolution(webpackConfig);
// Ensure nohoisted libraries are resolved from this workspace.
monorepoWebpackTools.addNohoistAliases(webpackConfig);
return webpackConfig;
},
Now it seems like the metro-react-native-babel-preset preset is not compatible with the stylis library (imported by #emotion/react), because I get this error when launching the app in the browser (it compiles without errors):
Uncaught TypeError: (0 , _stylis.middleware) is not a function
at createCache (emotion-cache.browser.esm.js:288)
at Object.../node_modules/#emotion/react/dist/emotion-element-699e6908.browser.esm.js (emotion-element-699e6908.browser.esm.js:11)
at __webpack_require__ (bootstrap:851)
at fn (bootstrap:150)
at Object.<anonymous> (emotion-react.browser.esm.js:3)
at Object.../node_modules/#emotion/react/dist/emotion-react.browser.esm.js (emotion-react.browser.esm.js:347)
at __webpack_require__ (bootstrap:851)
at fn (bootstrap:150)
at Object.../node_modules...
I guess that the stylis-package cannot be imported correctly due to the metro-react-native-babel-preset preset, since without the preset the error is gone (but the compilation-step throws errors, so removing the preset is not a solution).
What do I have to change in my babel- / webpack-config or code to remove this error?
Minimum, reproducible example
https://github.com/Tracer1337/stackoverflow-mre
I think it is a problem with packages version.
When I try it, I also have this error.
But when updated packages to newer version it was gone (other error occured thought, but related to reactDOM).
I have updated react-scripts to 5.0.0;
See if it helps you as well.
{
"name": "#meme-bros/web",
...
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#mui/material": "^5.2.3",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"metro-react-native-babel-preset": "^0.66.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-native-web": "^0.17.5",
"react-scripts": "5.0.0",
"typescript": "^4.1.2"
},
"devDependencies": {
"#craco/craco": "^6.4.3",
"react-native-monorepo-tools": "^1.1.4"
},
...
Would you mind to follow these guidelines to run React Native app on web. Official Doc
And Add #emotion/react in compileNodeModules list
I have a sveltekit project I have been working on, and configured graphcaching a while ago with #urql/exchange-graphcache. However i just installed a new dependency (dayjs, though i think it is irrelavant), and now it is throwing the error:
Failed to resolve import "#urql/exchange-graphcache" from "src/routes/$layout.svelte". Does the file exist?
I get the same error when I roll back before installing dayjs, and just doing a new yarn install. I tried looking through the graphcache error page but found nothing of help. Can anyone help with what might be the error?
If it helps, these are my dependencies
"dependencies": {
"#urql/svelte": "^1.2.0",
"dayjs": "^1.10.4"
},
"devDependencies": {
"#graphql-codegen/cli": "^1.21.3",
"#graphql-codegen/typed-document-node": "^1.18.4",
"#graphql-codegen/typescript": "^1.21.1",
"#graphql-codegen/typescript-operations": "^1.17.15",
"#graphql-typed-document-node/core": "^3.1.0",
"#sveltejs/adapter-node": "next",
"#sveltejs/kit": "next",
"graphql": "^15.5.0",
"svelte": "^3.29.0",
"svelte-preprocess": "^4.0.0",
"tslib": "^2.0.0",
"typescript": "^4.0.0",
"vite": "^2.1.0"
}
ERROR in ./src/components/navigator/Navigator.tsx
Module not found: Error: Can't resolve '#material-ui/icons/DnsRounded' in '.../src/components/navigator'
# ./src/components/navigator/Navigator.tsx 36:0-59 53:30-44
# ./src/components/App.tsx
# ./src/index.tsx
Current dependencies:
"dependencies": {
"#material-ui/core": "^4.6.0",
"#material-ui/icons": "^4.5.1",
"core-js": "^3.4.0",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0"
}
one of the example import I did in the Navigator.tsx is:
import HomeIcon from '#material-ui/icons/Home';
// in render method:
<HomeIcon />
Things I have tried to fix this issue:
1. npm i #material-ui/icons#latest (next, old 3.x.x versions, etc)
2. reinstall the dependencies.
3. add icon link to index.html.
So far none of them have worked. I keep getting the module not found error while compiling. I also checked the node_modules, I can find the #material-ui/icons package in there. Moreover, I can use cmd + click to navigate to the source code in my VSCode.
Again, I am trying to use the SVG Icon instead of the Font Icon.
I know this has been asked countless times, but I am not able to fix the problem inspite of following all the SO solutions and suggestions.
I came to know about jest a few days ago and tried to have my hands on it. There is a good tutorial mentioned on DZone about using jest to test react components. However, when I try testing one of the components from the starter directory, I am having this issue,
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (../../../../../../usr/local/lib/node_modules/jest/node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
at emitTwo (events.js:106:13)
As per suggested in this SO post, I have already installed babel-preset-react and added it to my webpack.config.js file.
Here is my webpack.config.js file, my package.json file , the .babelrc file
Please note that I have already gone through the solutions posted in these SO posts -
Link 1
Link 2
Link 3
which might be apparent from the changes in my .babelrc and webpack files
But I'm not able to fix the issue that I'm having. Please let me know if I am missing something here, since I have spent a good 3-4 hrs searching SO and other forums for any answer and I can't seem to find it.
Update 1: Here is my test file - Clock.test.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Clock from 'Clock';
describe('Clock',()=>{
it("renders without crashing",()=>{
const div = document.createElement('div');
ReactDOM.render(<Clock/>,div);
});
});
I was trying to follow up that tutorial but could not even install it without errors. As I see it, the tutorial is old, webpack 1 is deprecated, and other packages also undergone changes. You could try my steps, but it may not work for you.
In the starter/CountdownTimer folder run npm install. If it throws
this errors: “Cannot read property 'find' of undefined”, then run npm cache verify and npm install.
Then run npm install –save-dev jest#18.0.0 to install jest.
In the app folder create __tests__ folder in there create app.test.jsx
and Clock.test.jsx.
Add “jest” to the package.json test script.
Change your .babelrc.
Here is how the files look like:
// app.test.jsx
describe('App', () => {
it('should be able to run tests', () => {
expect(1 + 2).toEqual(3);
});
});
// Clock.test.jsx
import React from 'react';
import ReactDOM from 'react-dom';
// Note the path.
import Clock from '../components/Clock';
describe('Clock',()=>{
it("renders without crashing",()=>{
const div = document.createElement('div');
ReactDOM.render(<Clock/>,div);
});
});
// package.json
{
"name": "countdown-timer",
"version": "0.0.1",
"description": "",
"main": "server.js",
"scripts": {
"start": "node server.js",
"test": "jest"
},
"author": "Joyce Echessa",
"license": "MIT",
"dependencies": {
"express": "^4.14.0",
"react": "^15.4.0",
"react-dom": "^15.4.0"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.26.0",
"foundation-sites": "^6.2.4",
"jest": "^18.0.0",
"jquery": "^3.1.1",
"node-sass": "^3.13.0",
"sass-loader": "^4.0.2",
"script-loader": "^0.7.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.3"
}
}
// .babelrc
{
"presets": [["es2015"], ["react"]]
}
Run npm test. This worked for me to get tests passing, hope it will help you too.
I have the Browserify entry-file index.js that imports from a file in the same directory and the the 'render' function from 'react-dom', which is installed in node_modules (see Package.json for versioning) --
// index.js
import { Header } from './header'
import { render } from 'react-dom'
render(<Header />, document.getElementById('root'));
I also have another file header.js which imports 'react' and creates a simple React class --
// header.js
import React from 'react'
export const Header = React.createClass({
render:() => {
return (
<div>
some header title
</div>
)
}
});
I use Babel to transpile es6 code so the "import" statements map to the necessary "require" statements. As far as I can tell this step is working properly. After transpiling with Babel, I use Browserify to package all the dependencies into a single file. The problem I am running into is I'm getting an "Uncaught ReferenceError: React is not defined" once I attempt to render the packaged javascript.
It looks like imports work fine in index.js but are not being resolved properly in header.js. For example, if I import React from 'react' in index.js, everything renders properly. It looks like I'm having an issue with recursive requires, but I can't seem to figure out why that is the case. Any thoughts would be greatly appreciated. I would be glad to supply more information as well.
For reference, here is an excerpt from my Package.json --
{
"dependencies": {
"babel-preset-es2015": "~6.3.13",
"babel-preset-react": "~6.1.18",
"babel-register": "~6.2.0",
"history": "^1.12.0",
"material-ui": "^0.13.4",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-router": "~1.0.0",
"react-tap-event-plugin": "^0.2.1"
},
"devDependencies": {
"browserify": "~11.2.0",
"del": "^2.1.0",
"express": "~4.13.3",
"express-urlrewrite": "~1.2.0",
"gulp": "~3.9.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-babel": "~6.1.1",
"gulp-print": "~2.0.1",
"gulp-rename": "~1.2.2",
"gulp-sass": "~2.1.0",
"gulp-sourcemaps": "1.6.0",
"gulp-uglify": "^1.5.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
}
}
For example, if I import React from 'react' in index.js, everything renders properly
Every file that uses JSX syntax (e.g. <Header />) needs to import React. You get the error because you are not doing that in index.js and it works once you are doing it.
If you'd look at the compiled code, you will see that <Header /> is converted to React.createElement(Header).