at the moment I'm fighting with Isotopejs & requirejs. As a Designer like me those things with modules and dependencies are scarying me ;)
I'm trying to get this running:
http://codepen.io/desandro/pen/mEinp
Here my require-config.js :
(function (global, require) {
'use strict';
require.config({
baseUrl: './webroot/js',
catchError: true,
paths: {
'site-core': './modules/shared/site-core',
'isotope': './vendor/isotope/dist/isotope.pkgd',
'jquery-bridget': './vendor/jquery-bridget/jquery-bridget',
'jquery': './vendor/jquery.min',
'bootstrap': './vendor/bootstrap/bootstrap'
},
shim: {
'jquery': {
exports: 'jQuery'
}
}
});
})(this, require);
The File where I want to launch the isotope Gallery is following:
'use strict';
// require the require function
require(['require', 'jquery', 'isotope'],
function (require, $, Isotope) {
require(['jquery-bridget'],
function () {
// make Isotope a jQuery plugin
$.bridget('isotope', Isotope);
// now you can use $().isotope()
$('.grid').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 100
}
});
}
);
}
);
Thats what it looks like, at the moment. As you can see my console is filled with dependency(?) errors.
Modules: layout-modes/masonry Error: Script error for "layout-modes/masonry"(…)
Modules: layout-modes/fit-rows Error: Script error for "layout-modes/fit-rows"(…)
Modules: item Error: Script error for "item"
Modules: layout-mode Error: Script error for "layout-mode"(…)
Modules: layout-modes/vertical Error: Script error for "layout-modes/vertical"(…)
I've been juggling around with modules, the isotope API and I'm still stuck. Does somebody see where the Problem is? I don't have a clue anymore. I hope someone of you is able you point me the right direction.
Have a nice day und thank you!
Seb.
Related
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!
I installed grunt-critical into a Magento2.4 project and would like to generate critical CSS but it's not rendering CSS into the critical.css file.
I created this task in dev\tools\grunt\tasks\critical.js
module.exports = function (grunt) {
'use strict';
grunt.registerTask("critical", function () {
grunt.initConfig({
critical: {
test: {
options: {
width: 1300,
height: 900
},
src: 'index.php',
dest: 'pub\static\frontend\<Vendor>\<theme>\css\critical.css'
}
}
});
});
};
in CMD it's showing results and I don't know what step I'm missing for generating critical CSS.
I followed this grunt-critical steps to generate critical css.
E:\wamp64\www\dist>grunt critical
Running "critical" task
Done.
Execution Time (2022-07-18 17:31:49 UTC+5:30)
loading tasks 65ms ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ 97%
critical 2ms ███████ 3%
Total 67ms
Every time I change a line in my code, the line css/app.css in mix-manifest.json is deleted.
The only way to restore the line is to run npm run watch or npm run dev, but when I do a new modification in the code I got the same problem.
Here my mix-manifest.json when it's okay :
{
"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css",
"/css/subscriber.css": "/css/subscriber.css",
"/css/agent.css": "/css/agent.css",
"/css/guest.css": "/css/guest.css",
"/js/mobile.js": "/js/mobile.js",
"/js/vendor.js": "/js/vendor.js",
"/js/manifest.js": "/js/manifest.js",
"/css/dragula.min.css": "/css/dragula.min.css"
}
The mix-manifest.json when it's not okay :
{
"/js/app.js": "/js/app.js",
"/js/mobile.js": "/js/mobile.js",
"/js/vendor.js": "/js/vendor.js",
"/js/manifest.js": "/js/manifest.js",
"/css/dragula.min.css": "/css/dragula.min.css"
}
My webpack.mix.js :
let mix = require('laravel-mix');
let ImageminPlugin = require('imagemin-webpack-plugin').default;
mix.webpackConfig({
plugins: [
new ImageminPlugin({
disable: mix.inProduction() === false, // Disable during development
test: /\.(jpe?g|png|gif|svg)$/i
})
]
})
.js('resources/assets/js/app.js', 'public/js').extract(['vue'])
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/subscriber.scss', 'public/css')
.sass('resources/assets/sass/agent.scss', 'public/css')
.sass('resources/assets/sass/guest.scss', 'public/css')
.copy('node_modules/vue2-dragula/styles/dragula.min.css', 'public/css/dragula.min.css')
.copyDirectory('resources/assets/img', 'public/img')
.copyDirectory('resources/assets/fonts', 'public/fonts')
// Mobile
.js('resources/assets/js/mobile.js', 'public/js')
//.disableNotifications();
if (mix.inProduction()) {
mix.options({
purifyCss : {
purifyOptions: {
whitelist: [
'is-invisible',
'is-clearfix',
'modal-card-foot',
'is-hovered',
'is-current',
'*columns*',
'*popover-*',
'*c-*',
'*ct-*',
'*-slide*',
'*taginput*',
'has-background-conciergerie',
'.is-hoverable tr:hover',
]
}
},
uglify: {
uglifyOptions: {
compress: {
drop_console: true,
}
}
}
})
.version();
}
Do you have any idea?
Thank you!
This sounds like an issue with your editor. I would highly recommend disabling all plugins and then re-adding them one at a time to find the offending plugin. Additionally if you want to confirm this theory, you could try using any other editor to edit and save a file.
This happened to me today when I was running multiple "npm run watch" processes at the same time. Killing one of them fixed the problem.
I'm trying to be a good WordPress Citizen 😇 and including my JavaScript the right way, via wp_enqueue_scripts in my functions.php.
However doing it this way I don't get hot module reloading (hmr) via webpack-dev-server to work.
Can anybody give me a hint or point me to some documentation?
No reaction here, so I was forced to look for an answer by myself. 😉
Here it is.
What I did not get was how to make the bundle.js file, which webpack-dev-server makes available just in memory, available to WordPress using wp_enqueue_scripts in the functions.php.
my webpack.config.js (extract)
const webpack = require('webpack');
module.exports = {
entry: './src/entry.js',
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
devServer: {
open: true,
hot: true,
publicPath: '/',
proxy: {
'/': {
target: 'http://wordpress:8888/',
changeOrigin: true
}
}
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};
The thing is: Although I proxy the dev-sever through my MAMP-server, which runs under http://wordpress:8888 the build.js file is not made available by webpack-dev-server under http://wordpress:8888/build.js but under the original url, which is http://localhost:8080/build.js.
Once I got that a conditional statement in the functions.php did the trick.
my functions.php (extract)
<?php
// Load my JS
if (!defined('WP_ENVIRONMENT') || WP_ENVIRONMENT == "production") {
function reactTheme_enque_scripts() {
wp_enqueue_script(
'react-theme-js',
get_stylesheet_directory_uri() . '/bundle.js',
[], // dependencies could go here
time(), // version for caching
true // loading it within footer
);
}
} else {
function reactTheme_enque_scripts() {
wp_enqueue_script(
'react-theme-js',
'http://localhost:8080' . '/bundle.js',
[], // dependencies could go here
time(), // version for caching
true // loading it within footer
);
}
}
add_action('wp_enqueue_scripts', 'reactTheme_enque_scripts');
?>
So by now just adding one line within the wp-config.php I can WordPress make looking for the bundle.js file, where webpack-dev-server is putting it.
If this line is missing, it loads the bundle.js file from the root of the theme directory.
my wp-config.php (extract)
define('WP_ENVIRONMENT', 'development');
I am using the following gulp task to process all scss to CSS, combine these into one minified file, as well as show the file size. However, I will like to see what the file size of the minified CSS file and the map file separately. The following do not do the job.
gulp.task('styles', function () {
return gulp.src(config.css.src)
.pipe(glob())
.pipe(plumber({
errorHandler: function (error) {
notify.onError({
title: 'Processing all custom SCSS files to css',
subtitle: 'Failed!',
message: 'Error: <%= error.message %>',
sound: 'Frog '
})(error);
this.emit('end');
}}))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefix(autoprefixerOptions))
.pipe(sourcemaps.write('./css'))
.pipe(gulp.dest(config.css.dest))
.pipe(size({
title: 'Total file size of custom css file and the map file associated with the css file: ',
showFiles: 'true',
showTotal: 'true',
prettySize: 'true'
}));
});
I would go with a different approach, instead of adding two more plugins to the pipeline (gulp-filter and gulp-if).
To start, I would change gulp-size plugin for the gulp-filesize, and create two tasks, one for the styles compiling, linting and sourcemaps. And another one, just for getting the filesizes of those two files you need.
const gulp = require('gulp');
// The rest of the plugins you're using here
const runSequence = require('run-sequence'); // Run sequentially tasks
const size = require('gulp-filesize'); // Change gulp-size to gulp-filesize
// Create one task that will handle both styles:compile and styles:size tasks
gulp.tasks('styles', function () {
// You will run compilation first, then check file sizes
runSequence('styles:compile', 'styles:size');
});
gulp.task('styles:compile', function () {
return gulp.src(config.css.src)
.pipe(glob())
.pipe(plumber({
errorHandler: function (error) {
notify.onError({
title: 'Processing all custom SCSS files to css',
subtitle: 'Failed!',
message: 'Error: <%= error.message %>',
sound: 'Frog '
})(error);
this.emit('end');
}}))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefix(autoprefixerOptions))
.pipe(sourcemaps.write('./css'))
.pipe(gulp.dest(config.css.dest));
});
gulp.task('styles:size', function () {
// This will output the size of both files
return gulp
.src(['path/css/yourcssfile.css', 'path/css/yourmapfile.css.map'])
.pipe(size());
});
Run gulp styles and you should be getting both files' sizes, like this:
[14:12:36] Size main.css : 1234 B
[14:12:36] Size main.css.map : 1234 B
Hope this helps you :)