I'm trying to use Next.js next/future/image experimental component.
I upgraded the Next.js version in package.json to "next": "^12.2.0".
Here's my next.config.js file:
/** #type {import('next').NextConfig} */
const nextConfig = {
strictMode: true,
experimental: {
images: {
allowFutureImage: true,
},
},
images: {
domains: ['firebasestorage.googleapis.com',],
},
};
module.exports = nextConfig;
It doesn't allow me to use this feature. Here's the error message in the browser console:
Error: The "next/future/image" component is experimental and may be subject to breaking changes. To enable this experiment, please include `experimental: { images: { allowFutureImage: true } }` in your next.config.js file.
For Next v13 users:
I believe next/future/image is now the default Image component. So no additional work necessary! Just import and use
import Image from 'next/image'
For Next v12.3 users(like the author of this question)
You don't need to add anything to the config to use future/image. The future image is now stable. Just use it directly by importing
import Image from 'next/future/image'
In fact, adding an images property to the config will cause an error, since the config schema has been updated. So don't do that.
// next.config.js
module.exports = {
experimental: {
images: { // This will cause an error
allowFutureImage: true,
},
},
}
The solution that worked for me was to add the experimental rule and stop the nextjs server and restart it. Then it would start working
module.exports = {
experimental: {
images: {
allowFutureImage: true,
},
},
}
I'm currently working with NextJS version 12.3.1, and if I enable it in the next.config.js then I get an ugly warning on the terminal. So it is best to just import Image from "next/future/image" and not add the config to avoid the Warning. Hope others using 12.3.1 find this useful ( using future/image gets rid of the nasty wrapper divs/spans around the )
Warning I'm seeing with config in place:
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn - Invalid next.config.js options detected:
- The value at .experimental has an unexpected property, images, which is not in the list of allowed properties (adjustFontFallbacks, amp, appDir, browsersListForSwc, cpus, craCompat, disableOptimizedLoading, disablePostcssPresetEnv, esmExternals, externalDir, fallbackNodePolyfills, forceSwcTransforms, fullySpecified, gzipSize, incrementalCacheHandlerPath, isrFlushToDisk, isrMemoryCacheSize, largePageDataBytes, legacyBrowsers, manualClientBasePath, modularizeImports, newNextLinkBehavior, nextScriptWorkers, optimizeCss, optimisticClientCache, outputFileTracingRoot, pageEnv, profiling, proxyTimeout, runtime, scrollRestoration, serverComponents, sharedPool, sri, swcFileReading, swcMinify, swcMinifyDebugOptions, swcPlugins, swcTraceProfiling, urlImports, workerThreads).
See more info here: https://nextjs.org/docs/messages/invalid-next-config
warn - You have enabled experimental feature (images) in next.config.js.
warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
I am trying to write end to end test cases for mobile web browsers. So I am setting the configuration for google chrome as below and it runs fine.
{
browserName: 'chrome',
'goog:chromeOptions': {
mobileEmulation: { deviceName: 'Apple iPhone 6' },
}
But I am not sure from where 'goog:chromeOptions' is taken. I tried searching wdio docs and couldn't find any.
I just got this from one of the blog that we need to pass key as "goog:chromeOptions"
Similarly I also need to run for Firefox and safari browsers. So I am not sure what key/hash we need to pass for firefox for mobile emulation.
I am trying to learn WDIO by practising simple exercises.
Set configuration for Google Chrome:
{
browserName: 'chrome',
'goog:chromeOptions': {}
}
Set configuration for the Firefox:
{
browserName: 'firefox',
'moz:firefoxOptions': {}
}
Set configuration for the Safari:
{
browserName: 'safari',
'safari.options': {}
}
Read more in the CONFIGURATIONFILE.MD
I'm using grunt-contrib-connect and grunt-contrib-watch for the live reload feature, like so:
watch: {
options: {
livereload: true,
},
files: ['src/**/*'],
tasks: ['dev']
},
connect: {
server: {
options: {
port: 8000,
base: './dist',
hostname: '0.0.0.0',
protocol: 'http',
livereload: true,
open: true,
}
}
},
It works great, but every time I save a css file, I get this error from Chrome:
Refused to apply style from 'http://localhost:8000/section-featured-work/mod-mobile-design.css?livereload=1533148529995' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Is there a way to specify the MIME type to the script that loads the CSS files?
I do not believe this is a duplicate of stackoverflow.com/questions/48248832/, as I believe this is specific to
grunt-config and grunt-watch livereload. The CSS is loaded with JavaScript. So how can I fix this for those packages?
By the way, the styles seem to load anyways, but I do not allow runtime errors of any sort in my builds, if at all avoidable.
My site has some customers that work for organizations who are blocking font downloads in IE, so I need to create fallback options for FontAwesome. I am trying to use web font loader to detect if FontAwesome loaded correctly, but web font loader is always reporting that FontAwesome failed to load even though I can see that the FontAwesome icons loaded. I have tested IE 9/10/11.
You can view this in action at https://vnext.radresponder.net. You will see that in Firefox and Chrome, FontAwesome is correctly loaded and marked as active; however, in IE the font loads but then web font loader fires the failed to load callback and attaches the inactive class to the HTML tag. I have special CSS to load some fallback characters to replace the FontAwesome icons which are then loaded.
From the web font loader GitHub page, I don't see any incompatibilities listed with IE, so I assume this should work.
Here is my WebFont.load statement.
WebFont.load({
custom: {
families: ['FontAwesome'],
urls: ['/local/address/for/fontawesome.css'],
testStrings: {
'FontAwesome': '\uf00c\uf000'
}
},
loading: function () {
console.log("loading");
},
fontloading: function (fontFamily, fontDescription) {
console.log('fontloading: ' + fontFamily);
},
fontactive: function (fontFamily, fontDescription) {
console.log('fontActive: ' + fontFamily);
},
fontinactive: function (fontFamily, fontDescription) {
console.log('fontInActive: ' + fontFamily);
},
active: function () {
console.log("active: loaded all web fonts");
},
inactive: function () {
console.log("inactive: did not load all web fonts");
}
});
Edit - 2015/05/27 9:58 am
I changed the timeout from the default 3 seconds to 10 seconds, and the load is definitely taking all 10s and then timing out. I am not sure what that means. Why is it only timing out on IE?
I have a video that plays in all browsers on Windows. On a Mac, it fails to play in Safari and Firefox. Here is a screenshot of the console error that it throws in Safari:
Here is a snippet of the code:
$(document).ready(function () {
jwplayer("video").setup({
file: "<%= _VideoNode.GetStringValue("YoutubeLink", string.Empty) %>",
'controlbar': 'bottom',
'height': '360',
'width': '640',
'skin': '<%= ResolveUrl( "~/App/Styles/video/skin.xml" ) %>'
});
});
and here is a link where you can find a video that uses this code block http://clarkdev.theatomgroup.com/visit/planvisit/guidelines
Installing flash on the mac solved the problem. Google Chrome comes with flash built into the browser.