how to fix roll up error while building vue apps? - vue.js

i want to deploy simple personal website using vue but when i try to npm run build this error come up help me please...
i try deleting the image but onother similiar error come's up
error during build:
RollupError: Could not resolve "../img/react%202.png" from "src/component/avatarmenu.vue"
at error (file:///C:/Users/adity/OneDrive/Documents/LATIHAN/personal-w-vue/node_modules/rollup/dist/es/shared/rollup.js:2041:30)
at ModuleLoader.handleInvalidResolvedId (file:///C:/Users/adity/OneDrive/Documents/LATIHAN/personal-w-vue/node_modules/rollup/dist/es/shared/rollup.js:23137 :24)
at file:///C:/Users/adity/OneDrive/Documents/LATIHAN/personal-w-vue/node_modules/rollup/dist/es/shared/rollup.js:23099:26

Im so stupid,i just found out that you can't have a blank space in a image file name if you do that than vue would fill that blank with random stuff

Related

Expo SplashScreen Standalone Build Failed

I am trying to build my application at Expo but I have the following problem:
Error Expo
When looking at the build error log, I have the following message:
Using manifest: {"ios":{"supportsTablet":true,"userInterfaceStyle":"light"},"web":{"favicon":"./assets/favicon.png"},"icon":"./assets/icon.png","name":"Porta do Sol","slug":"portaDoSol","splash":{"image":"./assets/splash.png","imageUrl":"https://d1wp6m56sqw74a.cloudfront.net/~assets/761e4c800ce1de9fd90da12f45687087","resizeMode":"contain","backgroundColor":"#ffffff"},"android":{"package":"com.interface.portadosol","userInterfaceStyle":"light"},"iconUrl":"https://d1wp6m56sqw74a.cloudfront.net/~assets/5aab62d1ae6a0f65e10f12c0e55d20dd","locales":{},"updates":{"fallbackToCacheTimeout":0},"version":"0.0.1","platforms":["ios","android","web"],"entryPoint":"./index.js","sdkVersion":"38.0.0","orientation":"portrait","dependencies":["#react-native-community/masked-view","#react-navigation/drawer","#react-navigation/native","#react-navigation/stack","expo","expo-splash-screen","expo-sqlite","expo-status-bar","expo-updates","native-base","react","react-dom","react-native","react-native-appearance","react-native-gesture-handler","react-native-reanimated","react-native-safe-area-context","react-native-screens","react-native-svg","react-native-svg-charts","react-native-web","sqlite"],"bundledAssets":["asset_3a2ba31570920eeb9b1d217cabe58315.ttf","asset_8b12b3e16d591abc926165fa8f760e3b.json","asset_744ce60078c17d86006dd0edabcd59a7.ttf","asset_461d9bba8b6a3c91675039df12cfe6ca.json","asset_140c53a7643ea949007aa9a282153849.ttf","asset_94c4ffdcbffeb0570c635d7f8edd8a25.json","asset_ca9ce9ff0676a9b04ef0f8a3ad17dd08.ttf","asset_54a5c98d22f313098b3dbe2d5b2e87ba.json","asset_b49ae8ab2dbccb02c4d11caaacf09eab.ttf","asset_39843e5d52a6c5c42d5abdb0b34bcaa6.json","asset_b06871f281fee6b241d60582ae9369b9.ttf","asset_f1f91feb805137c9283fb766620ec5eb.json","asset_09dd345dbd4ec5a0874841d5749ac153.json","asset_0886a6b127c6057cee83f9c65c7ffd62.json","asset_f6c6f6c8cb7784254ad00056f6fbd74e.ttf","asset_b70cea0339374107969eb53e5b1f603f.ttf","asset_c39278f7abfc798a241551194f55e29f.ttf","asset_e20945d7c929279ef7a6f1db184a4470.ttf","asset_60668d999bbaf663420340f7bdd580d7.json","asset_b2e0fc821c6886fb3940f85a3320003e.ttf","asset_3e6805fbc794680014716b8c752f20b8.json","asset_3c851d60ad5ef3f2fe43ebd263490d78.ttf","asset_1a0e3525dd5df87e77057204129a5e6e.json","asset_a37b0c01c0baf1888ca812cc0508f6e2.ttf","asset_7e078700f0c35367a56c5bbb2047dda7.json","asset_8e7f807ef943bff1f6d3c2c6e0f3769e.ttf","asset_fdc01171a7a7ea76b187afcd162dee7d.json","asset_d2285965fe34b05465047401b8595dd0.ttf","asset_647543ebfccf6e5495434383598453d1.json","asset_5cdf883b18a5651a29a4d1ef276d2457.ttf","asset_74d124a3caeac2bea111f3ca2f2dd34a.json","asset_7d40544b395c5949f4646f5e150fe020.png","asset_cdd04e13d4ec83ff0cd13ec8dabdc341.png","asset_a132ecc4ba5c1517ff83c0fb321bc7fc.png","asset_0ea69b5077e7c4696db85dbcba75b0e1.png","asset_f5b790e2ac193b3d41015edb3551f9b8.png","asset_5223c8d9b0d08b82a5670fb5f71faf78.png","asset_fd0192cf977ddf7b60b4e21e332f6b76.json","asset_15e61754d2d3825004eed075f496ae28.png","asset_778ffc9fe8773a878e9c30a6304784de.png","asset_376d6a4c7f622917c39feb23671ef71d.png","asset_c79c3606a1cf168006ad3979763c7e0c.png","asset_02bc1fa7c0313217bde2d65ccbff40c9.png","asset_35ba0eaec5a4f5ed12ca16fabeae451d.png"],"id":"#matheusms21/portaDoSol","releaseId":"c05eb142-056f-40e6-a330-79bd258d0e14","revisionId":"0.0.1-r.OkgIqpx_B","publishedTime":"2020-10-04T03:29:57.730Z","commitTime":"2020-10-04T03:29:57.793Z","bundleUrl":"https://d1wp6m56sqw74a.cloudfront.net/%40matheusms21%2FportaDoSol%2F0.0.1%2Fecb187f580b4c9bbd9873239fc05375e-38.0.0-android.js","releaseChannel":"default","hostUri":"exp.host/#matheusms21/portaDoSol"}
Error: ENOENT: no such file or directory, open '/app/turtle/workingdir/android/sdk38/android-shell-app/app/src/main/res/drawable/splashscreen.xml'
The strange thing is that yesterday I managed to finish the build, but today I have this error, and I did not make any changes to SplashScreen or anything like that.
Thanks to anyone who can help me.
Now the build finished without the error.
It was probably their mistake that was corrected at this point.
Thank you all :)

Vue Cli remote preset crashes on Invoking Generators

i'm trying to create a remote vue cli preset on github, but for some reason i keep getting a syntax error.
My preset repo: https://github.com/christoph-schaeffer/vue-preset
The command i have entered: vue create --preset christoph-schaeffer/vue-preset testProject
The Error i get:
šŸš€ Invoking generators...
ERROR SyntaxError: Identifier 'router' has already been declared (15:7)
SyntaxError: Identifier 'router' has already been declared (15:7)
at Object._raise (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:762:17)
at Object.raiseWithData (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:755:17)
at Object.raise (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:749:17)
at ScopeHandler.checkRedeclarationInScope (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:4826:12)
at ScopeHandler.declareName (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:4792:12)
at Object.checkLVal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:9367:22)
at Object.checkLVal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:865:15)
at Object.parseImportSpecifierLocal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12706:10)
at Object.maybeParseDefaultImportSpecifier (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12751:12)
at Object.parseImport (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12677:31)
At first it worked fine, then i've added several things in the preset.json along with a generator template.
After getting the error i've tried reverting the whole repo to the state it had when it was still working. However i still get that error...
I guess it's not really about the preset but instead an issue with my global babel package or something?
I'm using vue-cli version 4 and im working on a mac
Any directions on how i could get this running would be highly appreciated
I've found the issue.
First: the vue cli somehow seems to cache remote presets. That's the reason why it didn't work even after reverting changes.
The actual issue was, that the main.js shouldn't be changed like the other template files and needs special attention. For some weird reason it gives those random errors as soon as you have a main.js in your template.
If anyone is curious on how to modify your main.js in a preset check out :
https://cli.vuejs.org/dev-guide/plugin-dev.html#changing-main-file

