I'm trying to use react native navigation in my app, but get odd error. I'm using online platform Code Sandbox with React Native template.
Dependencies:
#react-native-material/core 1.3.7
#react-navigation/native 6.1.2
#react-navigation/native-stack 6.9.8
react 17.0.* (17.0.2)
react-dom 17.0.* (17.0.2)
react-native 0.71.1
react-native-safe-area-context 4.5.0
react-native-screens 3.19.0
react-native-web 0.18.* (0.18.12)
react-scripts 3.4.1
import React from "react"
import { Text } from "#react-native-material/core"
import { NavigationContainer } from "#react-navigation/native"
import { createNativeStackNavigator } from "#react-navigation/native-stack"
/* ^^^ problem line ^^^ */
const Stack = createNativeStackNavigator()
function App() {
return <Text>Example text</Text>
}
export default App
Error:
ModuleNotFoundError
Could not find module in path: 'react-native/Libraries/Utilities/Platform'
relative to '/node_modules/react-native/Libraries/StyleSheet/processColor.js'
I tried delete and re-add react-native dependency as well as recreate the sandbox, but the problem hasn't gone.
Related
I'm working on a single-spa React version 5.9.4, which currently it is configured with react 17. But when I try to update to React 18, it doesn't recognize the createRoot method from DOMClient, which is set up like this:
react-mf-hello-world.tsx file
import React from 'react';
import * as ReactDOMClient from 'react-dom/client';
import singleSpaReact from 'single-spa-react';
import Root from './root.component';
const lifecycles = singleSpaReact({
React,
ReactDOMClient,
rootComponent: Root,
// eslint-disable-next-line #typescript-eslint/no-unused-vars
errorBoundary(err, info, props) {
// Customize the root error boundary for your microfrontend here.
return null;
},
});
export const { bootstrap, mount, unmount } = lifecycles;
And this is the error I'm getting:
console
*Even though I have configured React 18, it's using the render method, so it behaves like React 17.
** Uncaught TypeError: application '#react-mf/hello-world' died in status SKIP_BECAUSE_BROKEN: m.createRoot is not a function**
versions dependencies of my proyect:
react 18.2.0
react-dom 18.2.0
single-spa 5.9.4
single-spa-react 5.0.0
webpack 5.75.0
Any help is greatly appreciated!
I was able to solve it! The problem was that I needed to update the cdn react version of the root project of my single spa.
Anyone knows how I can import each of below function in Vue and React without an error?
Right now I am getting an error if I am importing vueFetch and reactFetch.
So if am importing vueFetch into a Vue project, I am getting an error for React that React is not defined and the same applies if I import reactFetch (Vue ref not defined).
import { vueFetch } from './composables/vue/vue-fetch';
import { reactFetch } from './composables/react/react-fetch';
export { vueFetch, reactFetch };
I am trying to make a Vue and React NPM package, but I only have one index file, and I need to import both Hook into the single index file. So I do not need to create 2 packages.
here is the link to the package: https://www.npmjs.com/package/use-lightweight-fetch
I am working on a project using Nextjs (version 11.1.0), Chakra UI/React (version 1.6.6) and Swiper React (version 7.0.2). It's working properly, but I am getting this ESLint issue:
Unable to resolve path to module 'swiper/react'`.
I already tried to use type: modules in package.json and the experimental flag in next config experimental: { esmExternals: true }. Using type: modules solves it but then Nextjs throws an error asking to remove it. The experimental flag does nothing.
Currently, these are my imports:
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/css'
import 'swiper/css/free-mode'
I already tried variations such as:
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js'"
but that doesn't work either.
I've got a simple create-react-app going, have firebase (^9.1.1) npm package installed, and am trying to get up and running (this is my first go with Firebase - I have no idea what I'm doing...)
import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore';
const config = {
...
}
export const firestoreApp = initializeApp(config)
export const db = getFirestore(firestoreApp)
console.log(db.name)
When webpack works its magic, I get the following error
Failed to compile.
./node_modules/firebase/firebase-firestore.js
Module not found: Can't resolve 'https://www.gstatic.com/firebasejs/9.1.1/firebase-app.js' in '/Users/<user>/git/<project>/node_modules/firebase'
Looking at the file, the top has an import from a URL import { _registerComponent, registerVersion, _getProvider, getApp, _removeServiceInstance, SDK_VERSION } from 'https://www.gstatic.com/firebasejs/9.1.1/firebase-app.js';
Is this normal? I've never seen an import from a URL like this (but I'm also not a native JS dev) Is this a webpack issue and I'm just a dunce? A bug?
Yep, It's a bug. I had the same problem. Fixed it downgrading to the version before 9.1.1:
npm install firebase#9.1.0
I create a new React Native project and install #shoutem/ui in project and include the Examples component of Shoutem UI into React Native app.
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Examples } from '#shoutem/ui';
class HelloWorld extends Component {
render() {
return (
<Examples />
);
}
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
But when I run start the project , I get "Unknown named module: 'react/lib/NativeMethodsMixin'" error.
The bug seems to be inside the #shoutem/animation module, in the Parallax.js file: https://github.com/shoutem/animation/blob/develop/Parallax.js
NativeMethodsMixin is not imported correctly from react:
If you change this:
import NativeMethodsMixin from 'react/lib/NativeMethodsMixin';
to this: import NativeMethodsMixin from 'react';
your app should work.
I would either file a Github issue on the #shoutem/animation project or check if the way NativeMethodsMixin is imported is specific to an older version of react and then use that version in your app.
I hope this helps.
This is fixed as of v0.8.9 release of #shoutem/animation.