We Keep Coding

Invalid configuration object: webpack-cli configuration.optimization.splitChunks Webpacker 5 Rails 6

After upgrading from Webpacker 4 to 5, I receive a new error while running rails webpacker:compile. Running yarn dev, alone; works without issue -- I can't seem to find what the cause of this bug is, or what file its located in. There's aren't many debugging tools in this case. How do I fix the problem where splitChunks is failing for webpacker 5?
Error:
➜ rails webpacker:compile
warning: parser/current is loading parser/ruby27, which recognizes
warning: 2.7.3-compliant syntax, but you are running 2.7.4.
warning: please see https://github.com/whitequark/parser#compatibility-with-ruby-mri.
I, [2022-01-04T14:59:51.4223 #20612] INFO -- : initializing Lit
Compiling...
Compilation failed:
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.optimization.splitChunks should be one of these:
false | object { automaticNameDelimiter?, cacheGroups?, chunks?, defaultSizeTypes?, enforceSizeThreshold?, fallbackCacheGroup?, filename?, hidePathInfo?, maxAsyncRequests?, maxAsyncSize?, maxInitialRequests?, maxInitialSize?, maxSize?, minChunks?, minRemainingSize?, minSize?, minSizeReduction?, name?, usedExports? }
-> Optimize duplication and caching by splitting chunks by shared modules and cache group.
Details:
* configuration.optimization.splitChunks.name should be one of these:
false | string | function
-> Give chunks created a name (chunks with equal name are merged).
Details:
* configuration.optimization.splitChunks.name should be false.
* configuration.optimization.splitChunks.name should be a string.
* configuration.optimization.splitChunks.name should be an instance of function.

I don't what's your configurations, but the problem is in your configuration.optimization.splitChunks.name being something other then either false , string or instance of function

Getting the spec file name into TAP file

we use testem to run our javascript unit tests. As output I get a TAP file, that looks similar like this
ok 1 PhantomJS 2.1 - ABC Directive should contain a template
---
Log: |
{ type: 'log',
text: '\'WARNING: Tried to load angular more than once.\'\n' }
...
lets say, the test is defined ABCItemSpec.coffee. Is there anyway to include this file name in the final TAP output ?
I do not understand much about the javascript/gulp setup her, so the question might be too blurry, but maybe there is a general solution (the way to setup testem, or to give the spec file as argument etc) ?

Using guard to minify javascript files into a different directory

I am trying to create my first guardfile and have run into difficulties trying to minify some of my javascript files.
I want guard to watch the 'app/assets/js' directory and any time a file is changed within this directory, for a minified version of the file to be created within 'public/js' with the same name and if possible within the same directory name.
For example were I to save the bootstrap.js file within app/assets/js/vendor I would like for the minified version to be placed within the public/js/vendor/bootstrap.min.js file.
Below are the relevant parts of my current guardfile:
require 'cssmin'
require 'jsmin'
module ::Guard
class Refresher < Guard
end
end
#
guard :refresher do
watch('public/css/styles.min.css') do |m|
css = File.read(m[0])
File.open(m[0], 'w') { |file| file.write(CSSMin.minify(css)) }
end
watch(%r[app/assets/js/.+]) do |m|
js = File.read(m[0])
File.open(m[0], 'w') { |file| file.write(JSMin.minify(js)) }
end
end
This is my first experience of Ruby and so beginner orientated answers would be appreciated. Thanks.

You write to the same file you're reading. According to your question, you need something like:
watch(%r[app/assets/js/(.+)]) do |m|
File.write("public/js/#{ m[1] }", JSMin.minify(File.read(m[0])))
end
Please note the capture group I've added to the regexp, so I can grab the filename with m[1].

How to have a the docpad grunt skeleton min vendor js files with live reload

I'm using skeleton #2, HTML5BP + Grunt. The first time I docpad run the following happens:
info: LiveReload listening to new socket on channel /docpad-livereload
Performing writeFiles (postparing) at 0/1 0% [...] Running "min:js" (min) task
File "../out/scripts/all.min.js" created.
Uncompressed size: 298495 bytes.
Compressed size: 38257 bytes gzipped (106756 bytes minified).
Which is as is supposed to be. However using the livereload plugin if I change a template or document file, I get:
--Running "min:js" (min) task
File "../out/scripts/all.min.js" created.
Uncompressed size: 0 bytes.
Editing my script.js throws it into the mix, but none of my vendor js files are rendered with it, which is just as useless. grunt-cssmin renders all scss/css files grunt-config.json regardless, which works fine. Moving my js from /files/vendor to /documents/scripts didn't change this behavior.
I've done a little poking around, but I'm new to grunt and nothing jumped out at me.
It'd be nice if I could either:
a) have all JS files in grunt-config.json minned and zipped each time
b) not have grunt min js files in development environment
As is if I want to make any changes to something regarding javascript, I need to ctrl-c docpad and then run it again, which is meh.

Not ideal, but effective enough:
events:
# Write After
# Used to minify our assets with grunt
writeAfter: (opts,next) ->
# Prepare
docpad = #docpad
rootPath = docpad.config.rootPath
balUtil = require 'bal-util'
_ = require 'underscore'
# Make sure to register a grunt `default` task
command = ["#{rootPath}/node_modules/.bin/grunt", 'default']
# Execute
balUtil.spawn command, {cwd:rootPath,output:true}, ->
src = []
gruntConfig = require './grunt-config.json'
_.each gruntConfig, (value, key) ->
src = src.concat _.flatten _.pluck value, 'src'
#_.each src, (value) ->
# balUtil.spawn ['rm', value], {cwd:rootPath, output:false}, ->
#balUtil.spawn ['find', '.', '-type', 'd', '-empty', '-exec', 'rmdir', '{}', '\;'], {cwd:rootPath+'/out', output:false}, ->
next()
# Chain
#
The three lines around "balUtil" which perform find/rm commands were commented out.
Not ideal since the "uncompressed" files are left around -- but that's not really the end of the world. Live-reloading to empty pages was a tad more frustrating, ultimately.
There could be a way to further enhance this to detect a live reload (development) vs generating a build for production, but I haven't grokked that yet.

Cannot find production.css during the build process in JavaScript MVC

I generated a sample app just to test the build process and it errors out during the build process.
$ ./js steal/buildjs apps/hello/hello.html -to apps/helloprod
Building to apps/helloprod/
BUILDING STYLES ---------------
apps/hello/hello.css
STYLE BUNDLE > apps/helloprod/production.css
Nice! Compressed: 17.1% Before: 41.0 bytes After: 34.0 bytes
!!!!!!!!!!! ERROR !!!!!!!!!!!
-message = java.io.FileNotFoundException: apps/helloprod/production.css (No such file or directory)
-fileName = steal/rhino/file.js
-lineNumber = 217
-name = JavaException
-javaException = java.io.FileNotFoundException: apps/helloprod/production.css (No such file or directory)
error loading html element [object HTMLScriptElement] JavaException: java.io.FileNotFoundException: apps/helloprod/production.css (No such file or directory)
There was some content in .css file by default when I generated an app, so I even tried to remove the content inside (in which case it would error out because it cannot calculate the size of the file, eg. it was saying NaN undefined instead of 41.0 bytes). This particular error came up when I just had this in hello.css:
body{
background-color:lightyellow;
}
Any ideas?

Your problem is, according to the error message, that apps/helloprod/production.css file is missing.
Make sure that this file exists or remove if from the build process.
EDIT:
Is it because steal/rhino/file.js is included as a source file for CSS?