webpack/css-loader

Error when importing not from main entry

Closed this issue · 1 comments

Bug report

Actual Behavior

When I import a css it builds with no errors but when loading bundle files in a broswer it throws "webpack_require.n is not a function"

Expected Behavior

It should import a css file and pass it to other loaders

How Do We Reproduce?

Here is webpack config:

const path = require('path');
const fs = require('fs');
const webpack = require('webpack')

const pages = fs.readdirSync('./src/pages')
                .reduce((acc, v) => ({ ...acc, [v.replace('.js', '')]: { 
                    import: `./src/pages/${v}`,  
                    library: {
                        name: ['Favia', 'pageModule'],
                        type: 'var'
                    }
                }}), {});

module.exports = {
    devtool: false,
    plugins: [new webpack.SourceMapDevToolPlugin({
        exclude: ['alpine.js', 'runtime.js']
    })],  
    entry: {...pages, index: { 
        import: './src/index.js',
        library: {
            // all options under `output.library` can be used here
            name: 'Favia',
            type: 'var'
          },

    }},
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        // chunkLoading: 'import', 
        chunkFormat: 'array-push'
    },
    module: {
        rules: [
            {
                test: /\.html$/i,
                loader: "html-loader",
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
        ],
    },
    optimization: {
        runtimeChunk: "single",
        removeEmptyChunks: false,
        minimize: false,
        splitChunks: {
            cacheGroups: {
                alpinejs: {
                    minSize: 0,
                    chunks: 'all',
                    test: /[\\/]node_modules[\\/]alpinejs/,
                    
                    name() {
                        return 'alpine'
                    }
                  },
            }
        },      
    },
};

Please paste the results of npx webpack-cli info here, and mention other relevant information

webpack-cli info output:


  System:
    OS: Linux 6.6 Arch Linux
    CPU: (16) x64 AMD Ryzen 7 5800U with Radeon Graphics
    Memory: 3.30 GB / 14.98 GB
  Binaries:
    Node: 20.9.0 - ~/.local/share/nvm/v20.9.0/bin/node
    Yarn: 1.22.19 - ~/.local/share/nvm/v20.9.0/bin/yarn
    npm: 10.1.0 - ~/.local/share/nvm/v20.9.0/bin/npm
  Packages:
    css-loader: ^6.8.1 => 6.8.1 
    html-loader: ^4.2.0 => 4.2.0 
    style-loader: ^3.3.3 => 3.3.3 
    webpack: ^5.89.0 => 5.89.0 
    webpack-bundle-analyzer: ^4.10.1 => 4.10.1 
    webpack-cli: ^5.1.4 => 5.1.4 
  Global Packages:
    webpack-cli: 5.1.4

I have tried to remove style-loader from the chain but it does not change anything.
When importing from index.js entry there is no error.

Also how the bundle files are imported:
There are two imports in the head of page: runtime and index
And at the end of the body I import a page script (in this case where I import css file)

Closing as I am retarted. When creating a repo to reproduce the bug I realized I have been using cached runtime where no css loader exists.