Closed selul closed 2 years ago
@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/csso@5.0.2/node_modules/csso/lib/version.js");
So "file:///<path>/node_modules/.pnpm/csso@5.0.2/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?
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",
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:
resolve: { aliasFields: ["browser"] }
– it will enable browser
field usage"csso/dist/csso.esm"
instead of "csso"
– however, its minifiedmodule
to externals
, probably your webpack version doesn't track it as external (not sure it works)Thanks a lot for feedback, adding resolve: { aliasFields: ["browser"] }
solved the issue.
hi,
I'm trying to use csso library with webpack as es module. The entry file is:
and on the output file, I get
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.