Slim 4 & Webpack Error manifest file not exists

Question

I am setting up Slim 4 PHP application and I am building JS & CSS with Webpack 4. I followed code from Github and Slim tutorial but I always get the error:

Type: Twig\Error\LoaderError
Code: 0
Message: Webpack manifest file not exists.

My layout.twig file is failing on this line :

{% webpack_entry_js 'vendor' %}

and my webpack.config.js file contains:

    const path = require('path');
    // const webpack = require('webpack');
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    module.exports = (env, argv) => ({
        entry: {
            vendor: path.resolve(__dirname, './frontend/vendor/vendor.js'),
            layout: path.resolve(__dirname, './frontend/layout/layout.js')
        },
    
        output: {
            path: path.resolve(__dirname, 'public/assets'),
            publicPath: 'assets/',
            filename: '[name].bundle.js'
        },
    
        mode: 'production',    
    
        optimization: {
            splitChunks: {
                chunks: 'all',
                minSize: 20000,
                automaticNameDelimiter: '_'
            }        
        },
    
        performance: {
            maxEntrypointSize: 1024000,
            maxAssetSize: 1024000
        },
    
        resolve: {
            extensions: ['.js', '.ts', '.tsx', '.css', '.scss']
        },
    
        module: {
            rules: [
                {
                    test: /\.(png|jpg)$/,
                    use: [
                        'file-loader'
                    ]
                },            
                {
                    test: /\.js$/,
                    use: 'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.tsx?$/,
                    use: ['babel-loader', 'ts-loader'],
                    exclude: /node_modules/
                },            
                {
                    test: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader, 'css-loader'
                    ]
                },
                {
                    test: /\.scss$/,
                    use: [
                        MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'
                    ]
                },            
                {
                    test: /\.(ttf|eot|svg|woff|woff2)(\?[\s\S]+)?$/,
                    include: path.resolve(__dirname, './node_modules/@fortawesome/fontawesome-free/webfonts'),
                    use: {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'webfonts',
                            publicPath: '../webfonts',
                        },
                    }
                },
            ],
        },
    
        plugins: [
            new CleanWebpackPlugin(),
            new WebpackManifestPlugin({chunk: true, isChunk: true}),
            new MiniCssExtractPlugin({
                ignoreOrder: false,
                filename: '[name].bundle.css'
            }),
        ],
    
        watchOptions: {
            ignored: ['./node_modules/']
        }
    });

When I run webpack compailer as: npx webpack --watch it works. Inside /public/assets folder I see compiled files. Here is also package.json file:

 "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@popperjs/core": "^2.6.0",
    "bootstrap": "^4.5.3",
    "jquery": "^3.5.1",
    "lodash": "^4.17.20"
},
"devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^1.3.3",
    "node-sass": "^5.0.0",
    "popper.js": "^1.16.1",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "webpack": "^4.44.2",
    "webpack-assets-manifest": "^3.1.1",
    "webpack-cli": "^4.2.0",
    "webpack-manifest-plugin": "^3.0.0"
}

I have tried many other ways, changing the modules versions (like Webpack 5 etc.) but without success. For another project I used Symfony 4 with Encore module and it worked. But with Slim 4 no success so far.

Thank you for sharing your experiences.

Answer 1

Solution:

I found where was the problem: Inside container.php I was retrieving twig settings by one line assignment:

$settings = $container->get('settings')['twig'];

which I found on Odin blog. But after I changed it into:

$config = (array)$container->get('settings');
$settings = $config['twig'];

application started to work.

I also opened special thread on Slim discussion forum if you are interested into more details.