I'm currently trying to use amcharts 5 in a Nuxt3 app, and had a couple of graphs working fine. However at some point amcharts has randomly stopped working and I get the following error:
[h3] [unhandled] H3Error: am5 is not defined
at createError (file:///home/johnr/Code/UrbanTide/socialconnect_ukpn/node_modules/h3/dist/index.mjs:196:15)
at Server.nodeHandler (file:///home/johnr/Code/UrbanTide/socialconnect_ukpn/node_modules/h3/dist/index.mjs:386:21) {
statusCode: 500,
fatal: false,
unhandled: true,
statusMessage: 'Internal Server Error'
}
I tried using amcharts5 according to the docs by importing it and using it in lifecycle hooks.
And initially had an issue related to ESM modules which was resolved by adding "type" : "module" to package.json. After that I made a couple of graphs and they worked fine. However shortly after writing a third graph I changed the ssr setting in nuxt.config.js to false and shortly after got the above error.
I've tried adding amcharts to the transpile array in the nuxt.config.ts:
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
publicRuntimeConfig: {
VUE_APP_AUTH_COOKIE: process.env.VUE_APP_AUTH_COOKIE,
VUE_APP_ENV: process.env.VUE_APP_ENV,
VUE_APP_SESSION_HASH: process.env.VUE_APP_SESSION_HASH,
VUE_APP_USMART_ORIGIN: process.env.VUE_APP_USMART_ORIGIN,
MAP_BOX_ACCESS_TOKEN: process.env.MAP_BOX_ACCESS_TOKEN
},
css: ['vuetify/lib/styles/main.sass', 'mdi/css/materialdesignicons.min.css'],
build: {
transpile: ["vuetify", "#amcharts/amcharts5"]
},
vite: {
define: {
"process.env.DEBUG": false
}
},
buildModules: [
// ...
'#pinia/nuxt',
],
})
but didn't have any joy.
I have also tried setting up a plugin:
plugins/amCharts.client.ts
import * as am5 from "#amcharts/amcharts5";
import * as am5xy from "#amcharts/amcharts5/xy";
import * as am5radar from "#amcharts/amcharts5/radar";
import am5themes_Animated from "#amcharts/amcharts5/themes/Animated";
export default defineNuxtPlugin(() => {
return {
provide: {
am5: am5,
am5xy: am5xy,
am5radar: am5radar,
am5themes_Animated: am5themes_Animated,
}
}
})
and I'm retrieving it in the component like so:
const { $am5, $am5radar, $am5themes_Animated, $am5xy } = useNuxtApp()
The issue was a solved by removing a remaining piece of code calling the am5 instance as explained here.
Happens to anybody!
Related
I have a simple NextJs app.
When I'm running the app on a localhost everything seems to work fine - All the images are shown as expected
When I use this script: next build && next export
and browse to my local build, I don't see the images, but instead its "alt" text
The way I import an image:
import React from 'react';
import Image from 'next/image';
import someImage from '../../../public/images/some-image.png';
const Main = () => {
return (
<div>
<Image
src={someImage}
alt="Some Image"
placeholder="blur"
/>
</div>
}
next.config.js
/** #type {import('next').NextConfig} */
const configuration = {
reactStrictMode: true,
eslint: {
dirs: ['./src'],
ignoreDuringBuilds: true,
},
images: {
loader: 'akamai',
path: '',
},
};
module.exports = configuration;
My code design:
Environment:
"next": "13.1.6",
"react": "18.2.0",
Moreover, I tried to use a normal img tag and it causes the same problem.
If anyone here faces the same issue ill appreciate any help!
Refer to this page:
https://nextjs.org/docs/messages/export-image-api
You are attempting to run next export while importing the next/image component using the default loader configuration.
However, the default loader relies on the Image Optimization API which is not available for exported applications.
So, when running static NextJS app with export you cannot use NextJS optimization, as it should run in your non-existent server. You should use cloud solution (https://nextjs.org/docs/api-reference/next/image#loader-configuration) or remove optimization:
module.exports = {
images: {
unoptimized: true,
},
}
(https://nextjs.org/docs/api-reference/next/image#unoptimized)
When importing something statically from the public folder it already knows youre inside it. You only need the following import:
import someImage from 'images/some-image.png';
I have created a front development environment using docker compose.
The configuration is nginx + nuxt3 + vuetify3.
I created vue in the Pages directory.
It took 120000ms to display it.
It's so slow that I can't even develop.
I'm trying to see why it's taking so long.
and it looks like it is getting all the vuetify code.
Also some of the requests are giving errors.
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VChip/VChip.css
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VGrid/VGrid.css
http://host.docker.internal/_nuxt/node_modules/nuxt/dist/pages/runtime/app.vue
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VNoSsr/VNoSsr.mjs?v=afbc0ebb
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VColorPicker/util/index.mjs?v=afbc0ebb
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VList/VListChildren.mjs?v=afbc0ebb
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VProgressCircular/VProgressCircular.css?v=afbc0ebb
The access is from host.docker.internal:80 leading to host machine:80 -> nginx container:80 -> nuxt container:3000.
The nuxt server is run by this command.
npx nuxi dev
I don't know why the above massive requests are taking place.
It also does not appear to be normal. What is wrong?
I am new to both nuxt and vuetify.
I am also not familiar with how webpack works.
Having the same issue, maybe it would be wise to add your nuxt config.
Maybe someone can figure out what to do..
Mine is as followed:
{
...
css: ['vuetify/styles'],
build: {
transpile: ['vuetify'],
},
modules: [
// eslint-disable-next-line require-await
async (_options, nuxt) => {
// #ts-ignore
nuxt.hooks.hook('vite:extendConfig', (config) => config?.plugins && config.plugins.push(vuetify({ autoImport: true })))
},
],
...
And plugins/vuetify.ts
// #ts-ignore
import {defineNuxtPlugin, useRuntimeConfig} from '#app'
import {createVuetify} from 'vuetify'
import * as components from 'vuetify/components'
import {aliases, mdi} from 'vuetify/iconsets/mdi-svg'
import { md3 } from 'vuetify/blueprints'
import {useDark} from '#vueuse/core'
export default defineNuxtPlugin((nuxtApp) => {
const isDark = useDark().value
const vuetify = createVuetify({
ssr: true,
// https://next.vuetifyjs.com/en/features/blueprints/
blueprint: md3,
components,
icons: {
defaultSet: 'mdi',
aliases,
sets: {
mdi,
},
},
// https://next.vuetifyjs.com/en/features/theme/
theme: {
defaultTheme: isDark ? 'dark' : 'light',
themes: {
dark, // theme defined earlier
light, // theme defined earlier
},
},
})
nuxtApp.vueApp.use(vuetify)
})
I am trying to setup Material Design Icons, and I have the following config:
nuxt.config.ts
import { defineNuxtConfig } from 'nuxt';
export default defineNuxtConfig({
modules: ['#nuxtjs/tailwindcss'],
css: ['vuetify/lib/styles/main.sass', '#mdi/font/css/materialdesignicons.min.css'],
build: {
transpile: ['vuetify'],
},
vite: {
define: {
'process.env.DEBUG': false,
},
},
})`
```
But in terminal I am keep getting the same message whatever I try
[Vue Router warn]: No match found for location with path "/materialdesignicons.min.css.map"
I installed #mdi/font package and followed the vuetify3 official docs but no success.
Also, I have installed Nuxt 3 and Vuetify 3, and dev dependencies sass-loader and sass.
Icons are shown, no problems with display in <v-icon> tag but in terminal I keep getting the same error message.
I have been Googling a lot but I can't seem to find the answer.
Any ideas? Thanks
You need to tell vuetify to use the material icons as icon pack in your plugins/vuetify.ts.
To do so you have to install the mdi font, as you already did, and then set it in the vuetify icons Object in your defineNuxtPlugin.
When done, it should look like this:
import { createVuetify } from 'vuetify'
import {aliases, mdi} from "vuetify/lib/iconsets/mdi";
// make sure to also import the coresponding css
import '#mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
// Ensure your project is capable of handling css files
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({ // Replaces new Vuetify(...)
theme: {
defaultTheme: 'dark'
},
icons: {
defaultSet: 'mdi',
aliases,
sets: {
mdi
}
},
})
nuxtApp.vueApp.use(vuetify)
})
You can then simply use it like this:
<v-icon icon="mdi-minus" />
For a more detailed explanation, visit This Article
I just import materialdesignicons to plugins/vuetify.ts. It works for me.
first install "#mdi/font" and then use this config:
// plugins/vuetify.ts
import { createVuetify } from "vuetify";
import "#mdi/font/css/materialdesignicons.css";
export default defineNuxtPlugin((nuxtApp) => {
const vuetify = createVuetify({
ssr: true,
theme: {
defaultTheme: "light",
},
});
nuxtApp.vueApp.use(vuetify);
});
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 want to create stories using both Typescript and MDX, therefore I have in my main.js:
module.exports = {
stories: ['../src/**/*.stories.(mdx|ts)'],
addons: ['#storybook/addon-docs', 'storybook-addon-preview']
};
However I don't want to have "Docs" tab next to "Canvas". How do I remove it? Without '#storybook/addon-docs' MDX story is not displayed.
Put this in preview.js:
export const parameters = {
previewTabs: {
'storybook/docs/panel': {
hidden: true
}
}
};
Used in Storybook version 6.0.x
I am currently using #storybook/angular#6.0.21 and the previous answer unfortunately did not work for me. I was able to find a solution in the storybook DocsPage documentation.
The relevant section:
You can replace DocsPage at any level by overriding the docs.page parameter:
- With null to remove docs
- With MDX docs
- With a custom React component
I was able to completely remove the DocsPage for a single story like this:
export const myStory = () => ({
moduleMetadata: MODULE_METADATA,
component: MyComponent,
});
myStory.parameters = {
docs: { page: null },
};