How to fix relative module error for a newly created nuxt.js app with starter template?

I tried to create a nuxt app with the guide from the official website, chose default options because I wanted the starter template but on running npm run dev, I keep encountering the error:
This relative module was not found:
* ./components/nuxt-error.vue in ./.nuxt/index.js
I've tried searching about it but I couldn't find any useful resource/fix. I've also tried vue init nuxt-community/starter-template for the installation but I still get the same error.
Any fixes?
So I found a solution. I couldnā€™t figure out the error because the nuxt-error.vue file was actually imported correctly. Turns out ā€œnpmā€ installations have been giving me issues (had issues with TailwindCSS too).
So if you ever encounter this error on loading the base nuxt app, recreate the project using ā€œyarnā€ instead. Works like magic!
This Error basically means, that in one of your files you are trying to import another file with the relative path of ./components/nuxt-error.vue but no file with this path exists.
However
I just read that vue init nuxt-community/starter-template is deprecated and no longer maintained. Instead of fixing this Error you should restart your project with npx create-nuxt-app <yourAppName>. https://github.com/nuxt-community/starter-template

ā€œPage Not Foundā€ when navigating to site created with Gridsome & deployed on Netlify

I've created a new site using Gridsome deployed with Netlify, but I can't get the site to appear when accessed. Instead, Netlify says:
Page Not Found
Looks like you've followed a broken link or entered a URL that doesn't exist on this site.
< Back to our site
I tried updating my build settings based on the instructions of the creator of the Gridsome starter template I'm using, but the site still doesn't display. I've also updated the js-yaml version.
I've gone through the questions/answers for similar questions on here, but I haven't been able to figure this out. I'm new to web development, and I'm sure I'm missing one or more things contributing to the issue.
My GitHub repo for this site.
The site.
I have the build log from Netlify. There are some errors in it. I don't want to put too much here, so here's a part from the end of the log.
12:18:36 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
12:18:36 PM: Error running command: Build script returned non-zero exit code: 1
12:18:36 PM: Failing build: Failed to build site
12:18:36 PM: Finished processing build request in 55.729813394s
A Gist for the whole build log.
Thanks so much for your help, #talves!
I was having trouble using the build commands because of being new to cli stuff and a permissions issue. I asked a friend about the build errors I was getting from Netlify, and he recommended I try removing and re-installing my node modules. Did that, still didn't work. I tried removing anything in the repo having to do with "journal" since Failed to render /journal kept appearing in the build log, but that didn't work either.
I googled ReferenceError: _objectSpread is not defined after update since that was in the build log after the journal error. I found a comment on an issue noting the same error message in the main Babel GitHub repo that suggested adding the following to the package.json file:
"resolutions": {
"#babel/core": "^7.5.4"
}
I added it, tried to build again, and it still failed but only gave me one error message it didn't show beforeā€”Error: SyntaxError: Unexpected string in JSON at position. I googled that message and got another issue on GitHub. A comment on the issue noted a missing comma.
I went back to my package.json file and found that I didn't add a comma to the bracket above the new "resolutions" snippet. I added the comma, tried to build again, and it worked šŸ¤œšŸ’„āœØ !
Sorry if this is long-winded! I thought it might be good to include my process on figuring this out in case others run into the same issues.

