Using Azure static web app with a Quasar Project - vuejs3
I thought it would be pretty simple to host a vuejs quasar project in azure static web apps but I cannot even seem to do the build process from github to publish the website. I can do quasar dev and quasar serve locally and all works great. It is just the assets do not seem to load and trigger a build error for pushing to github/azure. My error comes out as follows:
[vite:asset] Could not load /github/workspace/src/assets/imgs/12.jpg (imported by src/components/HomeRecentWork.vue): ENOENT: no such file or directory, open '/github/workspace/src/assets/imgs/12.jpg'
node:internal/process/promises:288
triggerUncaughtException(err, true /* fromPromise */);
^
[Error: Could not load /github/workspace/src/assets/imgs/12.jpg (imported by src/components/HomeRecentWork.vue): ENOENT: no such file or directory, open '/github/workspace/src/assets/imgs/12.jpg'] {
errno: -2,
code: 'PLUGIN_ERROR',
syscall: 'open',
path: '/github/workspace/src/assets/imgs/12.jpg',
pluginCode: 'ENOENT',
plugin: 'vite:asset',
hook: 'load',
watchFiles: [
'/github/workspace/index.html',
'/github/workspace/.quasar/client-entry.js',
'/github/workspace/node_modules/vite/package.json',
'/github/workspace/node_modules/vue/package.json',
'/github/workspace/node_modules/#quasar/extras/package.json',
'/github/workspace/node_modules/quasar/package.json',
'/github/workspace/node_modules/vue/dist/vue.runtime.esm-bundler.js',
'/github/workspace/node_modules/#quasar/extras/fontawesome-v6/fontawesome-v6.css',
'/github/workspace/node_modules/#quasar/extras/roboto-font/roboto-font.css',
'/github/workspace/node_modules/#quasar/extras/material-icons/material-icons.css',
'/github/workspace/node_modules/quasar/dist/quasar.sass',
'/github/workspace/.quasar/app.js',
'/github/workspace/.quasar/quasar-user-options.js',
'/github/workspace/src/css/app.scss',
'/github/workspace/src/boot/axios.js',
'vite/preload-helper',
'/github/workspace/node_modules/#vue/runtime-dom/package.json',
'/github/workspace/node_modules/#vue/runtime-dom/dist/runtime-dom.esm-bundler.js',
'/github/workspace/node_modules/quasar/src/vue-plugin.js',
'/github/workspace/src/App.vue',
'/github/workspace/src/stores/index.js',
'/github/workspace/src/router/index.js',
'/github/workspace/node_modules/quasar/src/plugins/Meta.js',
'/github/workspace/node_modules/quasar/src/plugins/Notify.js',
'/github/workspace/node_modules/axios/package.json',
'/github/workspace/node_modules/quasar/wrappers/index.mjs',
'/github/workspace/node_modules/axios/index.js',
'/github/workspace/node_modules/#vue/runtime-core/package.json',
'/github/workspace/node_modules/#vue/shared/package.json',
'/github/workspace/node_modules/#vue/runtime-core/dist/runtime-core.esm-bundler.js',
'/github/workspace/node_modules/#vue/shared/dist/shared.esm-bundler.js',
'/github/workspace/node_modules/quasar/src/install-quasar.js',
'/github/workspace/node_modules/quasar/src/lang.js',
'/github/workspace/node_modules/quasar/src/icon-set.js',
'plugin-vue:export-helper',
'/github/workspace/node_modules/pinia/package.json',
'/github/workspace/node_modules/pinia/dist/pinia.mjs',
'/github/workspace/node_modules/vue-router/package.json',
'/github/workspace/node_modules/vue-router/dist/vue-router.mjs',
'/github/workspace/src/router/routes.js',
'/github/workspace/node_modules/quasar/src/plugins/Platform.js',
'/github/workspace/node_modules/quasar/src/utils/extend.js',
'/github/workspace/node_modules/quasar/src/components/avatar/QAvatar.js',
'/github/workspace/node_modules/quasar/src/components/icon/QIcon.js',
'/github/workspace/node_modules/quasar/src/components/btn/QBtn.js',
'/github/workspace/node_modules/quasar/src/components/spinner/QSpinner.js',
'/github/workspace/node_modules/quasar/src/utils/private/create.js',
'/github/workspace/node_modules/quasar/src/utils/event.js',
'/github/workspace/node_modules/quasar/src/utils/private/global-nodes.js',
'/github/workspace/node_modules/quasar/src/utils/is.js',
'\x00commonjsHelpers.js',
'/github/workspace/node_modules/axios/lib/axios.js',
'\x00/github/workspace/node_modules/axios/lib/axios.js?commonjs-proxy',
'/github/workspace/node_modules/#vue/reactivity/package.json',
'/github/workspace/node_modules/#vue/reactivity/dist/reactivity.esm-bundler.js',
'/github/workspace/node_modules/quasar/src/plugins/Screen.js',
'/github/workspace/node_modules/quasar/src/plugins/Dark.js',
'/github/workspace/node_modules/quasar/src/history.js',
'/github/workspace/node_modules/quasar/src/body.js',
'/github/workspace/node_modules/quasar/src/utils/private/symbols.js',
'/github/workspace/node_modules/quasar/src/utils/private/global-config.js',
'/github/workspace/node_modules/quasar/src/utils/private/define-reactive-plugin.js',
'/github/workspace/node_modules/quasar/lang/en-US.mjs',
'/github/workspace/node_modules/quasar/src/utils/private/inject-obj-prop.js',
'/github/workspace/node_modules/quasar/icon-set/material-icons.mjs',
'/github/workspace/node_modules/vue-demi/package.json',
'/github/workspace/node_modules/#vue/devtools-api/package.json',
'/github/workspace/node_modules/vue-demi/lib/index.mjs',
'/github/workspace/node_modules/#vue/devtools-api/lib/esm/index.js',
'/github/workspace/src/layouts/MainLayout.vue',
'/github/workspace/src/pages/IndexPage.vue',
'/github/workspace/src/pages/ErrorNotFound.vue',
'/github/workspace/node_modules/quasar/src/composables/private/use-size.js',
'/github/workspace/node_modules/quasar/src/utils/private/render.js',
'/github/workspace/node_modules/quasar/src/directives/Ripple.js',
'/github/workspace/node_modules/quasar/src/components/btn/use-btn.js',
'/github/workspace/node_modules/quasar/src/utils/private/key-composition.js',
'/github/workspace/node_modules/quasar/src/components/spinner/use-spinner.js',
'\x00/github/workspace/node_modules/axios/lib/axios.js?commonjs-module',
'/github/workspace/node_modules/axios/lib/utils.js',
'\x00/github/workspace/node_modules/axios/lib/utils.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/helpers/bind.js',
'\x00/github/workspace/node_modules/axios/lib/helpers/bind.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/core/Axios.js',
'\x00/github/workspace/node_modules/axios/lib/core/Axios.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/core/mergeConfig.js',
'\x00/github/workspace/node_modules/axios/lib/core/mergeConfig.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/defaults.js',
'\x00/github/workspace/node_modules/axios/lib/defaults.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/cancel/Cancel.js',
'\x00/github/workspace/node_modules/axios/lib/cancel/Cancel.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/cancel/CancelToken.js',
'\x00/github/workspace/node_modules/axios/lib/cancel/CancelToken.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/cancel/isCancel.js',
'\x00/github/workspace/node_modules/axios/lib/cancel/isCancel.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/helpers/spread.js',
'\x00/github/workspace/node_modules/axios/lib/helpers/spread.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/helpers/isAxiosError.js',
'\x00/github/workspace/node_modules/axios/lib/helpers/isAxiosError.js?commonjs-proxy',
'/github/workspace/node_modules/quasar/src/utils/debounce.js',
... 128 more items
]
}
Node.js v18.12.1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
---End of Oryx build logs---
Oryx has failed to build the solution.
I have not found much info on doing a quasar project inside azure web apps so any advice would be helpful. All the tutorials I have found and gone through do not have these issues and I really do not have a complicated project that deviates from the standard quasar project.
EDIT:
the issue is actually my image paths. I am using with src="~assets/imgs/embroidery.jpg" where ~ must be an alias setup in quasar. Works for components in quasar but not for raw img tags. If i use a relative path like ../assets/imgs/filename.jpg it still draws an error on build. However, if i do /assets/imgs/filename.jpg and put the assets folder in public it works. I dont want to do this however so how should i put the paths for images in my components if not a vue-component per say?
Related
Nuxt3 deployment with Cloudflare pages failed
I have successfully compiled my nuxt3 project locally. But the deployment is not working with cloud flare page 00:14:35.140 Executing user command: npm run generate 00:14:35.613 00:14:35.613 > generate 00:14:35.613 > nuxt generate 00:14:35.614 00:14:35.725 Nuxt CLI v3.0.0-rc.3-27567768.c1f728e 00:14:38.919 ✔ Using ~/components/content for components in Markdown 00:14:43.437 ℹ Vite client warmed up in 3072ms 00:14:44.646 ℹ Client built in 4280ms 00:14:44.681 ℹ Building server... 00:14:47.053 ✔ Server built in 2373ms 00:14:47.249 ✔ Generated public dist 00:14:47.249 ℹ Initializing prerenderer 00:14:50.871 ℹ Prerendering 4 initial routes with crawler 00:14:50.891 ├─ / (20ms) 00:14:50.894 ├─ /200 (3ms) 00:14:50.897 ├─ /404 (3ms) 00:14:50.958 ├─ /api/_content/cache (61ms) 00:14:50.971 ✔ You can now deploy .output/public to any static hosting! 00:14:51.017 Finished 00:14:51.018 Note: No functions dir at /functions found. Skipping. 00:14:51.018 Validating asset output directory 00:14:51.018 Error: Output directory ".output/public" not found. 00:14:52.095 Failed: build output directory not found This is failed with "Error: Output directory ".output/public" not found." but actually the directory is generated few lines before. Any clue to resolve this problem?
I worked around the problem with:
Adding Nitro output config [1] [2] to nuxt.config.ts:
export default defineNuxtConfig({
"nitro": {
"output": {
dir: 'output',
serverDir: 'output/server',
publicDir: 'output/public'
}
}
})
In Cloudflare Pages, setting build output directory to: server/output/public.
I think the issue is caused by the default deployment script at CloudFlare side, checking the existence of .output, but not being able to see "hidden" (starting with dot) folders.
17:27:08.682 Validating asset output directory
17:27:08.682 Error: Output directory ".output/public" not found.
Edit (2022-07-10) found a cleaner way:
add "target" : "static" to nuxt.config.ts
Use as CloudFlare Pages build command: ./node_modules/.bin/nuxt generate
Set CloudFlare Pages build output directory to dist
I also had this issue, after testings, this is what i found. The documentation says Use the nuxi generate command to build your application. (https://v3.nuxtjs.org/getting-started/deployment#static-hosting). Configure Node Version First, i'll add an .nvmrc file at the root of the project, so that Cloudflare doesn't use its default 12.18.0 version on deploy. The content of the file is : 16 sources: nuxt 3 prerequisites : https://v3.nuxtjs.org/getting-started/installation/#prerequisites Node version on Cloudflare Pages : https://developers.cloudflare.com/pages/platform/build-configuration/#language-support-and-tools Configure the Cloudflare Page Then i'm adding the configuration in the cloudflare interface with following : Build command: npx nuxi generate Build output directory: /.output/public Root directory: / 🚀 Going further Actually, it shouldn't be a problem to deploy easily on CF Pages: the team has added a cloudflare_pages preset right into nitro, the server library behind nuxt 3. https://nitro.unjs.io/deploy/providers/cloudflare#cloudflare-pages I wasn't able to make this preset work for now, i'll update my answer when this has changed :)
Nuxt using incorrect loader for scss
I am attempting to set up a nuxt project with scss. I added the following packages to my project: "sass": "^1.37.0", "sass-loader": "10", and I updated nuxt.config.js to say the following to point to my new scss main file: // Global CSS: https://go.nuxtjs.dev/config-css css: [ '~/assets/sass/main.scss' ], I had to use older versions because i was getting errors with certain functions I was using but i managed to get it working correctly on my local machine, and it builds just fine repeatedly as I update code as well. I am now trying to deploy to staging on a Linux/nginx server and I am getting the following errors when building npm run build: ERROR in ./assets/sass/main.scss (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./assets/sass/main.scss) Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): SyntaxError (1:1) postcss-custom-properties: <css input> Unknown word > 1 | var(--font-size-2)/var(--font-ratio) | ^ It looks like it's using css builder instead of sass builder! Does anyone know how to fix this? I doublechecked that the files on the server include the sass-loader and that the config is pointing to my .scss file, and i checked the documentation which states that Nuxt will automatically choose the correct loader. What am I doing wrong?
Unable to fetch excel file in production in nextjs
I have an excel file named Words.xlsx in public directory. Initially, during development mode, setting file path to /public/Words.xlsx worked fine but it failed in production mode saying that it can't read file path. Then, I read this and changed path to/Words.xlsx but I am still receiving the same error(below) in my function logs of vercel.
[Error: ENOENT: no such file or directory, open '/Words.xlsx'] {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '/Words.xlsx'
}
ENOENT: no such file or directory, open '/Words.xlsx'
Further, I am using this npm package to read excel file. Below is the code of how I use it:
const res1Sheet = await readXlsxFile('/Words.xlsx', { sheet: 1 });
How do I solve this?
Checking documentation, found this. Hopefully it might help someone who comes here one day. Note: Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available. We recommend using a third party service like AWS S3 for persistent file storage.
give full path such as public/Words.xlsx
Refer this documentation: https://docs.sheetjs.com/docs/demos/content#nextjs
you can use this sysntax:
const res1Sheet = await readXlsxFile('public/Words.xlsx', { sheet: 1 });
create-next-app does not work, get internal server error
Need some advice on this. I have initialize a whole new project by using create-next-app: npx create-next-app nextjs-app I was able to start the project by calling npm run dev. This is what i have in the terminal when run on the development server: ready - started server on http://localhost:3000 However, i get internal server error when navigate to localhost:3000. There is this error on the terminal: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app I am running on node v12.16.3 and npm v6.14.4
Angular ERROR: PostCSS received undefined instead of CSS string
Trying to build an Angular project and I'm getting the errors below. This project built fine last week. I made some changes to other projects that use the Dlls from this project, but no changes to this project. I already spent a lot of time troubleshooting it with no luck and appreciate any help. ERROR: PostCSS received undefined instead of CSS string An unhandled exception occurred: PostCSS received undefined instead of CSS string
This can sometimes happen if node-sass was compiled for a different version of Node.js than you're currently running (ie if you've recently changed your Node.js version). You can fix that with: npm rebuild node-sass
if you are using webpack, and trying to use sass-loader, also add sass
I had this same issue when attempting to test an Angular library, and the issue was I had [``] instead of [] in the styles property of my component metadata.
Wrong
#Component({
selector: 'my-input',
template: `
<input
... />
`,
styles: [``],
Right
#Component({
selector: 'my-input',
template: `
<input
... />
`,
styles: [],
I had similar problem. I was trying to build an angular library and the message below appeared: Building Angular Package ------------------------------------------------------------------------------ Building entry point 'library-name' ------------------------------------------------------------------------------ Compiling TypeScript sources through ngc ERROR: PostCSS received undefined instead of CSS string An unhandled exception occurred: PostCSS received undefined instead of CSS string See "/tmp/ng-itlEgm/angular-errors.log" for further details. [12:03:38] 'compile' errored after 17 s [12:03:38] Error: Command `ng build library-name --prod` exited with code 127 at ChildProcess.handleSubShellExit (/node_modules/gulp-run/command.js:166:13) at Object.onceWrapper (events.js:422:26) at ChildProcess.emit (events.js:315:20) at ChildProcess.EventEmitter.emit (domain.js:505:15) at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12) [12:03:38] 'build' errored after 17 s I was using gulp-run to execute the command ng build library-name --prod. But, executing the command ng build library-name --prod directly on the terminal, the log error was smaller, but similar too. The problem was in one component. The component had one styleURL (Angular component decorator), like this: ...component.css but, the library uses scss. So, I changed the path to: ...component.scss and I executed the command 'ng build library-name --prod'. So, the error didn't appear again. I was using NVM v0.35.2 (allow to have more than one NodeJS version installed in my machine); NodeJS v12.18.2; Ubuntu x64 18.0.4 LTS and Angular CLI 9.1.9.
I faced the same situation now and the command that helped me is - npm i node-sass -D
Check the node version, see if the version of node changes cause this problem. I use node version 16.14.2 which occured this error, after switch to 12.16.1 it works well. Just check your node-sass and node version will find a way out.
This can happen due to change in version of node. I had same issue with a NUXT app. What I did was using yarn, in the root directory of your project, run yarn. But if you're using npm run npm install start your project again.