I trying to run expo-cli in browser mode.
But there is the error:
Module not found: Can't resolve '../../Utilities/Platform' in
'.../node_modules/react-native/Libraries/Core/Timers'.
I tried also to look manually for this module but no luck.
What can I do to make expo client works in web browsers?
Using a module resolver plugin to resolve dependencies to the React Native Web exports might help you. React-native-viewpager has an issue with resolving relative paths. See this comment and this entire thread: https://github.com/expo/web-examples/issues/73#issuecomment-621078860 and sample repo here: https://github.com/ricardoribas/expo-react-native-web
You can also config your webpack. You can use 'expo customize:web'. This will install #expo/webpack-config as development dependency an create a webpack.config.js.
You can define aliases on this configuration like this:
const createExpoWebpackConfigAsync = require('#expo/webpack-config')
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv)
config.resolve.alias['../Utilities/Platform'] =
'react-native-web/dist/exports/Platform'
return config
}
This should resolve your issue
As for me, If you experience this error and you have done re-install on your packages and the error still remain, Now check all your import, there must be something your are suppose to import form react-native that you are importing from somewhere else if you can find this this error will be fixed what you can do is to identify the actual wrong import
For me I do:
import Pressable from "reactnative/Libraries/Components/Pressable/Pressable
Instead of:
import {Pressable } from "react-native";
Related
I'm trying to run the Nuxt3 app but when I'm trying to run npm run dev then this error showing in my console: ERROR Cannot start nuxt: Context is not available
Anyone have face the same type of issue and how to fix that.
I had this same issue but the problem was that I was trying to use Nuxt/Vue specific functionality in a .ts file.
I was abstracting some of the lengthier functions and computed objects into a composition file, specifically import { useNuxtApp } from '#imports' and const { $store } = useNuxtApp(). The .ts file has no Nuxt context so these imports and functions just won't work there!
Might you be experiencing something similar?
I had same issue, when i try generated app for production "npm run generate".
Most likely its a version issue, update nuxt to "3.0.0-rc.8"
https://github.com/nuxt/framework/issues/6583
tried running tests with vitest and it can seem to resolve dependencies from $lib/* and $app/* this is the error, Failed to resolve import "$lib/stores/store" from "src/lib/components/Hello.svelte". Does the file exist? here is the link to the playground https://gitlab.com/paulwvnjohi/hello-vitest
It seems Vitest is NOT automatically picking up your Vite config, since it's "hidden" in svelte.config.js and I'm sure there's tons of magic stuff SvelteKit adds, such as the resolve.alias paths for things like the $lib and $app imports to work.
I don't know if Vitest core would do something automatically in the future, but now there's the vitest-svelte-kit package you can use: https://github.com/nickbreaton/vitest-svelte-kit
Install the package:
npm i -D vitest-svelte-kit
Create a file vitest.config.js and put inside the method that magically extracts the correct vite config for you, according to your settings in svelte.config.js:
// vitest.config.js
import { extractFromSvelteConfig } from "vitest-svelte-kit"
export default extractFromSvelteConfig()
Worked for me!
When i try to run react-native project via expo I get this error
E:/reacrNative23april/firestoreTester26April/node_modules/react-native/Libraries/StyleSheet/processColor.js
Module not found: Can't resolve '../Utilities/Platform' in 'E:\reacrNative23april\firestoreTester26April\node_modules\react-native\Libraries\StyleSheet'
This seems to be a common issue (as apparent through a google search), but appears to be unsolved.
There is some buzz on this link https://github.com/expo/web-examples/issues/73, but the solution is not clear.
Has anyone experienced and resolved this?
More data-
Mine is a bare workflow project, with some native modules, not sure if they can be the issue
I have tried deleteing the node_modules folder and running npm install, but no luck
There is no non-native (i.e. web) version of Utilities/Platform in react-native.
You can create a webpack.config.js (expo has a helper for this) and add an alias for the relative reference to Utilities/Platform used from within various rn libraries to the one provided by react-native-web:
const createExpoWebpackConfigAsync = require('#expo/webpack-config');
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
// Customize the config before returning it.
// Resolve relative reference ../Utilities/Platform using react-native-web
config.resolve.alias['../Utilities/Platform'] = 'react-native-web/dist/exports/Platform';
return config;
};
I've already tried what's recommended in this screenshot
by using this line of code
import AsyncStorage from '../../../node_modules/#react-native-community/async-storage'; in the file where I'm importing async-storage from react-native
but this path is unresolved, i.e. async-storage doesn't exist in this directory. I also tried installing async-storage (even though it's already installed) by running yarn add async-storage, but nothing appeared in the previously mentioned directory
There are two ways you can do this.
Firstly import AsyncStorage correctly. This will remove the warning and fix the problem.
Secondly, suppress the warning. This will just hide the warning but will cause you issues once AsyncStorage has been removed from react-native. I would not do this as the first way actually solves the problem.
Note you can get this warning if you are using a dependency that uses AsyncStorage and still imports it the old way from react-native. Installing AsyncStorage won’t fix the error. You will need to look through your dependencies’ dependencies to find out which one is causing it.
This means actually going through the code of each your dependencies to see if they use AsyncStorage. Searching through your node modules or on the dependency's Github usually is sufficient but it can take some time to find it.
Once you have found out which one is causing it, you should open an issue or create a PR with a fix on the dependency’s repo. At this point suppressing the warning is all you can do until it is fixed.
Install AsyncStorage
Install it using your favourite package manager npm or yarn
Link the dependency
Use the dependency
Installation: choose the method you usually use
npm i #react-native-community/async-storage
or
yarn add #react-native-community/async-storage
Link the dependency (you may not have to do this if you are using 0.60+ as it has Autolinking)
react-native link #react-native-community/async-storage
Then you import it like this, and use it as before.
import AsyncStorage from '#react-native-community/async-storage';
You can see more about it by looking here
Suppress the warning.
Previously you would use YellowBox to suppress warnings, this has now changed to LogBox. The process is similar to that of YellowBox
import { LogBox } from 'react-native';
Then you can add the following
LogBox.ignoreLogs(['Warning: Async Storage has been extracted from react-native core']);
I usually do it in the App.js so it is easy to keep track of which ones I have hidden.
It won't remove the warning from your console, but it will remove any LogBox warnings associated with the error. However, I wouldn’t do this on this occasion as there is a proper fix, which is to install the dependency correctly.
Expo users
Currently Expo still imports AsyncStorage from react-native, due to this you may still experience the warning. I believe it still imports it this way for backwards compatibility reasons. A quick search of the Expo repo shows that there are many instances where it is used as you can see here. In this case your only option would be to suppress the warning. According to the Expo feature requests it is currently in progress, so hopefully it should be added to Expo shortly.
Expo Update
As of June 2020: #react-native-community/async-storage v1.11.0 can be installed in Expo managed apps. Hopefully this will lead to less of these warnings appearing as dependencies transition to the new way of importing async-storage.
Repo update
There is now a new repository for async-storage which can be found here
https://github.com/react-native-async-storage/async-storage
Check out the documentation for installation and linking instructions
https://react-native-async-storage.github.io/async-storage/docs/install/
If the source of the issue is Firebase then a working solution as of version 9.9.2 is to set the default persistence layer used by Firebase to store the authentication session to be AsyncStorage after correctly importing it:
expo install #react-native-async-storage/async-storage
then to add in firebase.js
import AsyncStorage from '#react-native-async-storage/async-storage';
import { initializeAuth, getReactNativePersistence} from 'firebase/auth/react-native';
and then to export { auth } via
const auth = initializeAuth(app, {
persistence: getReactNativePersistence(AsyncStorage)
});
export { auth };
Unlike getAuth(), initializeAuth() gives us control over the persistence layer .
Reference.
For me this issue was with #firebase.
node_modules/#firebase/app/dist/index.rn.cjs.js
following the steps above from Andrew, in vscode I was able to remove the warning.
copy "AsyncStorage"
cmd + shift + f - then paste "AsyncStorage" into search
click three dots under search '...'
right click node_modules folder select 'copy path'
add path to 'files to include' in vscode search
find one example of the import or require statement for the original (incorrect) AsyncStorage, copy that. Paste it into the search, replacing the first search query.
Once all the imports are found install the AsyncStorage correctly for the new version (as mentioned above), also add to pods, then go through and replace all
require('react-native').AsyncStorage; => require('#react-native-community/async-storage').AsyncStorage;
import AsyncStorage from 'react-native'; => import AsyncStorage from '#react-native-community/async-storage';
I did a clean build with xcode, Then all was good to go, no more warning :-)
This seems to be an ongoing issue on Firebase with React Native.
Check out this thread:
https://github.com/firebase/firebase-js-sdk/issues/1847
I have been annoyed by this similar issue and here is my warning message. I simply solved it by:
go to: 'node_modules/react-native/index.js'
simply comment out all the lines that contains 'AsyncStorage'
Then it was working fine for me.
Credits to #Rory for the below steps:
Note: We need to find var reactNative = require('react-native') in node_modules
Note: If you don't want to do the following steps, just navigate to node_modules/#firebase/auth/dist/rn/index.js
cmd + shift + f - then paste var reactNative = require('react-native') into search
click three dots under search '...'
right click node_modules folder select copy path
add path to files to include in vscode search
Then in index.js where we find our search, do the following replacements:
// var reactNative = require('react-native');
var AsyncStorage = require('#react-native-community/async-storage');
// and further below
// var reactNativeLocalPersistence = getReactNativePersistence(reactNative.AsyncStorage);
var reactNativeLocalPersistence = getReactNativePersistence(AsyncStorage);
Refresh and the warning is gone!
if you're using npm
npm install #react-native-async-storage/async-storage
yarn
yarn add #react-native-async-storage/async-storage
YellowBox has been replaced with LogBox. You can use LogBox.ignoreLogs() instead to suppress the warning
In my case firebase using asyn storage from react native . I am using v8 firebase which has no getReactNativePersistence.
So I had this solution which may be helpful.
Keep below code snippet in one file ignoreWarning.js and import in App.js on top of file .
import { LogBox } from "react-native";
const ignoreWarns = [
"AsyncStorage has been extracted from react-native",
];
const warn = console.warn;
console.warn = (...arg) => {
for (const warning of ignoreWarns) {
if (arg[0].startsWith(warning)) {
return;
}
}
warn(...arg);
};
LogBox.ignoreLogs(ignoreWarns);
I have React js installed via NPM and using browserify to manage components in react. When an exception occurs in React, the console shows as
"Uncaught Error: Minified exception occurred; use the non-minified dev
environment for the full error message and additional helpful
warnings."
How do I enable full error messages ?
Setting NODE_ENV to development as Benjamin Gruenbaum pointed out in the comment resolved the issues.
set NODE_ENV=development
If you are encountering this issue with Karma + Webpack, the following Webpack configuration fixed the issue for me when running tests:
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
})
]
I FINALLY SOLVED THIS.
If you're like me and ran that command to set NODE_ENV and it's literally never worked, check if you're linking to react.min.js instead of the full versions of the files.
Link to the full versions and it should work like a charm. :D
If you are using jspm to bundle your code, note that version 0.16.24 imports the minified "production" version of React, which throws this error. My temporary solution was to downgrade jspm to 0.16.23.
edit Future versions of jspm will allow you to declare production vs. development versions (see jspm beta documentation)
I had this issue, and for me I didn't need to disable minification or use react source. My script was just loading before the root element. So I just moved the script out of the head and below the div in the index file source code and that fixed it.
Changed my index.jade from this:
html
head
title Super coo site
script(src="bundle.js")
body
div#root
To this:
html
head
title Super coo site
body
div#root
script(src="bundle.js")
I got this error when my render method returned undefined eg
render() {
let view;
// Not paying attention and slip a case where view won't get assigned a value
if(this.props.foo == 'hello') {
view = <HelloView />
}
else if(this.props.foo == 'bye') {
view = <ByeView />
}
return view;
}
This will trigger the error when this.props.foo is 'hi'
Have you check the DOM element that you are trying render ? I had this error before due to a silly mistake. The worst part is bundle was minified. The element id is not same
Index.html
<div id="ds-app"></div>
app.jsx
React.DOM.render(<App/>, document.getElementById('app'))
As of version 15.2, production React error messages (NODE_ENV=production) now include a URL that you can visit where you can see the original, unobfuscated error.
https://twitter.com/dan_abramov/status/748969886433546240
You should consider upgrading to React 15.2 in order to get access to these error messages. Additionally, some production crash reporting tools automatically unminify these errors for you.
use the min.js files in production or bundle your application code with process.env.NODE_ENV === 'production' and you should be good to go!
If your package.json scripts has dll， try exec npm run dll or yarn run dll.
I am developing my first Shopify app and using heroku to host it. Nothing worked for me until I discovered this topic and one other. Here is my vite.config.js:
import react from "#vitejs/plugin-react";
import "dotenv/config";
/**
* #type {import('vite').UserConfig}
*/
export default {
define: {
"process.env.SHOPIFY_API_KEY": JSON.stringify(process.env.SHOPIFY_API_KEY),
"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
},
//plugins: [react()],
plugins: [
process.env.NODE_ENV !== `production` ? react({
jsxRuntime: `classic`,
}) : react(),
],
};
NODE_ENV=development
I hope this helps someone
In my case, it was because of package-lock.json. Delete and redeploy