My webpack contains this:
{
test: /\.css$/i,
exclude: /node_modules/,
use: [MiniCssExtractPlugin.loader,"css-loader"]
}
and I have appLayout.js file that loading css files, that js file is build like this:
import '../../assets/layouts/layout3/css/themes/default.css';
import '../../assets/layouts/layout3/css/layout.css';
import '../../assets/layouts/layout3/css/utils.css';
.
.
.
.
class AppLayout {
constructor() {
this.pageLoc = document.getElementById("pageLoc").value;
this._initContent();
}
_initContent = () => {
switch (this.pageLoc) {
case "Page1":
import('../../assets/pages/css/pageOne.css');
break;
}
}
}
for some reason, the css that is loading is:
"appLayout.443ec43b.css" that contains content of: default.css,layout.css,utils.css
and another file called: "src_main_webapp_assets_pages_css_inbox_css.443ec43b.css" that contains content of pageOne.css.
I want to make webpack load all my css, that was imported at the top of file, and that was imported in the middle, to the same file "appLayout.443ec43b.css".
found nothing on documentation.
Related
I want to separate my type declarations into separate folders like:
/types/index.d.ts
/types/express/index.d.ts
However, I lose the typings if I move the type definitions for express out of the root /types/index.d.ts file and import from a folder.
/types/index.ts
import './express'
/types/express/index.d.ts
// what do I export?
declare global { // is this correct?
namespace Express {
export interface Request {
user: User & {
id: string;
};
}
export interface Response {
clearAuthCookie: () => this;
}
}
}}
My ts.config:
...
"typeRoots": ["node_modules/#types", "types"]
#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 have a library I am bundling using rollup and this is a section from the rollup.config.js file:
export default {
input: `src/${libraryName}.ts`,
output: [
{ file: pkg.main, name: camelCase(libraryName), format: 'cjs', sourcemap: true },
{ file: pkg.module, format: 'es', sourcemap: true },
],
....
}
It generates two files dist/libname.umd.js and dist/libname.es5.js. I have confirmed from putting a console.log statement in both the files that using require('libname') loads the dist/libname.umd.js. However, the following line:
var x = require('libname').X
console.log(x) // This is undefined
prints undefined. So, I tried to edit the dist/libname.umd.js file manually and at the bottom of the file I saw:
exports.X = X;
with the overall variable X being bundled somewhere above in the file. I modified this to:
module.exports.X = X;
and then it seems to work. I am a bit new to node/js so I wasn't sure if it this is the way to be exporting modules, but on reading a blog post (http://www.hacksparrow.com/node-js-exports-vs-module-exports.html) it turns out both of them should be fine? I am still a bit unclear on this one though.
Also, when I simply did this:
console.log(require('libname')
it prints [Function: uniqSetWithForEach] and console.log(require('libname')()) prints [].
EDIT So for the time being, just so that I can continue my work I have modified rollup.config.ts to add an outro:
export default {
...
output: [
{ file: pkg.main, name: camelCase(libraryName), format: 'cjs',
sourcemap: true,
outro: 'module.exports = Object.assign({}, module.exports, exports)'
}
]
...
}
and this seems to do it for now, but I'm pretty sure it's not a clean solution.
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.