usage with webpack as es module

[selul]

hi,

I'm trying to use csso library with webpack as es module. The entry file is:

import { minify } from "csso";

and on the output file, I get

const version_require = (0,external_module_namespaceObject.createRequire)("file:///<path>/node_modules/.pnpm/[email protected]/node_modules/csso/lib/version.js");

which throws an error since versions.js is not present in the final build.

Any idea what could be wrong? I see that version.js is not used in the internal library code but since this package.json is not using sideEffects:false the tree shaking mechanism will still include this in the final build.

Also, I would like to mention that the version before 5.0 is working fine, so it might be something related to the dual build mechanism implemented in 5.0.

Any help is appreciated.

[lahmatiy]

@selul I see, that there is a problem with version module in dist. However, your issue is not related to it.

Originally, lib/version.js module looks like this:

import { createRequire } from 'module';

const require = createRequire(import.meta.url);

export const { version } = require('../package.json');

Webpack converts it into:

const version_require = (0,external_module_namespaceObject.createRequire)("file:///<path>/node_modules/.pnpm/[email protected]/node_modules/csso/lib/version.js");

So "file:///<path>/node_modules/.pnpm/[email protected]/node_modules/csso/lib/version.js" is substituted value of import.meta.url. That's known issue, that webpack doesn't play well with require('module') / createRequire. That's why a special version of version.js is used in dist which defined via browser field for bundling purposes. Probably brower field is disabled in your setup?

[selul]

Thanks a lot for the insights, from checking my webpack config I don't do anything in particular that could affect browser config.

{
    externals: {
        "aws-sdk": "aws-sdk"
    },
    optimization: {
        minimize: false,
    },
    externalsType: "node-commonjs",
    mode: "production",
    stats: "minimal",
    target: "node14",
    watch: false, 
    experiments: {
        outputModule: true,
    },
    devtool: "inline-cheap-module-source-map", 
    output: {
        module: true,
        library: {
            type: "module",
        },
        filename: "index.mjs",
        path: resolve( "./dist/" ),
    }
};

As for the package.json the only thing that is related to this is having:

 "sideEffects": false,
 "type": "module",

[lahmatiy]

Thank you for sharing your webpack config. I tried it with (latest versions):

webpack: 5.70.0
webpack-cli: 4.9.2

And bundle seems to work (no exceptions). I suppose, the problem is connected with target: "node14" which is disabling usage of browser field in package.json.

You also could try:

• add resolve: { aliasFields: ["browser"] } – it will enable browser field usage
• to import "csso/dist/csso.esm" instead of "csso" – however, its minified
• add module to externals, probably your webpack version doesn't track it as external (not sure it works)
• try latest webpack version

[selul]

Thanks a lot for feedback, adding resolve: { aliasFields: ["browser"] } solved the issue.