Getting a compilation error when following the Webpack tutorial at https://webpack.js.org/guides/getting-started/.
I've gone through it three times now, one time where I typed everything in manually to avoid any hidden characters from copy-paste.
Running on Powershell on Windows 10, Npm version 8.3.0, Lodash version 4.17.21, Webpack version 5.66.0, Webpack-cli version 4.9.1.
The error message is this:
(base) PS C:\path\to\webpack-demo> npx webpack
assets by status 291 bytes [cached] 1 asset
./src/index.js 458 bytes [built] [code generated] [1 error]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.
js.org/configuration/mode/
ERROR in ./src/index.js 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are confi
gured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
webpack 5.66.0 compiled with 1 error and 1 warning in 196 ms
I'll paste in the lines of code I have here, but they should be identical to what's in the tutorial.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8" />
<title>Getting Started </title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
index.js:
import _ from 'lodash';
function component {
const element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.66.0",
"webpack-cli": "^4.9.1"
},
"dependencies": {
"lodash": "^4.17.21"
}
}