I hope you can help me with this issue
im my next.config.js, I have:
`
module.exports = {
reactStrictMode: true,
images: {
remotePatterns: [
{
protocol: 'https',
hostname: '**.googleapis.com',
pathname: '/[some folder]/**',
}
]
}
}
Yet I get this error:
Error: Invalid src prop (https://storage.googleapis.com/[some folder]/newtest2/DSC_1690.JPG) on next/image, hostname "storage.googleapis.com" is not configured under images in your next.config.js
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
, when I use:
<Image
src="https://storage.googleapis.com/[some folder]/newtest2/DSC_1690.JPG"
alt="Picture of the author"
width={250}
height={250}
/>
the file exists.
I´m runnning in dev mode local
I´ve tried alomst anything and combinations on the config file, nothing works. When I use a local file there´s no problem
Related
I configured project with laravel 9 and everything works. Then I moved the layout and everything is fine too.
When I make a resource build, the site works correctly.
B0ut when vite runs server (0.0.0.0), then all the images that are registered in css do not work.
All images are in the public folder. And I move them over is not an option for me.
csss code:
background-image: url('/img/home/sweets-one.png');
{my_local}/img/home/sweets-one.png - 200
http://0.0.0.0:3000/img/home/sweets-one.png - 404
vite config:
export default defineConfig({
server: {
host: '0.0.0.0',
port: 3000,
open: false,
},
plugins: [
vue(),
laravel({
input: [
// css
'resources/scss/app.scss',
],
refresh: true,
}),
],
});
how can I fix it?
So, If we user docker and local domain with custom port, you need configure Vite also.
For example:
My project use docker and works on the domain: mysite.loc:8080
So, Vite should be configured like this:
export default defineConfig({
server: {
host: 'mysite.loc',
port: 8080,
open: false,
},
plugins: [
vue(),
laravel({
input: [
// css
'resources/scss/app.scss',
],
refresh: true,
}),
],
});
I'm hosting my App on an EC2-instance behind an Elastic Load Balancer which manages my SSL-Certificate. On this EC2-Instance my nginx-configuration is redirecting all http-Requests to https.
I recently switched to Vite which caused me a lot of trouble. When I push my app to the server after calling npm run build my assets are blocked. In the browser console I get:
Mixed Content: The page at 'example.com' was loaded over HTTPS, but requested an insecure ...
My Setup:
vite.config.js
export default defineConfig({
server: {
host: 'localhost',
},
plugins: [
laravel([
'resources/assets/sass/app.sass',
// etc...
]),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
Setting "https: true" in the server-block didn't help me.
.env
APP_ENV=production
APP_URL=https://example.com
ASSET_URL=https://example.com
In my blade template I'm using the Vite-directive:
#vite('resources/assets/sass/app.sass')
I tried the following solutions:
Setting $proxies = '*' in TrustProxies.php, which doesn't have any effect.
Setting URL::forceScheme('https'); in AppServiceProvider.php, which will load the assets but lead to a lot of other issues.
Somehow the #vite-directive is not resolving my assets as secure assets. With Laravel Mix I could just call secure_asset.
How can I fix this?
In the end I used the TrustedProxies-middleware. However back then I forgot to register it as global middleware.
import fs from 'fs';
const host = 'example.com';
server: {
host,
hmr: {host},
https: {
key: fs.readFileSync(`ssl-path`),
cert: fs.readFileSync(`ssl-cert-path`),
},
},
you should add this to vite.config.js file along with ASSET_URL to your .env file
When I use pally-ci with localhost I get NO errors, but external urls I get correct errors and warnings.
Does anyone have this issue also.
my .pa11yci.js
module.exports = {
urls: [
'http://localhost:8080/#?mpb=topografie&mpz=11&mpv=52.3731081:4.8932945&pgn=home',
'http://localhost:8080/#?dsd=bag&dsp=1&dsv=TABLE&mpb=topografie&mpz=11&mpv=52.3731081:4.8932945'
]
}
```
external:
module.exports = {
urls: [
'http://data.amsterdam.nl/#?mpb=topografie&mpz=11&mpv=52.3731081:4.8932945&pgn=home',
'http://data.amsterdam.nl/#?dsd=bag&dsp=1&dsv=TABLE&mpb=topografie&mpz=11&mpv=52.3731081:4.8932945'
]
}
I want to use scrollmagic with nuxtjs.
I installed scrollmagic via npm.
npm install scrollmagic
In my nuxt.config.js file i added
build: {
vendor: ['scrollmagic']
},
And in my pages/index.vue file i simply imported it.
import ScrollMagic from 'scrollmagic'
But this results only in this error
[vue-router] Failed to resolve async component default:
ReferenceError: window is not defined [vue-router] uncaught error
during route navigation: ReferenceError: window is not defined
at C:\pathto\node_modules\scrollmagic\scrollmagic\uncompressed\ScrollMagic.js:37:2
at C:\pathto\node_modules\scrollmagic\scrollmagic\uncompressed\ScrollMagic.js:22:20
at Object. (C:\pathto\node_modules\scrollmagic\scrollmagic\uncompressed\ScrollMagic.js:27:2)
How can i fix this?
Add a file to your plugins folder called "scrollmagic.js" and paste the following code into it:
plugins/scrollmagic.js
import ScrollMagic from 'scrollmagic'
Add the plugin to your nuxt.config.js file
nuxt.config.js
module.exports = {
build: {
vendor: ['scrollmagic']
},
plugins: [
// ssr: false to only include it on client-side
{ src: '~/plugins/scrollmagic.js', ssr: false }
]
}
Use it with if (process.client) {}
page or component
<script>
let scrollmagic
if (process.client) {
scrollmagic = require('scrollmagic')
// use scrollmagic
}
</script>
For more information please consult the excellent documentation on this topic: https://nuxtjs.org/guide/plugins/
I am using Karma (v0.12.37) as test runner along with JSPM (v0.16.2). I have added following proxy config in karma so as to allow proper loading of JSPM files:
proxies: {
'/base/jspm_packages/': '/base/app/jspm_packages/'
}
Bu this doesn't work out and fails on following:
PhantomJS 2.0.0 (Windows 8 0.0.0) ERROR: 'Potentially unhandled rejection [10] Error: XHR error loading http://localhost:9876/base/jspm_packages/npm/babel-core#5.8.22.js
Error loading http://localhost:9876/base/jspm_packages/npm/babel-core#5.8.22.js
Error loading http://localhost:9876/base/app/pages/examples/todo-example/todo.controller.test.js'
Debug Logs are giving:
proxying request - /base/jspm_packages/npm/babel-core#5.8.22.js to localhost:9876
/base/app/jspm_packages/npm/babel-core#5.8.22.js { host: 'localhost',
port: 9876,
baseProxyUrl: '/base/app/jspm_packages/',
https: false }
But the following url containing 'app' in it works properly:
http ://localhost:9876/base/ app/ jspm_packages/npm/babel-core#5.8.22.js
Any clue on what is going wrong?
Try:
proxies: {
'/app/': '/base/app/',
'/jspm_packages/': '/base/jspm_packages/'
}
If you have configured your jspm-config with a baseUrl of "/", try removing the baseUrl entry since karma-jspm does not support a custom baseUrl. Then you should be able to get rid of the "proxies" entry for the jspm_packages.
See: https://github.com/Workiva/karma-jspm/issues/91
After having done lot of trial and error, found out the following way:
Instead of playing with proxies, alter the jspm paths config in karma.config.js
jspm: {
...
paths: {
"github:*": "app/jspm_packages/github/*",
"npm:*": "app/jspm_packages/npm/*",
'app/*': 'app/*.js'
},
...
},
What finally did the trick for me (karma, babel, JSPM/SystemJS) was to have this:
Remove baseUrl from the karma.conf.js and have this jspm section:
jspm: {
config: 'config.js',
loadFiles: [
'www/**/*.spec.js'
],
serveFiles: [
'www/**/!(*spec).js'
],
paths: {
"github:*": "/base/jspm_packages/github/*",
"npm:*": "/base/jspm_packages/npm/*",
'www/*': '/base/www/*'
}
},