We Keep Coding

Adding another entry file to webpack w/o being injected to HTML file

I'm using CRA with CRACO to add another entry file to webpack configuration.
Here is the code:
module.exports = {
webpack: {
configure: (webpackConfig, {paths}) => {
return {
...webpackConfig,
entry: {
main: paths.appIndexJs,
content: './src/chromeServices/DOMEvaluator.ts',
},
}
},
},
}
However I don't need this file to be injected into the HTML file, is that possible to do so?

It is very easy to do so. CRACO and ultimately CRA make use of html-webpack-plugin to generate your HTML file and add the required script tags. You will have to make use of chunk filtering to achieve this.
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
webpack: {
configure: (webpackConfig, {paths}) => {
// 1. Find instance of HTML Webpack plugin
const pluginInstance = webpackConfig.plugins.find(
webpackPlugin => webpackPlugin instanceof HtmlWebpackPlugin
);
// 2. Define the exclusion or inclusion
if (pluginInstance) {
pluginInstance.options.excludeChunks = ['content'];
// Or, alternately, use include only feature
// pluginInstance.options.chucks = ['main'];
}
return {
...webpackConfig,
entry: {
main: paths.appIndexJs,
content: './src/chromeServices/DOMEvaluator.ts',
},
}
},
},
};

next build fails on the server

I have a working website on my machine. Next can run it in the development mode and also build in the production one. But the problem is that on the server's machine it raises an error:
> Build error occurred
TypeError: Cannot destructure property 'serverRuntimeConfig' of 'next_config__WEBPACK_IMPORTED_MODULE_1___default(...)(...)' as it is undefined.
at Object.aorh (/home/MyInspire-ph.ru-v4/.next/server/pages/
Package version is the same, and it does work on my machine. How can I fix it?
Here's my config file
const path = require('path');
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');
module.exports = phase => {
return {
trailingSlash: true,
images: {
domain: ['localhost'],
},
publicRuntimeConfig: {
dev: phase === PHASE_DEVELOPMENT_SERVER,
},
serverRuntimeConfig: {
rootDir: __dirname.replace(/\\/g, '/'),
telegram: {
token: 'sometoken',
usersFile: 'somefile',
},
},
webpack: config => {
config.resolve.alias['#sass'] = path.resolve(__dirname, 'sass');
return config;
},
};
};

How to override third party module Js widget in custom module in magento 2

Here i'm trying to extend Amasty js widget in my module using mixin.
I have created requirejs-config.js file like below
var config = {
config: {
mixins: {
'amShopbyAjax': {
'vendor_CustomCatalog/js/amasty/amShopbyAjax-override': true
}
}
}
};
I have created js file like below
define([
"jquery",
"jquery-ui-modules/widget"
], function ($) {
'use strict';
var amShopbyWidgetMixin = {
selectors: {
category_products_wrapper: '#amasty-shopby-category-product-list',
},
reloadHtml: function (data) {
console.log("Sdfsdfsdf");
return this._super();
},
callAjax: function (clearUrl, data, pushState, cacheKey, isSorting) {
console.log("sdnjkasndnsadj");
return this._super();
}
};
return function (targetWidget) {
$.widget('custom.amShopbyAjax', targetWidget, amShopbyWidgetMixin);
return $.custom.amShopbyAjax;
};
});
After that I ran sudo bin/magento setup:static-content:deploy -f and clear cache then I am getting "Uncaught TypeError: base is not a constructor" error

Think that you should change custom.amShopbyAjax to mage.amShopbyAjax
return function (targetWidget) {
$.widget('mage.amShopbyAjax', targetWidget, amShopbyWidgetMixin);
return $.mage.amShopbyAjax;
};
The widget alias should be like for the target widget and the widget by parent alias should be returned

Terser does not give minified file

I am trying to minify an angularjs application using grunt and terser. I first used uglifiy-es but then read that it has some issues. So I tried terser. But the output does not give me minified files.
The gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//grunt task configuration will go here
ngAnnotate: {
options: {
singleQuotes: true
},
app: {
files: {
'./public/min-safe/js/_config_min.js': ['./controllers/_config.js'],
'./public/min-safe/js/ctrl_accountingdashboard.js': ['./controllers/ctrl_accountingdashboard.js'],
}
}
},
concat: {
js: { //target
src: ['./public/min/app.js', './public/min-safe/js/*.js'],
dest: './public/min/app.js'
}
},
terser: {
options: {},
files: {
'./public/min/app.js': ['./public/min/app.js'],
},
}
});
//load grunt tasks
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-terser');
grunt.loadNpmTasks('grunt-ng-annotate');
//register grunt default task
grunt.registerTask('default', ['ngAnnotate', 'concat', 'terser']);
}

