Skip to content

Instantly share code, notes, and snippets.

@tchetwin
Created June 18, 2019 15:57
Show Gist options
  • Save tchetwin/eeeffdfbbf973b59f05a3ecba3ab253a to your computer and use it in GitHub Desktop.
Save tchetwin/eeeffdfbbf973b59f05a3ecba3ab253a to your computer and use it in GitHub Desktop.
Webpack'ing sass (dart-sass), specify list of imports available in context?

Situation

The dart-sass dart compilation results in this sass.dart.js module: https://runpkg.com/?sass@1.21.0/sass.dart.js

Amongst other things, this contains (many lines redacted):

var self = Object.create(global);
self.require = require;

//...

u($,"N0","Hq",function(){return self.require("readline")})
u($,"Mr","cN",function(){return self.require("fs")})
u($,"MN","Ho",function(){return self.require("chokidar")})

This use of require prevents static analysis by webpack, resulting in the error in the output (also in this gist) and a webpackEmptyContext being created in the bundle. This naturally doesn't work :)

Question

How can I configure the context for this particular module to specifically list readline/fs/chokidar as dependencies, possibly to produce some context that only provides those values?

I've seen the ContextReplacementPlugin, I don't think this applies here as the usage is not a direct require call.

I've seen noParse, but that feels like the nuclear approach, and I don't know what the potential negative side effects may be.

I don't mind if the solution is a little brittle and would require pinning of the version of dart-sass.

$ npm run build
> @ build /c/dev/dump/webpack-dart-sass
> webpack-cli
Hash: 5d5d2689e3dd0b2af601
Version: webpack 4.34.0
Time: 1532ms
Built at: 06/18/2019 3:44:11 PM
Asset Size Chunks Chunk Names
main.js 716 KiB main [emitted] main
Entrypoint main = main.js
[./node_modules/sass sync recursive] ./node_modules/sass sync 160 bytes {main} [built]
[./src/index.js] 50 bytes {main} [built]
+ 1 hidden module
WARNING in ./node_modules/sass/sass.dart.js 13:15-22
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
@ ./src/index.js
/***/ "./node_modules/sass sync recursive":
/*!********************************!*\
!*** ./node_modules/sass sync ***!
\********************************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = function() { return []; };\nwebpackEmptyContext.resolve = webpackEmptyContext;\nmodule.exports = webpackEmptyContext;\nwebpackEmptyContext.id = \"./node_modules/sass sync recursive\";\n\n//# sourceURL=webpack:///./node_modules/sass_sync?");
/***/ }),
const sass = require("sass");
console.log(sass);
{
"devDependencies": {
"webpack": "^4.34.0",
"webpack-cli": "^3.3.4"
},
"dependencies": {
"sass": "^1.21.0"
},
"scripts": {
"build": "webpack-cli"
}
}
module.exports = (env) => ({
entry: "./index.js",
mode: "development",
target: "node"
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment