i'm currently having an issue with Yarn Build on one of my Macbooks but not on another, i've scoured through multiple existing posts around this, but none address the specifics of this issue, as it should work on one if it works on another if all libraries match up.
The Yarn build error i'm experiencing
yarn run v1.22.17
$ webpack --progress --config resources/assets/build/webpack.config.js
mod: homepage-banner
{
'homepage-banner': [],
main: [ './scripts/main.js', './styles/main.scss' ],
customizer: [ './scripts/customizer.js' ],
blocks: [ './styles/blocks.scss' ],
'manual-critical-css': [ './styles/manual-critical-css.scss' ]
}
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.entry should be one of these:
object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
-> The entry point(s) of the compilation.
Details:
* configuration.entry['homepage-banner'] should be a string.
-> The string is resolved to a module which is loaded upon startup.
* configuration.entry['homepage-banner'] should not be empty.
* configuration.entry should be a string.
-> An entry point without name. The string is resolved to a module which is loaded upon startup.
* configuration.entry should be an array:
[non-empty string]
* configuration.entry should be an instance of function
-> A Function returning an entry object, an entry string, an entry array or a promise to these things.
error Command failed with exit code 1.
I've ensured both Macs are using the same Libraries such as Node, Yarn, Composer, PHP etc, and they are both running on MacOS Monterey.
Libraries used on both and versions
- Yarn - 1.22.17
- Composer - 2.4.1
- Node - 18.8.0
- PHP - 7.4.30 (Zend 3.4.0)
Webpack.config.js
'use strict'; // eslint-disable-line
const webpack = require('webpack');
const merge = require('webpack-merge');
const CleanPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const CopyGlobsPlugin = require('copy-globs-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const desire = require('./util/desire');
const config = require('./config');
const assetsFilenames = (config.enabled.cacheBusting) ? config.cacheBusting : '[name]';
let webpackConfig = {
context: config.paths.assets,
entry: config.entry,
devtool: (config.enabled.sourceMaps ? '#source-map' : undefined),
output: {
path: config.paths.dist,
publicPath: config.publicPath,
filename: `scripts/${assetsFilenames}.js`,
},
stats: {
hash: false,
version: false,
timings: false,
children: false,
errors: false,
errorDetails: false,
warnings: false,
chunks: false,
modules: false,
reasons: false,
source: false,
publicPath: false,
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
include: [config.paths.assets, config.paths.modules], // Elementary PageBuilder Mod
use: 'eslint',
},
{
enforce: 'pre',
test: /\.(js|s?[ca]ss)$/,
include: [config.paths.assets, config.paths.modules], // Elementary PageBuilder Mod
loader: 'import-glob',
},
{
test: /\.js$/,
exclude: [/node_modules(?)/],
use: [
{ loader: 'cache' },
{ loader: 'buble', options: { objectAssign: 'Object.assign' } },
],
},
{
test: /\.css$/,
include: [config.paths.assets, config.paths.modules], // Elementary PageBuilder Mod
use: ExtractTextPlugin.extract({
fallback: 'style',
use: [
{ loader: 'cache' },
{ loader: 'css', options: { sourceMap: config.enabled.sourceMaps } },
{
loader: 'postcss', options: {
config: { path: __dirname, ctx: config },
sourceMap: config.enabled.sourceMaps,
},
},
],
}),
},
{
test: /\.scss$/,
include: [config.paths.assets, config.paths.modules], // Elementary PageBuilder Mod
use: ExtractTextPlugin.extract({
fallback: 'style',
use: [
{ loader: 'cache' },
{ loader: 'css', options: { sourceMap: config.enabled.sourceMaps } },
{
loader: 'postcss', options: {
config: { path: __dirname, ctx: config },
sourceMap: config.enabled.sourceMaps,
},
},
{ loader: 'resolve-url', options: { sourceMap: config.enabled.sourceMaps } },
{
loader: 'sass', options: {
sourceMap: config.enabled.sourceMaps,
sourceComments: true,
},
},
],
}),
},
{
test: /\.(ttf|otf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
include: config.paths.assets,
loader: 'url',
options: {
limit: 4096,
name: `[path]${assetsFilenames}.[ext]`,
},
},
{
test: /\.(ttf|otf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
include: /node_modules/,
loader: 'url',
options: {
limit: 4096,
outputPath: 'vendor/',
name: `${config.cacheBusting}.[ext]`,
},
},
],
},
resolve: {
modules: [
config.paths.assets,
config.paths.modules, // Elementary PageBuilder Mod
'node_modules',
],
enforceExtension: false,
},
resolveLoader: {
moduleExtensions: ['-loader'],
},
externals: {
jquery: 'jQuery',
},
plugins: [
new CleanPlugin([config.paths.dist], {
root: config.paths.root,
verbose: false,
}),
/**
* It would be nice to switch to copy-webpack-plugin, but
* unfortunately it doesn't provide a reliable way of
* tracking the before/after file names
*/
new CopyGlobsPlugin({
pattern: config.copy,
output: `[path]${assetsFilenames}.[ext]`,
manifest: config.manifest,
}),
new ExtractTextPlugin({
filename: `styles/${assetsFilenames}.css`,
allChunks: true,
disable: (config.enabled.watcher),
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: 'popper.js/dist/umd/popper.js',
}),
new webpack.LoaderOptionsPlugin({
minimize: config.enabled.optimize,
debug: config.enabled.watcher,
stats: { colors: true },
}),
new webpack.LoaderOptionsPlugin({
test: /\.s?css$/,
options: {
output: { path: config.paths.dist },
context: config.paths.assets,
},
}),
new webpack.LoaderOptionsPlugin({
test: /\.js$/,
options: {
eslint: { failOnWarning: false, failOnError: false },
},
}),
// new StyleLintPlugin({
// failOnError: !config.enabled.watcher,
// syntax: 'scss',
// }),
new FriendlyErrorsWebpackPlugin(),
],
};
/* eslint-disable global-require */ /** Let's only load dependencies as needed */
if (config.enabled.optimize) {
webpackConfig = merge(webpackConfig, require('./webpack.config.optimize'));
}
if (config.env.productionCrit) { // Added for critical css
webpackConfig = merge(webpackConfig, require('./webpack.config.critical'));
}
if (config.env.production) {
webpackConfig.plugins.push(new webpack.NoEmitOnErrorsPlugin());
}
if (config.enabled.cacheBusting) {
const WebpackAssetsManifest = require('webpack-assets-manifest');
webpackConfig.plugins.push(
new WebpackAssetsManifest({
output: 'assets.json',
space: 2,
writeToDisk: false,
assets: config.manifest,
replacer: require('./util/assetManifestsFormatter'),
})
);
}
if (config.enabled.watcher) {
webpackConfig.entry = require('./util/addHotMiddleware')(webpackConfig.entry);
webpackConfig = merge(webpackConfig, require('./webpack.config.watch'));
}
/**
* During installation via sage-installer (i.e. composer create-project) some
* presets may generate a preset specific config (webpack.config.preset.js) to
* override some of the default options set here. We use webpack-merge to merge
* them in. If you need to modify Sage's default webpack config, we recommend
* that you modify this file directly, instead of creating your own preset
* file, as there are limitations to using webpack-merge which can hinder your
* ability to change certain options.
*/
module.exports = merge.smartStrategy({
'module.loaders': 'replace',
})(webpackConfig, desire(`${__dirname}/webpack.config.preset`));
Any help on this would be massively appreciated, as i've tried uninstalling, installing different versions, and entirely reformating my mac and starting from scratch, but i get the same results, so something's missing that i can't wrap my head around.
Thank you