I had the same problem. According to the documentation, this should work but it didn't for me. Wrapping the "files" setting in a custom target works for me:
terser: {
options: {},
main: {
files: {
'./public/min/app.js': ['./public/min/app.js'],
}
}
}

To add to #Tim's great answer:
Here is an example that allows to run grunt-terser with path / file wildcard patterns (globbing) – which it does not support out of the box.
Please note the helper properties _src and _dest in the terser config which are not read by grunt-terser itself but by the task terser_all. This task expands the globbing pattern(s) in _src and builds the real config in the files property. When done it runs terser with that updated config.
module.exports = function (grunt) {
grunt.initConfig({
terser: {
dist: {
options: {
compress: {
drop_console: true // remove console.log, console.info, ...
}
},
files: {
// FILLED through terser_all task below!
// Examples config:
// "dist/example.js": [ "path/to/files/example.js" ]
// "dist/example_joined.js": [ "path/to/files/*.js" ]
},
// -----
// HELPER PROPERTIES to build the files prop (see above) in the terser_all task below.
_src: [
"path/to/files/*.js"
],
_dest: "dist/"
}
}
});
grunt.registerTask('terser_all', function () {
// work on this target in terser config
var terser_target_name = "dist";
// read the terser config
var terser_config = grunt.config.get('terser') || {};
var terser_target_config = terser_config[terser_target_name] || {};
// get the destination dir
var destDir = terser_target_config._dest;
// loop through all source files and create an entry in the terser config for each of it
var files = grunt.file.expand(terser_target_config._src);
for (const [i, file] of files.entries()) {
grunt.log.writeln(file);
// add this file to the terser config as: dest_file: src_file
terser_target_config.files[destDir + file] = file;
}
// show new config on CLI
grunt.log.writeflags(terser_target_config);
// write back config and run task
grunt.config.set('terser', terser_config);
grunt.task.run('terser');
});
grunt.loadNpmTasks('grunt-terser');
grunt.registerTask('build', ['terser_all']);
grunt.registerTask('default', ['build']);
};

Just a note:
If you try to "disable" some options by renaming this disables the whole process. At least this was my result with grunt-terser. I was left with the original js file.
{
mangleX: {
reserved: [/* ... */]
}
}

Grunt set option for task and run that task using new value

I have Grunt build automation added in my project.
I have created one custom task which sets a variable for other task and now I want to run the task using the value I set.
grunt.registerTask('dist-flow', function () {
if (!grunt.option('env')) {
grunt.option('env', 'prod');
console.log(grunt.option('env'));
}
grunt.registerTask('dist',['dev_prod_switch']);
grunt.task.run('distdev');
});
But whenever I run the dist-flow task it will set env to prod but dev_prod_switch always take default value which I set for dev_prod_switch.
So I want set the options from task and run specific task using that new value.

The problem:
Based on your question and comments, I'm assuming your Gruntfile.js looks something like this.
Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
dev_prod_switch: {
options: {
environment: grunt.option('env') || 'dev',
env_char: '#',
env_block_dev: 'env:dev',
env_block_prod: 'env:prod'
},
all: {
files: {
'appCommon/config.js': 'appCommon/config.js',
}
}
},
});
grunt.registerTask('dist-flow', function () {
if (!grunt.option('env') ) {
grunt.option('env', 'prod');
console.log(grunt.option('env'));
}
grunt.registerTask('dist',['dev_prod_switch']);
grunt.task.run('distdev');
});
};
Your issue is that you are trying to set the option inside a task, and read it back in the initConfig object. The trouble is, initConfig runs before your tasks, so environment has already been set to the default when your dist-flow task is run.
This line:
environment: grunt.option('env') || 'dev',
Runs before this line:
grunt.option('env', 'prod');
A Solution:
Inside your task, you can access your config option through grunt.config, so you could modify the value in the config object like so.
grunt.config.data.dev_prod_switch.options.environment = grunt.option('env');
Example Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
dev_prod_switch: {
options: {
environment: grunt.option('env') || 'dev',
env_char: '#',
env_block_dev: 'env:dev',
env_block_prod: 'env:prod'
},
all: {
files: {
'appCommon/config.js': 'appCommon/config.js',
}
}
},
});
grunt.registerTask('dist-flow', function () {
if (!grunt.option('env') ) {
grunt.option('env', 'prod');
console.log(grunt.option('env'));
grunt.config.data.dev_prod_switch.options.environment = grunt.option('env');
console.log(grunt.config.data.dev_prod_switch.options.environment);
}
grunt.registerTask('dist',['dev_prod_switch']);
grunt.task.run('distdev');
});
};