Comments (4)
@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?
from csso.
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",
from csso.
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 enablebrowser
field usage - to import
"csso/dist/csso.esm"
instead of"csso"
– however, its minified - add
module
toexternals
, probably your webpack version doesn't track it as external (not sure it works) - try latest webpack version
from csso.
Thanks a lot for feedback, adding resolve: { aliasFields: ["browser"] }
solved the issue.
from csso.
Related Issues (20)
- Invalid font optimizations HOT 1
- Take in account selectors support in functional pseudo-classes
- csso mis-compression of escape sequence in v5.0.0+
- Allow to enforce applying optimisations to custom property values HOT 8
- Merging is broken for :where selectors HOT 6
- escaped dashicon not working HOT 9
- @import statement on the bottom were removed HOT 1
- Wrong css property applied after restructuring
- Contents of the :is and :where pseudo-class functions is not optimized HOT 3
- ccoss
- how disabled colormin?
- csso ignores charset and always produces UTF-8
- Wrong border compressed result when with shorthand-border
- Shorten CSS Variable Names
- [bug] minifies removes @media tags HOT 4
- Update `css-tree` dependency HOT 2
- Minifying 0px within calc statements breaking site.
- Failure to Concatenate/Combine 2 CSS Selectors in Obscure Edge Case
- Duplicate content property removed
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from csso.