Error: Cannot find entry file ./node_modules/react-native-scripts/build/bin/crna-entry.js in any of the roots:

I keep receiving this error when running my App.js for React Native that was working perfectly well before I attempted installing Victory charts. Somehow something broke and after over three hours of work I am unable to figure out a solution. I have tried everything I could find on the web including uninstalling watchman, reinstalling watchman, reverting to React Native 0.55.4, some other recommended commands. Nothing is working.I am so confused.
$ yarn add react-native-scripts
This helped.
I think the other library may hurt the installation part of your package. To solve this issue on IOS you need to add its library like below:
First do 'yarn add react-native-scripts'. In the case that it dose't work continue other steps.
1-Go to the node module of your project and find the package folder and find the ios file inside it.
2- Then drag it into ā€˜libraryā€™ section of your xcode. (It is the subset of your project folders)
3- Then go to ā€˜build phaseā€™ and in the ā€˜Link binary with librariesā€™ add it there by clicking on the plus sign
4- Then in some cases you need to add the correct path of the ios file inside your node module in the xcode. To do that you should go to ā€˜build settingā€™ section in the xcode and search header there. Then you need to add the path there below other paths.
5- Then clear everything (cmd+shift+k) and then finally compile it.
I hope it works for you.
In my case the "crna-entry.js" file does exist in the roots and my project should work (nothing have been modified from last time when it does work).
After hours searching, finally I figured out the reason:
the packager's directory checking is case-sensitive and in windows terminal the drive "c:/" will not be auto-corrected to "C:/" which will lead to error.
Hope this will help someone who gets the same error.
Below is the full error message:
The development server returned response error code:404 Cannot find
entry file node_modules/react-native-scripts/build/bin/crna-entry.js
in any of the roots: