How can I configure Prism to work with Nuxt? I added it as a vendor in the nuxt.config.js file:
// * Build configuration
build: {
// * You can extend webpack config here
vendor: ['axios', 'prismjs'],
extend(config, ctx) {
if (ctx.isServer) {
config.externals = [
nodeExternals({
whitelist: [/^vuetify/]
})
];
}
}
}
Then in my page in the script section I import it:
<script>
import Prism from'prismjs';
export default {
data() {
return {
post: {}
};
},
// more data...
How can I use it then? I've tried calling it in mounted but it doesn't work. No errors are returned but it doesn't change anything on site.
mounted() {
Prism.highlightAll();
}
Turned out to be working, just forgot about including css styles.
Related
iam recently receiving this error message without any changes to files. I deleted some products and categories via the webGUI which might cause this?
Environment is:
Frontend: React, Next.js, TypeScript & Tailwind
Backend: Laravel
Error:
> Build error occurred
Error: Invalid `paths` value returned from getStaticPaths in /category/[slug].
`paths` must be an array of strings or objects of shape { params: [key: string]: string }
at buildStaticPaths (/var/www/domain/node_modules/next/dist/build/utils.js:490:15)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async /var/www/domain/node_modules/next/dist/build/utils.js:615:119
at async Span.traceAsyncFn (/var/www/domain/node_modules/next/dist/telemetry/trace/trace.js:60:20) {
type: 'Error'
}
Category Slug tsx content:
import Container from "#components/ui/container";
import { getLayout } from "#components/layout/layout";
import Subscription from "#components/common/subscription";
import CategoryBanner from "#containers/category-banner";
import { useRouter } from "next/router";
import CategoryProductsGrid from "#components/category/category-products-grid";
export { getStaticPaths, getStaticProps } from "#framework/ssr/category";
export default function Category() {
const { query } = useRouter();
return (
<div className="border-t-2 border-borderBottom">
<Container>
<CategoryBanner className="my-4"/>
<div className="pb-16 lg:pb-20">
<CategoryProductsGrid
classname="3xl:grid-cols-6"
categorySlug={query?.slug as string}
/>
</div>
<Subscription />
</Container>
</div>
);
}
Category.getLayout = getLayout;
SSR for category.ts:
// This function gets called at build time
export async function getStaticPaths({ locales }: GetStaticPathsContext) {
const categories = await fetchCategories({
queryKey: [API_ENDPOINTS.CATEGORIES, { limit: 100, parent: null }],
});
const paths = categories?.data?.flatMap((category: Category) =>
locales?.map((locale) => ({ params: { slug: category.slug }, locale }))
);
return {
paths,
fallback: "blocking",
};
}
Notes:
the only changes were made before the error occured via the webGUI (deleted products).
i deleted all locales on configured one locale. Maybe theres an issue. But after these changes the build ran fine for a week.
when i run the same code on my local computer with the same node etc. Versions it works. Is there any cache that must be deleted to make it work again?
Thank you in advance for any tip that could cause this. I tried alot of things but cant figure it out yet.
Sometimes when I update the snapshots I got an Attribute ngContext and for fix this problem I've to clean and install my node_modules to "fix" this issue.
I've to do this every time that I need to update a snapshot. I've already searched on multiple solutions and nothing worked.
snapshotSerializers: \[
'jest-preset-angular/build/serializers/no-ng-attributes',
'jest-preset-angular/build/serializers/ng-snapshot',
'jest-preset-angular/build/serializers/html-comment',
\],
Can someone help me with this, please?
Here is an image
I've updated the jest versions and also the jest-present-angular too but didn't work.
I just want to have a solution that does not makes me clean install the node_modules every time
This is indeed annoying especially because it tends to change after upgrading angular version. My snapshots are now failing as well because of this difference :-/.
- __ngContext__={[Function LRootView]}
+ __ngContext__="0"
So, having look at the jest configuration, the snapshot serializers are being loaded from 'jest-preset-angular' module.
The relevant plugin here is 'jest-preset-angular/build/serializers/ng-snapshot'. Now, they are two ways what to do to get rid of __ngContext__.
replace the plugin entirely by a modified copy
Create a copy of that file in the same directory and adapt it accordingly (line https://github.com/thymikee/jest-preset-angular/blob/40b769b8eba0b82913827793b6d9fe06d41808d9/src/serializers/ng-snapshot.ts#L69):
const attributes = Object.keys(componentInstance).filter(key => key !== '__ngContext__');
Adapt the configuration:
snapshotSerializers: [
'jest-preset-angular/build/serializers/no-ng-attributes',
'./custom-snapshot-serializer.ts',
'jest-preset-angular/build/serializers/html-comment',
],
The disadvantage of this solution is that you have to maintain the plugin although only one line has been changed.
replace the plugin by a wrapper (preferred solution)
This creates just a wrapper for the original implementation. The idea is to remove __ngContext__ before it moves on down the plugin chain. However, the logic of the original plugin is used for the fixture serialization.
import type { ComponentRef, DebugNode, Type, ɵCssSelectorList } from '#angular/core';
import type { ComponentFixture } from '#angular/core/testing';
import type { Colors } from 'pretty-format';
import { test as origTest, print as origPrint } from 'jest-preset-angular/build/serializers/ng-snapshot';
/**
* The follow interfaces are customized heavily inspired by #angular/core/core.d.ts
*/
interface ComponentDef {
selectors: ɵCssSelectorList;
}
interface IvyComponentType extends Type<unknown> {
ɵcmp: ComponentDef;
}
interface NgComponentRef extends ComponentRef<unknown> {
componentType: IvyComponentType;
_elDef: any; // eslint-disable-line #typescript-eslint/no-explicit-any
_view: any; // eslint-disable-line #typescript-eslint/no-explicit-any
}
interface NgComponentFixture extends ComponentFixture<unknown> {
componentRef: NgComponentRef;
// eslint-disable-next-line #typescript-eslint/no-explicit-any
componentInstance: Record<string, any>;
}
/**
* The following types haven't been exported by jest so temporarily we copy typings from 'pretty-format'
*/
interface PluginOptions {
edgeSpacing: string;
min: boolean;
spacing: string;
}
type Indent = (indentSpaces: string) => string;
type Printer = (elementToSerialize: unknown) => string;
export const print = (fixture: any, print: Printer, indent: Indent, opts: PluginOptions, colors: Colors): any => {
const componentInstance = (fixture as NgComponentFixture).componentInstance;
const instance = { ...componentInstance };
delete instance.__ngContext__;
const modifiedFixture = { ...fixture, componentInstance: { ...instance } };
return origPrint(modifiedFixture, print, indent, opts, colors);
};
// eslint-disable-next-line #typescript-eslint/no-explicit-any, #typescript-eslint/explicit-module-boundary-types
export const test = (val: any): boolean => {
return origTest(val);
};
The configuration is adapted the same way as before.
#fullcalendar/google-calendar seems to try to fetch JSON during the static gatsby build. I am unsure where to start looking.
When running gatsby build on my project the build breaks with the following error:
failed Building static HTML for pages - 3.026s
error Building static HTML failed for path "/calendar/"
6431 | body = encodeParams(params);
6432 | }
> 6433 | var xhr = new XMLHttpRequest();
| ^
6434 | xhr.open(method, url, true);
6435 | if (method !== 'GET') {
6436 | xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
WebpackError: ReferenceError: XMLHttpRequest is not defined
- main.js:6433
node_modules/#fullcalendar/common/main.js:6433:1
- main.js:54
node_modules/#fullcalendar/google-calendar/main.js:54:24
- main.js:6199
node_modules/#fullcalendar/common/main.js:6199:1
- main.js:6187
node_modules/#fullcalendar/common/main.js:6187:1
- main.js:6170
node_modules/#fullcalendar/common/main.js:6170:1
- main.js:6162
node_modules/#fullcalendar/common/main.js:6162:1
- main.js:6113
node_modules/#fullcalendar/common/main.js:6113:1
- main.js:6928
node_modules/#fullcalendar/common/main.js:6928:1
- main.js:7306
node_modules/#fullcalendar/common/main.js:7306:1
The page is defined as follows:
import React from "react"
import FullCalendar from '#fullcalendar/react'
import dayGridPlugin from '#fullcalendar/daygrid'
import googleCalendarPlugin from '#fullcalendar/google-calendar';
export default class DemoApp extends React.Component {
render() {
return (
<FullCalendar
plugins={[ dayGridPlugin, googleCalendarPlugin]}
initialView="dayGridMonth"
googleCalendarApiKey='XXX'
height="100vh"
eventSources= {[
{
googleCalendarId: 'en.indian#holiday#group.v.calendar.google.com',
color: '#1f78b4'
}
]}
/>
)
}
}
I am not sure how to create an executable test case, but am very happy to receive advice. Any pointers on how I can make this work would be highly appreciated.
Using #loadable works both for build and develop versions.
import React from "react"
import loadable from '#loadable/component'
const OtherComponent = loadable(() => import('../components/calendar.js'))
function MyComponent() {
return (
<OtherComponent />
)
}
export default function Home() {
return <MyComponent />
}
Try using the following snippet in your gatsby-node.js:
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /#fullcalendar\/google-calendar/,
use: loaders.null(),
},
],
},
})
}
}
Some third-party dependencies use some global objects like window or document to make their stuff. This is perfectly valid when running gatsby develop since the code is compiled on the browser-side. However, gatsby build occurs in the server-side (your Node server) where obviously no window, because it's not even already defined yet.
That's why you need to add a null loader to the webpack's config by calling the onCreateWebpackConfig API, to avoid the dependency transpilation on the server-side.
The rule is a regular expression (that's why is between slashes) and literally, the test value matches a path in your node_modules folder to look for the dependency location, so, you must put there the exact folder name, I've assumed that is #fullcalendar/google-calendar but you have some potential folders that may create the conflict too:
import FullCalendar from '#fullcalendar/react'
import dayGridPlugin from '#fullcalendar/daygrid'
import timeGridPlugin from '#fullcalendar/timegrid'
import googleCalendarPlugin from '#fullcalendar/google-calendar';
Using #loadable/component:
import React from "react"
import loadable from '#loadable/component'
const OtherComponent = loadable(() => import('../components/calendar.js'))
function MyComponent() {
return (
<OtherComponent />
)
}
export default function Home() {
return <MyComponent />
}
How can I add my custom SVG Icons to Shopware 6 and used it like in the official documentation:
https://component-library.shopware.com/components/sw-icon/
Like:
<sw-icon name="mycustom-shape-heart" color="#fc427b"></sw-icon>
Unfortunately it is not possible "out of the box" via plugin.
The SVG icons of the development/platform are automatically loaded via webpack and svg-inline-loader. All icons are being collected and a small component gets created for each SVG icon. You can find the core icons and logic here: platform/src/Administration/Resources/app/administration/src/app/assets/icons.
However you could do something similar in your plugin. It is possible to create a custom webpack config here:
YouPlugin
- src
- Resources
- app
- administration
- build
- webpack.config.js <-- custom webpack config
- src
- app
- assets
- icons
- svg <-- Your SVG icons
- icons.js <-- Component creation
Then you basically do the same as the core but with your own icons:
const path = require('path');
function resolve(dir) {
return path.join(__dirname, '..', dir);
}
module.exports = function () {
return {
module: {
rules: [
{
test: /\.svg$/,
include: [
resolve('src/app/assets/icons/svg')
],
loader: 'svg-inline-loader',
options: {
removeSVGTagAttrs: false
}
}
]
}
};
};
And in your icons.js:
export default (() => {
const context = require.context('./svg', false, /svg$/);
return context.keys().reduce((accumulator, item) => {
const componentName = item.split('.')[1].split('/')[1];
const component = {
name: componentName,
functional: true,
render(createElement, elementContext) {
const data = elementContext.data;
return createElement('span', {
class: [data.staticClass, data.class],
style: data.style,
attrs: data.attrs,
on: data.on,
domProps: {
innerHTML: context(item)
}
});
}
};
accumulator.push(component);
return accumulator;
}, []);
})();
If you only have a few icons this might be overkill. Maybe you could consider another approach like this (just for the plugin) and use another component like <custom-icon>: https://v2.vuejs.org/v2/cookbook/editable-svg-icons.html
Simply create a custom component and add SVG icon code in the component's twig file.
NOTE: component's name should start with "icons-" like 'icons-my-custom-icon'
Then you can use that icon with the sw-icon tag like:
<sw-icon name="my-custom-icon"></sw-icon>
The solution for me was as described here (German only): https://forum.shopware.com/discussion/69422/wie-kann-man-das-bestehende-icon-system-mit-eigenen-svgs-erweitern#latest
I am new to YUI and I want to load YUI 2 in 3 locally, not from CDN. I have pasted both 2 and 3 in same directory named Scripts. I am pasting my code below:
<script type="text/javascript" src="/Scripts/build-yui3/yui/yui-min.js"></script>
function showError(panelId) {
YUI({
groups: {
yui2: {
base: '/build-yui2/',
// If you have a combo service, you can configure that as well
// combine: true,
// comboBase: 'http://myserver.com/combo?',
// root: '/2in3/build/',
patterns: {
'yui2-': {
configFn: function(me) {
if(/-skin|reset|fonts|grids|base/.test(me.name)) {
me.type = 'css';
me.path = me.path.replace(/\.js/, '.css');
me.path = me.path.replace(/\/yui2-skin/, '/assets/skins/sam/yui2-skin');
}
}
}
}
}
}
}).use('dd-drag', 'yui2-container', function (Y) {
Y.one("#" + panelId).setStyle('display', null);
var YAHOO = Y.YUI2;
var config = {
close: true,
width: "300px",
fixedcenter: true,
modal: true
};
panel = new YAHOO.widget.Panel(panelId, config);
var keylistener = new YAHOO.util.KeyListener(
document, {
keys: 27
}, {
fn: panel.hide,
scope: panel,
correctScope: true
});
panel.cfg.queueProperty("keylisteners", keylistener);
panel.render();
});
}
But this is not working. Throwing error: "YAHOO is undefined". Please help. Thanks..
Add an onFailure: function (error) {} method to your YUI3 config object. The error it gives you will tell you which files didn't load properly. I'm guessing the base property needs to be a full path not a relative path. I've never used patterns so I'm not sure how to debug it.