Develop Reference

How to apply sass loaders correctly to apply styles

I am working on a project where I am using several sass files and I am calling them into one single file, the problem is that when I try to apply the styles they don't show up.
sass files. Now this is how i configured my webpack.config.js file
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
assetModuleFilename: "images/[hash][ext][query]",
},
devtool: "inline-source-map",
devServer: {
contentBase: "./dist",
},
module: {
rules: [
{
test: /\.(s[ac]|c)ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
generator: {
filename: "static/[hash][ext][query]",
},
},
],
},
};
and this is the error i get
> restaurant#1.0.0 start /home/cvilla714/javascript/restaurant-page
> webpack serve --open
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./dist
ℹ ｢wdm｣: wait until bundle finished: /
✖ ｢wdm｣: asset main.js 943 KiB [emitted] (name: main)
runtime modules 1.25 KiB 6 modules
modules by path ./node_modules/ 345 KiB 26 modules
modules by path ./sass/*.scss 2.4 KiB
./sass/tabs.scss 366 bytes [built] [code generated]
./sass/main.scss 366 bytes [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./sass/tabs.scss 1.64 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./sass/main.scss 39 bytes [built] [code generated] [1 error]
modules by path ./src/*.js 4.48 KiB
./src/index.js 201 bytes [built] [code generated]
./src/tabs.js 2.42 KiB [built] [code generated]
./src/nav.js 1.86 KiB [built] [code generated]
ERROR in ./sass/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./sass/main.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
╷
7 │ $font-dancingScript: "Dancing Script", cursive;
│ ^
╵
sass/_layout.scss 7:47 #import
sass/main.scss 2:9 root stylesheet
# ./sass/main.scss 2:12-127 9:17-24 13:15-29
# ./src/nav.js 4:0-27
# ./src/index.js 3:0-31
webpack 5.18.0 compiled with 1 error in 2816 ms
ℹ ｢wdm｣: Failed to compile.
this is how I am importing the style to the project
import "../sass/main.scss";
I can't apply my styles to the project, I have been trying all day to fix this issue with no success, I would really appreciate if someone can please point me in the right direction.

Your Webpack config is correct. Error in your
$font-dancingScript: "Dancing Script", cursive;
adding ' must solve your problem;
$font-dancingScript: ' "Dancing Script", cursive ';
Config:
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.s[ac]ss$/i,
use: ["style-loader","css-loader","sass-loader"],
}

webpack - ReferenceError: document is not defined

tl;dr: Webpack won't compile and I'm not sure why when everything looks syntactically correct, and also I don't fully understand what this error is implying.
Trying to use webpack. Full disclosure: really new to this (js/front end in general). I finally resolved the other errors I was getting (mostly just pointing to wrong filepaths or syntax errors). I followed a youtube video to get this set up , which in hindsight might not have been the best idea, but I needed to begin somewhere and watching is easier than reading. Anyway so I followed that and got things moving. Installed everything with npm (see package.json below) and created the src/dist and so forth. I am not using React/Angular/Vue etc, just regular plain old vanilla javascript. And I'm on Linux, if that makes any bit of difference (I'd imagine not).
Then I was met with this error:
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /home/alan/dev/privateFolder/shrektime
ℹ ｢wdm｣: wait until bundle finished: /
✖ ｢wdm｣: Hash: 91bf4b6307b254c69adc
Version: webpack 4.44.1
Time: 1110ms
Built at: 04/09/2020 04:20:38
Asset Size Chunks Chunk Names
.dist/index.html 1.39 KiB [emitted]
55e664c36a02d03a083764a7c577f012.png 17.2 KiB [emitted] [immutable]
bundle.js 374 KiB main [emitted] main
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/js/components/Calendar.js] 1.18 KiB {main} [built]
[./src/js/components/Input.js] 171 bytes {main} [built]
[./src/js/components/Results.js] 603 bytes {main} [built]
[./src/js/handlers/base.js] 356 bytes {main} [built]
[./src/main.js] 2.7 KiB {main} [built]
+ 23 hidden modules
ERROR in Error: /home/alan/dev/privateFolder/shrektime/node_modules/style-loader/dist/runtime/injectStylesIntoSty leTag.js?:93
var style = document.createElement('style');
^
ReferenceError: document is not defined
- injectStylesIntoStyleTag.js?:93 insertStyleElement
[.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:93:15
- injectStylesIntoStyleTag.js?:208 addStyle
[.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:208:13
- injectStylesIntoStyleTag.js?:81 modulesToDom
[.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:81:18
- injectStylesIntoStyleTag.js?:239 module.exports
[.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:239:25
- style.css?:15 eval
/home/alan/dev/privateFolder/shrektime/src/style.css?:15:14
- index.html:240 Object../src/style.css
/home/alan/dev/privateFolder/shrektime/src/index.html:240:1
- index.html:21 __webpack_require__
/home/alan/dev/privateFolder/shrektime/src/index.html:21:30
- loader.js:3 eval
[index.html?.]/[html-webpack-plugin]/lib/loader.js:3:34
- index.html:133 Object../node_modules/html-webpack-plugin/lib/loader.js!./src /index.html
/home/alan/dev/privateFolder/shrektime/src/index.html:133:1
- index.html:21 __webpack_require__
/home/alan/dev/privateFolder/shrektime/src/index.html:21:30
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
55e664c36a02d03a083764a7c577f012.png 17.2 KiB [emitted] [immutable]
+ 1 hidden asset
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/css-loader/dist/cjs.js!./src/style.css] 5.29 KiB {HtmlWebpackPlugin_0} [built]
[./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {HtmlWebpackPlugin_0} [built]
[./node_modules/html-loader/dist/runtime/getUrl.js] 548 bytes {HtmlWebpackPlugin_0} [built]
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 4.34 KiB {HtmlWebpackPlugin_0} [built]
[./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js] 6.64 KiB {HtmlWebpackPlugin_0} [built]
[./src/img/icons8-shrek-256.png] 80 bytes {HtmlWebpackPlugin_0} [built]
[./src/js/components/Calendar.js] 1.18 KiB {HtmlWebpackPlugin_0} [built]
[./src/js/components/Input.js] 171 bytes {HtmlWebpackPlugin_0} [built]
[./src/js/components/Results.js] 603 bytes {HtmlWebpackPlugin_0} [built]
[./src/js/handlers/base.js] 356 bytes {HtmlWebpackPlugin_0} [built]
[./src/js/handlers/dateHandler.js] 1.97 KiB {HtmlWebpackPlugin_0} [built]
[./src/main.js] 2.7 KiB {HtmlWebpackPlugin_0} [built]
[./src/style.css] 519 bytes {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Failed to compile.
here is my package.json
{
"name": "shrektime",
"version": "1.0.0",
"description": "A stupid idea gone too far",
"main": "main.js",
"type": "module",
"dependencies": {
"fractional": "^1.0.0",
"lodash": "^4.17.20",
"moment": "^2.27.0"
},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"babel-loader": "^8.1.0",
"css-loader": "^4.2.2",
"file-loader": "^6.1.0",
"html-loader": "^1.3.0",
"html-webpack-plugin": "^4.4.1",
"mini-css-extract-plugin": "^0.11.0",
"node-sass": "^4.14.1",
"sass-loader": "^10.0.2",
"style-loader": "^1.2.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"scripts": {
"compile:sass": "node-sass src/sass/main.scss src/style.css -w",
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode-development --open"
},
"author": "Alan Nardo",
"license": "ISC"
}
in my main.js folder I have the CSS and Sass imported as such:
import sass from './sass/main.scss';
import css from './style.css';
and finally my webpack.config.js file:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
module.exports = {
entry: "./src/main.js",
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: { loader: "babel-loader" }
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{ loader: "file-loader" }
]
},
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
],
},
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: ".dist/index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
This is an image of my folder structure:

I just had, and solved this issue, without finding an answer on stackoverflow.
So here how I caused this problem:
In webpack, in your loader section, if you leave out the 'test' part of your rule,
you may trigger this error.
The issue is, that webpack will invoke your loader
on the wrong kinds of files, and give errors like this.
..
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader', exclude: /node_modules/
},
]
}
..
(I'm aware the above question contains tests, but my reputation is too low to comment, and I believe understanding the underlying causes of the error is relevant to figuring out how to solve them. I don't like unexplained 'I did thing and now it works!! kinds of answers.)

So I'm not sure if anyone else will have quite the same error, but just in case, there's nothing worse than searching forums and finding the exact same error and nobody leaving an answer.
I got help from a friendly redditor (shoutout r/learnjavascript) and it was basically just a few syntax errors here and there and me not understanding how things work.
under the HtmlWebpackPlugin I had to change the filename from .dist/index.html to index.html and had to add in the following code in the module.exports of webpack.config.js for the webpack-dev-server to run:
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
which is pulled right from the docs page https://webpack.js.org/configuration/dev-server/#devserver. Presumably you can choose any port number you fancy.
Additionally, I had to change how I imported one of my js files as it is a class (and tbh I should probably change that but I'll cross that bridge when I get to it). It's called Calendar.js so instead of doing import * as Calendar from './Calendar' I had to use import Calendar from './Calendar'.
Finally, in my src/index.html I left in the style and script tags for the css and main.js respectively, so I had to remove those.

Why does Webpack build of React web app fail when project is built in a different folder?

I have a React project which was built using Webpack. The weird issue is when I run the React app in my original folder it builds and runs without any error. However when I copy all the files in the folder, paste it in a new folder and then try to build the same project it fails. I have tried changing the folder name, changing the config files to reflect the new folder name, however it always fails in app.js and points to an error in render method. Few points to note:
I havent hardcoded any paths
I have cleaned the node modules and rebuilt the project from groundup including cleaning npm cache.
The same project works in my original folder without any errors.
The error I get is as follows:
Version: webpack 2.2.1
Time: 1520ms
Asset Size Chunks Chunk Names
app.js 219 kB 0 [emitted] main
index.html 636 bytes [emitted]
chunk {0} app.js (main) 208 kB [entry] [rendered]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[32] ./src/app.js 783 bytes {0} [built] [failed] [1 error]
[33] (webpack)-dev-server/client?http://0.0.0.0:8080 4.16 kB {0}
[built]
[34] ./~/ansi-regex/index.js 135 bytes {0} [built]
[35] ./~/punycode/punycode.js 14.7 kB {0} [built]
[36] ./~/querystring-es3/decode.js 2.51 kB {0} [built]
[38] ./~/querystring-es3/index.js 127 bytes {0} [built]
[40] ./~/sockjs-client/lib/entry.js 244 bytes {0} [built]
[47] ./~/sockjs-client/lib/main.js 11.9 kB {0} [built]
[49] ./~/sockjs-client/lib/transport-list.js 613 bytes {0}
[built]
[66] ./~/strip-ansi/index.js 161 bytes {0} [built]
[68] ./~/url/url.js 23.3 kB {0} [built]
[69] ./~/url/util.js 314 bytes {0} [built]
[70] (webpack)-dev-server/client/socket.js 897 bytes {0} [built]
[72] multi (webpack)-dev-server/client?http://0.0.0.0:8080
./src/app.js
40 bytes {0} [built]
+ 58 hidden modules
ERROR in ./src/app.js
Module build failed: SyntaxError: Unexpected token (39:2)
37 | // });
38 | ReactDOM.render(
> 39 | <div>Hello</div>,
| ^
40 | document.getElementById('content'),
41 | );
42 |
# multi (webpack)-dev-server/client?http://0.0.0.0:8080
./src/app.js
Child html-webpack-plugin for "index.html":
chunk {0} index.html 542 kB [entry] [rendered]
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 1.32
kB
{0} [built]
webpack: Failed to compile.
The above error doesn't happen when running in my original folder. What is the issue here?

Your .babelrc file is in the root of your project directory, and thats where webpack looks for it to use your loaders and presets. You can workaround by using the following config
{
use: [
{
loader: 'babel-loader',
options: {
babelrc: false,
presets: [require.resolve('babel-preset-react-app')], // <- Whatever preset you wish
cacheDirectory: true,
}
}
],
test: /\.js$/,
exclude: /node_modules/
},

resolving ts-loader in a path using webpack 2.2.1 in a script

Given the following gulp task.
I get error output
Module not found: Error: Can't resolve 'app.ts' in 'wwwroot/js/admin'
gulp.task("admin:js", function (done) {
module.exports = {
context: "wwwroot/js/admin",
entry: ["app.ts", "zippy.ts"],
output: {
filename: "admin.js"
},
devtool: "source-map",
module: {
rules: [
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
webpack(module.exports).run(onBuild(done));
});
with directory structure
wwwroot\js\admin\app.ts
wwwroot\js\admin\zippy.ts
I am getting this error:
Version: webpack 2.2.1
Time: 31ms
Asset Size Chunks Chunk Names
admin.js 2.87 kB 0 [emitted] main
admin.js.map 2.61 kB 0 [emitted] main
chunk {0} admin.js, admin.js.map (main) 40 bytes [entry] [rendered]
[0] multi app.ts zippy.ts 40 bytes {0} [built]
ERROR in multi app.ts zippy.ts
Module not found: Error: Can't resolve 'app.ts' in 'wwwroot/js/admin'
# multi app.ts zippy.ts
ERROR in multi app.ts zippy.ts
Module not found: Error: Can't resolve 'zippy.ts' in 'wwwroot/js/admin'
# multi app.ts zippy.ts
It's a path issue, as if I execute webpack from the command line, in the wwwroot\js\admin directory, without the context path, the files get bundled correctly and it all works.
When I use the API script, and execute from the project root (relative to .\wwwroot\js\admin) I get the error output.

webpack does not support the use of relative paths in the context configuration entry.
changing context as follows:
module.exports = {
context: __dirname + "/wwwroot/js/admin",
...
corrected the output.
Version: webpack 2.2.1
Time: 2337ms
Asset Size Chunks Chunk Names
admin.js 1.24 MB 0 [emitted] [big] main
admin.js.map 1.48 MB 0 [emitted] main
chunk {0} admin.js, admin.js.map (main) 1.24 MB [entry] [rendered]
[0] ./~/angular/index.js 48 bytes {0} [built]
[1] ./wwwroot/js/admin/app.ts 408 bytes {0} [built]
[2] ./wwwroot/js/admin/zippy.ts 1.16 kB {0} [built]
[3] ./~/angular/angular.js 1.24 MB {0} [built]
[4] multi ./app.ts ./zippy.ts 40 bytes {0} [built]
[10:30:37] Finished 'admin:js' after 2.43 s

hjs-webpack error when running local server

I'm trying to configure hjs-webpack for a React app and I keep receiving the following error below when I try to start my local server. I'm running
$ NODE_ENV=development ./node_modules/.bin/hjs-dev-server
in the command line. Can anyone tell me what I'm doing wrong?
{ Error: ENOENT: no such file or directory, open '.env'
at Error (native)
at Object.fs.openSync (fs.js:634:18)
at Object.fs.readFileSync (fs.js:502:33)
at Object.module.exports.config (/Users/willfang/Desktop/YelpCloneApp/node_modules/dotenv/lib/main.js:30:37)
at Object.<anonymous> (/Users/willfang/Desktop/YelpCloneApp/webpack.config.js:39:27)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3) errno: -2, code: 'ENOENT', syscall: 'open', path: '.env' }
Listening at http://localhost:3000
webpack built 24441e14a13ab3b5b7a2 in 4874ms
Hash: 24441e14a13ab3b5b7a2
Version: webpack 1.13.1
Time: 4874ms
Asset Size Chunks Chunk Names
app.js 209 kB 0 main
chunk {0} app.js (main) 73.5 kB [rendered]
[0] multi main 40 bytes {0} [built] [1 error]
[1] (webpack)-hot-middleware/client.js 4.49 kB {0} [built]
[2] (webpack)/buildin/module.js 251 bytes {0} [built]
[3] ./~/strip-ansi/index.js 161 bytes {0} [built]
[4] ./~/ansi-regex/index.js 135 bytes {0} [built]
[5] (webpack)-hot-middleware/client-overlay.js 1.74 kB {0} [built]
[6] ./~/ansi-html/index.js 4.02 kB {0} [built]
[7] ./~/html-entities/index.js 231 bytes {0} [built]
[8] ./~/html-entities/lib/xml-entities.js 2.98 kB {0} [built]
[9] ./~/html-entities/lib/html4-entities.js 6.57 kB {0} [built]
[10] ./~/html-entities/lib/html5-entities.js 49 kB {0} [built]
[11] (webpack)-hot-middleware/process-update.js 3.88 kB {0} [built]
ERROR in ./src/app.js
Module build failed: Error: Couldn't find preset "stage-0" relative to directory "/Users/willfang/Desktop/YelpCloneApp"
at /Users/willfang/Desktop/YelpCloneApp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:321:17
at Array.map (native)
at OptionManager.resolvePresets (/Users/willfang/Desktop/YelpCloneApp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:305:20)
at OptionManager.mergePresets (/Users/willfang/Desktop/YelpCloneApp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:288:10)
at OptionManager.mergeOptions (/Users/willfang/Desktop/YelpCloneApp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:14)
at OptionManager.init (/Users/willfang/Desktop/YelpCloneApp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:383:12)
at File.initOptions (/Users/willfang/Desktop/YelpCloneApp/node_modules/babel-core/lib/transformation/file/index.js:223:65)
at new File (/Users/willfang/Desktop/YelpCloneApp/node_modules/babel-core/lib/transformation/file/index.js:140:24)
at Pipeline.transform (/Users/willfang/Desktop/YelpCloneApp/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/Users/willfang/Desktop/YelpCloneApp/node_modules/babel-loader/index.js:14:22)
# multi main