Like the question says, I was following a tutorial and it was working fine so I wanted to implement it into my own side project app.
After adding it exactly the same as the doc says the component in the <Stack.Screen/> won't load.
I have tried multiple things but nothing seems to work. No errors either so I'm stuck on how to debug.
As I don't know which part of my code is causing the problem I will post my github repo link here.
https://github.com/totablue/ToyBoxOfWords
Answering my own question.
The thing that was causing my app to get stuck on the splashscreen was the SplashScreen.preventAutoHideAsync()
that was called while the app was loading the font.
const onLayoutRootView = useCallback(async () => {
if (fontsLoaded) {
await SplashScreen.hideAsync();
}
}, [fontsLoaded]);
this part of the code was not running so the splash screen never went away.
Used this video to load custom fonts in a different way and it fixed everything.
https://youtu.be/viIkcDYSBrI
I have tried to run your code, and it worked well. The problem is that you have not added some dependencies!
This is the package.json file that I use with your code.
{
"dependencies": {
"expo-font": "~10.2.0",
"expo-constants": "~13.2.4",
"expo-status-bar": "~1.4.0",
"#expo/vector-icons": "^13.0.0",
"expo-splash-screen": "~0.16.2",
"react-native-paper": "4.9.2",
"react-native-screens": "~3.15.0",
"#react-navigation/native": "*",
"#react-navigation/native-stack": "*",
"react-native-safe-area-context": "4.3.1"
}
}
As the title says, ESLint is complaining with this error message:
ESLint: Unable to resolve path to module '#vercel/analytics/react'.(import/no-unresolved)
In the line: import { Analytics } from '#vercel/analytics/react';
When following the instructions from this Vercel quickstart guide, using Next.js.
To sum up, the instructions are:
1- install package via NPM
npm install #vercel/analytics
2- in /pages/_app.tsx file, import it:
import { Analytics } from '#vercel/analytics/react';
function MyApp({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Analytics />
</>
);
}
export default MyApp;
My packages used:
"next": "^12.1.0",
"react": "17.0.2",
"#typescript-eslint/eslint-plugin": "^4.33.0",
"#typescript-eslint/parser": "^4.33.0",
"eslint": "^7.32.0",
"eslint-config-next": "^12.2.5",
"eslint-config-prettier": "^6.15.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.10.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jest": "^24.7.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.27.0",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-testing-library": "^3.10.2",
The NPM package installed, has this folder structure:
/node_modules/#vercel
analytics/
dist/
react/
index.cjs
index.d.ts
index.js
index.cjs
index.d.ts
index.js
package.json
tsconfig.json
...
Notice how the path in node_modules actually is '#vercel/analytics/dist/react' rather than just '#vercel/anaylitics/react' as the instructions state to do in the code to use it.
But, when CTRL+click'ing on the variable imported Analytics, my IDE properly navigates me to the definition in node_modules, to the file #vercel/analytics/dist/react/index.d.ts, which is defined like so:
// ./node_modules/#vercel/analytics/dist/react/index.d.ts
// ...
declare function Analytics(props: AnalyticsProps): JSX.Element;
export { Analytics };
My ESLint config related to the import/ module is
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
paths: ['src'],
},
},
},
If I import it as this instead:
import { Analytics } from '#vercel/analytics/dist/react'
then ESlint doesn't complain, but TSC does, with this error message:
TS2305: Module '"#vercel/analytics/dist/react"' has no exported member 'Analytics'.
Which also doesn't seem to make sense as the IDE is still finding the definition, and I can also see how the export { Analytics } line is there, so it should work...
What ESlint config or steps should I take differently to make this work without any lint/compiler errors?
When using eslint you will need to use the plugin: eslint-import-resolver-typescript with version 3.1.0 or later.
We also merged this version into eslint-config-next in this Pull Request. So this issue should also be resolved by upgrading to the latest package (13.0.4)
There is also a issue on our Github repo which with the solution: https://github.com/vercel/analytics/issues/18#issuecomment-1318424277
I have a question into vercel for a solution as I have the same issue. Probably to be expected since this is a beta product. I added the following line to my _app.js file in the meantime which allowed me to bypass the linting error and deploy to vercel. I have tested and the analytics is showing so must simply be a bug.
...
// eslint-disable-next-line import/no-unresolved
import { Analytics } from "#vercel/analytics/react";
...
Try this way
//tsconfig.json
"compilerOptions": {
"baseUrl": "./",
"paths": {
"#vercel/analytics/react": ["./node_modules/#vercel/analytics/dist/react"]
}
}
Stack:
Vue 3 (Options API)
Vite
TailwindCSS
Context:
I've been working on this app for months. If I changed something minor such as a computed property or style, the component would update but the page wouldn't. As of today, suddenly the entire app reloads on every save regardless of what changes, including adding a single whitespace which is removed via auto-format.
New Warning:
Component options are wraped by defineComponent() internally to
support intellisense on IDE for backward compatible, but this is
an hacking which lead to this component type inconsistent with
same script code on .js / .ts. Recommended wrap component options
by Vue.extends() or defineComponent(). Or you can configure
experimentalShamefullySupportOptionsApi: true / false in
vueCompilerOptions property in tsconfig / jsconfig to disable
this warning.
This warning seemingly came out of nowhere and I can't find any information about it online besides a reference to it in the newest Volar relase notes. I've tried downgrading to an older version and then disabling it entirely. This didn't work.
Config
// vite.config.js
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
import path from "path";
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"#": path.resolve(__dirname, "./src"),
},
},
});
Note that I use npm run serve which would normally be npm run dev. I swapped them because of muscle memory. This shouldn't be an issue but it's noteworthy.
// package.json
{
...
"scripts": {
"serve": "vite --host",
"build": "vite build",
"dev": "vite preview"
},
"dependencies": {
"#headlessui/vue": "^1.4.1",
"#heroicons/vue": "^1.0.4",
"#popperjs/core": "^2.11.0",
"#tailwindcss/forms": "^0.3.3",
"vue": "^3.2.6",
"vue-router": "^4.0.11",
"vuex": "^4.0.2",
"vuex-persist": "^3.1.3"
},
"devDependencies": {
"#vitejs/plugin-vue": "^1.6.1",
"#vue/compiler-sfc": "^3.2.6",
"autoprefixer": "^10.3.4",
"postcss": "^8.3.6",
"stylelint-config-recommended": "^6.0.0",
"tailwindcss": "^2.2.15",
"vite": "^2.5.4"
}
}
After several hours of debugging, it turns out that I had NODE_ENV=production leftover from testing last night.
you can try Temporarily disable Volar plugin, it won't show waining tip
I also encountered this problem, and then I disabled the volar plug-in so that there is no longer this warning message, but I do not know z there is no harm
Add the following entry to your project's jsconfig.json and you're good to go:
"vueCompilerOptions": {
"experimentalShamefullySupportOptionsApi": true
},
I think it's better than disabling Volar, especially if it's useful for you, because that's not a bug, but a new feature. Check out the changelog for more info:
https://github.com/johnsoncodehk/volar/blob/master/CHANGELOG.md
I am trying to deploy my Vue app to Vercel but encounter an error when I do. I do not think that the error is caused by Vercel per se, but something in the prod build causes a problem and I can't find what or why.
App is SSR enabled on Vite JS (Vue 3), using this boilerplate: https://github.com/frandiox/vitesse-ssr-template
After build and deployment, opening the / URL shows this error:
ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined
at Store.install (/var/task/node_modules/vuex/dist/vuex.cjs.js:911:50)
at Object.use (/var/task/node_modules/#vue/runtime-core/dist/runtime-core.cjs.prod.js:3031:28)
at /var/task/api/renderer/main.js:2694:7
at /var/task/api/renderer/main.js:2098:44
at module.exports (/var/task/api/index.js:16:28)
at Server.<anonymous> (/var/task/___vc_helpers.js:813:19)
at Server.emit (events.js:376:20)
at parserOnIncoming (_http_server.js:896:12)
at HTTPParser.parserOnHeadersComplete (_http_common.js:126:17)
Also, putting this in my main.ts file (trying to avoid problem), doesn't change anything:
app.config.devtools = false;
app.config.debug = false;
app.config.silent = true;
Content of my package.json that is used in the serverless deploy, in cas it's useful:
{
"private": true,
"dependencies": {
"node-fetch": "*",
"#vueuse/core": "^4.9.1",
"#vueuse/head": "^0.5.1",
"nprogress": "^0.2.0",
"vue": "^3.0.11",
"#vue/server-renderer": "^3.0.11",
"vue-i18n": "^9.1.6",
"vue-router": "^4.0.6",
"axios": "^0.21.1",
"#headlessui/vue": "^1.2.0",
"vuex": "^4.0.1"
}
}
Any idea of what I should look for?
Found it, seems like Vuex sets DevTools to true by default, just had to ste it to false:
const store = createStore({
devtools: false,
})
I am new to react-native but not ReactJs iam going to mad about this error from 2 days
error: bundling failed: Error: While trying to resolve module `#react-navigation/native` from file `C:\XXXXX\Example\src\Router.jsx`, the package `C:\XXXXX\Example\node_modules\#react-navigation\native\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\#react-navigation\native\src\index.tsx`. Indeed, none of these files exist:
error: bundling failed: Error: While trying to resolve module `react-native-safe-area-context` from file `C:\XXXXX\Example\App.js`, the package `C:\XXXXX\Example\node_modules\react-native-safe-area-context\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\react-native-safe-area-context\src\index.tsx`. Indeed, none of these files exist:
This is my package.json
{
"name": "Example",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.6",
"#react-navigation/native": "^5.0.0",
"#react-navigation/stack": "^5.0.0",
"eslint": "^6.8.0",
"jetifier": "^1.6.5",
"native-base": "^2.13.8",
"prop-types": "^15.7.2",
"react": "16.8.6",
"react-native": "0.60.0",
"react-native-camera": "^3.16.0",
"react-native-gesture-handler": "^1.5.6",
"react-native-image-crop-picker": "^0.28.0",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.2",
"react-native-safe-area-view": "^1.0.0",
"react-native-screens": "^2.0.0-beta.2",
"react-native-svg": "^11.0.1",
"react-native-vector-icons": "^6.6.0"
},
"devDependencies": {
"#babel/core": "^7.3.3",
"#babel/runtime": "^7.3.1",
"#react-native-community/eslint-config": "^0.0.3",
"babel-jest": "^24.1.0",
"jest": "^24.1.0",
"metro-react-native-babel-preset": "^0.54.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
I am downgrade the react-navigation version to react-navigation 4 and react-navigation-stack
the error become
error: bundling failed: Error: While trying to resolve module `react-native-safe-area-context` from file `C:\XXXXX\Example\node_modules\react-navigation-stack\lib\module\vendor\views\Stack\StackView.js`, the package `C:\XXXXX\Example\node_modules\react-native-safe-area-context\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\react-native-safe-area-context\src\index.tsx`. Indeed, none of these files exist:
I am also deleted node_modules ,clear cache and install again but no use same errors appear
After a long research MetroJS bundler default not compile typescript .ts and .tsx extension files.
We need tell MetroJS bundler to compile .ts and .tsx files
i solved this error by edit metro.config.js file in root project folder by following.
Edited on September 2022
Added cjx and json extensions to below snippet
All extensions listed below not required it's depend on what language you choose javascript or typescript, and your dependencies
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs', 'json'] //add here
},
};
The above answers did not work for me. Turns out there was nothing wrong with my files.
I simply had to terminate the react-native metro that was running on the terminal and restarted it, it worked fine.
Adding to the accepted answer by Jogi, this issue was acknowledged by the Apollo developers at https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md#apollo-client-354-2021-11-19
I was unable to resolve the issue with Jogi's answer alone, but after adding 'cjs' to the array, as recommended in the linked changelog, my app was able to start up as expected.
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs'],
},
};
For me, I'm using two terminals to run my app. 1st terminal: react-native start, 2nd: react-native run android, which builds the app and starts it on my physical device. I got the same error above when I installed a new package and rebuild my app not knowing that I had to restart the react-native server.
So what I just did is went back to 1st terminal, killed it, and re-run react-native start then rebuilt my app in the second terminal and everything is working as expected!!!
here is how my metro.config.js it looks like after configuring. i am using react-navigato 5*
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
/** include this below (remove this comment too)*/
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx'],
},
};
I got the same error with react-native-gesture-handler package.Changing metro.config.js file has worked for me.
/**
* Metro configuration for React Native
* https://github.com/facebook/react-native
*
* #format
*/
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx'],
},
};
This has worked for me.
* Metro configuration for React Native
* https://github.com/facebook/react-native
*
* #format
*/
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
sourceExts: ['jsx','js','ts','tsx'] //add here
},
};
As many of them already mentioned to customize your metro.config.js file. If it is not there create it in the root directory of your project and then add the code as everyone said. Now even after adding the code in metro.config.js file error is there, then you have to stop your expo server and restart with command
expo start -c
This works for me. Hope it will help you too.
For Expo, this version worked
https://github.com/firebase/firebase-js-sdk/issues/6253#issuecomment-1123923581
const { getDefaultConfig } = require("#expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;
Sometimes, you get this error because you install an npm package that has a main script that's not correctly integrated with your project. This could be because you have named your files differently, you have nested your file a layer deeper and causes a script to break, etc.
Check the package.json file of the package the error message tells you "main" is incorrect and see if it is correctly pointing to the app entry in the package.json of the root directory.
Doing this fixed the error for me.
for me none of the above worked but this did:
go to :
node_modules\deprecated-react-native-prop-types\DeprecatedColorPropType.js
find this line :
const normalizeColor = require('#react-native/normalize-color');
and change it to this:
const normalizeColor = require('#react-native/normalize-color/base');
I tried all the solutions above but none worked. so i did yarn install instead of npm and it worked
For me, It was to kill my metro cmd
Deleted my app from the emulator then,
run npx react-native run-android or
if you're using expo run
npm start
Error is gone
kill the already running terminal and start the project by running this command:
npx react-native start it will start your app as expected
I got the same issue.I am using yarn as my package manager. Resolved the issue by following the below steps.
Stop the metro bundler(In my case i closed terminal which terminated metro bundler).
Restart it using yarn start --reset-cache.
Run yarn android.
In my case the error was due to the cache. I followed following steps:
Navigate to android folder
cd android
after that clean the build folder
./gradlew clean
and to generate the apk file
./gradlew assembleRelease -x bundleReleaseJsAndAssets
use this to generate aab
./gradlew bundleRelease -x bundleReleaseJsAndAssets
I hope these commands will help others as well.