I am trying out the SvelteKit framework and playing with it. I build a dummy page and don't have any issue with the dev command and the build command finding components and sections. However, when I try to deploy it on the Vercel, Vite seems to be having trouble finding components.
[vite:load-fallback] Could not load
/vercel/path0/src/sections/About.svelte (imported by
src/routes/index.svelte): ENOENT: no such file or directory, open
'/vercel/path0/src/sections/About.svelte'
This is the config file I set up module alias and Vercel adapter.
import vercel from '#sveltejs/adapter-vercel';
import { resolve } from 'path';
/** #type {import('#sveltejs/kit').Config} */
const config = {
kit: {
// adapter: adapter(),
adapter: vercel(),
vite: {
resolve: {
alias: {
$src: resolve('./src'),
$components: resolve('./src/components'),
$sections: resolve('./src/sections')
}
}
}
}
};
export default config;
By default, Vercel CLI detecting output directory to be public but I overrode it by vercel_build_output. I also tried with auto adapter resulted in same issue. I tried deployment using github repo directly and with vercel cli too encountered the same issue. I tried it without alias too giving relative import like ../components resulted in same issue their too.
You're filenames is Sidebar.svelte with a lowercase b while when you try to import it, it's SideBar.svelte with capital B
Related
I am new to Next.js, I built a simple landing page and wanted to generate a static page using npm run build which I set in package.json to "build": "next build && next export".
But I get this Error:
Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
Possible solutions:
- Use `next start` to run a server, which includes the Image Optimization API.
- Use any provider which supports Image Optimization (like Vercel).
- Configure a third-party loader in `next.config.js`.
- Use the `loader` prop for `next/image`.
Can someone help me, I read the documentation and I created next.config.js in the root and pasted this:
module.exports = {
images: {
loader: 'imgix',
path: '/images/',
},
}
I think that I need a path, but the thing is I am not using hosted images, I have an images folder in the the public folder.
I know this is probably a stupid question, but I'm stuck.
I hosted them on https://imgbb.com and wrote this in next.config.js
module.exports = {
images: {
domains: ['i.ibb.co'],
},
}
and it worked.
Usage:
<Image src="https://i.ibb.co/TMBV2KP/Akwagroup.jpg"
alt="ESMASA TRAVAUX"
width={1050}
height={500}
/>
I got this error when deploying Next.js to Netlify.
Error: Image Optimization using Next.js default loader is not compatible with `next export`.
Possible solutions:
6:47:15 AM: - Use `next start`, which starts the Image Optimization API.
6:47:15 AM: - Use Vercel to deploy, which supports Image Optimization.
6:47:15 AM: - Configure a third-party loader in `next.config.js`.
6:47:15 AM: - Read more: https://err.sh/next.js/export-image-api.
6:47:15 AM: at exportApp (/opt/build/repo/node_modules/next/dist/export/index.js:14:712)
The problem does not occur when deploying to Vercel.
use akamai
setting images.loader to 'imgix' caused dev and build errors.
i used this instead:
// next.config.js
module.exports = {
images: {
loader: 'akamai',
path: '',
},
}
it just works for all i care about.
possible values for images.loader are: [ default, imgix, cloudinary, akamai, custom ]
reference: https://nextjs.org/docs/api-reference/next/image#built-in-loaders
From Next.js 12.3, you can completely disable next/image Image Optimization using the unoptimized configuration in next.config.js. This avoids having to use a third-party provider to optimize the image when using next/export.
From the next/image documentation:
unoptimized - When true, the source image will be served as-is
instead of changing quality, size, or format. Defaults to false.
module.exports = {
images: {
unoptimized: true
}
}
Before Next.js 12.3 and from 12.2, the unoptimized configuration was still experimental and could be enabled under the experimental flag.
module.exports = {
experimental: {
images: {
unoptimized: true
}
}
}
Seems you use next/images.
But next/images don't work with static pages (generated with next export)
For static pages use this image-optimizer : next-optimized-images instead
I faced the same problem when using next export command. I still receive this error:
Error: Image Optimization using Next.js' default loader is not compatible with next export.
Possible solutions:
Use next start to run a server, which includes the Image Optimization API.
Use any provider which supports Image Optimization (like Vercel).
Configure a third-party loader in next.config.js.
Use the loader prop for next/image.
So, to make my custom loader working correctly, I needed
to set a path to an empty string:
module.exports = {
// https://github.com/vercel/next.js/issues/21079
// Remove this workaround whenever the issue is fixed
images: {
loader: 'imgix',
path: '',
},
}
BUT, when I open the resultant index.html file, none of the images or JS loaded.
So, for those who facing this also, please try to set the path to a / as such:
module.exports = {
// https://github.com/vercel/next.js/issues/21079
// Remove this workaround whenever the issue is fixed
images: {
loader: 'imgix',
path: '/',
},
}
This error is regarding Image/next, I was facing same error while "next build", than i use <img/> instead of <Image/> in the project and re-build it by npm run build and it resolves the error.
I am building a project that utilises ServerMiddleware to render some pages client side only (I can't find another way of getting this working well without ServerMiddleware. Problems on refreshing pages and so on...)
The problem: Unfortunately every time I try and deploy to my Firebase Function through 'firebase deploy' I get an error:
Error: Cannot find module '~/serverMiddleware/selectiveSSR.js'
The function builds OK if I exclude the following line. Nuxt/ Vue is not including ~/serverMiddleware/ as part of its build as far as I can see.
Here is the code in nuxt.config.js to reference my serverMiddleware:
serverMiddleware: ['~/serverMiddleware/selectiveSSR.js']
Adding either the directory or path (as above) to the file itself within Build in nuxt.config.js does not help either. Maybe I am doing it wrong?
Everything works perfectly when testing (Not building) locally.
Any ideas on how I can resolve this please?
Thanks!
Ok so for anyone else who hits this, here is how I got around it.
Firstly, I don't know if this is the fault of Firebase Hosting or Nuxt (I would guess Nuxt but I stand to be corrected), but here is what to do....
1) Remove any reference to ServerMiddleware from nuxt.config.js
2) Add the following to nuxt.config.js
modules: [
'~/local-modules/your-module-name'
],
3) Create directory ~/local-modules/your-module-name in your project root
4) In the new directory, create a package.json:
{
"name": "your-module-name",
"version": "1.0.0"
}
and index.js - key thing, this.addServerMiddleware allows you to call middleware server-side
module.exports = function(moduleOptions) {
this.addServerMiddleware('~/serverMiddleware/')
}
5) Create directory ~/serverMiddleware
6) Add your middleware function to index.js in the new directory:
export default function(req, res, next) {
// YOUR CODE
next() // Always end with next()!
}
7) Update package.json with your new local module under "dependencies":
"your-module-name": "file:./local-modules/your-module-name"
Don't forget you need to do this within the functions directory too or Firebase will complain it can't find your new module
I've installed gitlab in my Meteor project with meteor npm install --save gitlab and imported the package in the imports/api/foo.js file with all the following variations (the comment on the front is the log of the Gitlab object):
import Gitlab from 'gitlab'; // {}
import * as Gitlab from 'gitlab'; // { default: {}, [Symbol(__esModule)]: true }
import { Gitlab } from 'gitlab'; // undefined
const Gitlab = require('gitlab'); // {}
const Gitlab = require('gitlab/dist/es5'); // {}
const Gitlab = require('gitlab/dist/latest'); // {}
If I run just console.log(require('gitlab')) with NodeJS, I get the correct result.
How am I supposed to import 'gitlab' from a meteor application?
I tried to reproduce the issue with a clean Meteor 1.8.0.2 project and it is working fine for me:
/server/main.js:
import Gitlab from 'gitlab'
Meteor.startup(() => {
console.log(Gitlab) // [Function: Bundle]
const api = new Gitlab({
url: 'http://example.com', // Defaults to https://gitlab.com
token: 'abcdefghij123456' // Can be created in your profile.
})
console.log(api) // full API as in documentation
})
So what options do you have here?
Make sure you use gitlab on the server
Check the node_modules folder, whether it is really installed there.
Try to reset your project using meteor reset and then start again so all node_modules a rebuild and all Meteor packages are rebuild and the local dev build is rebuild. This will often fix things.
Create a fresh project and start to reproduce the issue step by step, starting from my working example and change the file structure stepwise to the structure of your project.
...and it's not working. :(
I create ASP.NET Core app from angular template. I actualy followed these directions from these official ssr docs
Setting up ASPNETCORE_Environment variable
Run dotnet new angular
Modify Startup.cs and add UseSpaPrerendering
Add settings to .angular-cli.json
Add tsconfig.server.json
Add app.server.module.ts
Add main.server.ts
Modify csproj BuildServerSideRenderer option
Run npm i in ClientApp directory
In Development it's work fine. But after production build it work's like in development, ssr not working. Angular continues to run on client.
My steps to build:
Run dotnet build -c Release -o out
Angular builds without errors (after build in out dir, creates 2 angular builds - dist and dist-server (dist-server size is 32Kb)
Run dotnet ssr.dll
These basic steps for SSR. But I modify main.ts and main.server.ts files, add these to extraProviders
for main.ts
{ provide: 'OS', useValue: 'Client' }
for main.server.ts
{ provide: 'OS', useValue: 'Server' }
and modify home component
import { Component, Inject } from '#angular/core';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
})
export class HomeComponent {
os: string = null;
constructor(#Inject('OS') public osinject: string) {
console.log(osinject);
this.os = osinject;
}
}
Actualy after build and run my project, i should have seen 'Hello Server', but i see 'Hello Client'.
I tried create 2 times from scratch, tried run in docker container, tried run other projects with ssr (find in github). But it all not working for me
> dotnet --version
2.1.403
> node --version
v8.11.3
Whats went wrong guys?
Here my repo (just in case)