1
votes

So doing some simple webpack learning. Following this tutorial: https://www.valentinog.com/blog/webpack-tutorial/

Currently just trying to get .src/index.js to build to ./dist/main.js by running npm run build

There is nothing else in the ./src folder besides index.js and the entire contents of ./src/index.js is

window.console.log('hello world');

And I get this error in the console.

Hash: 61965fd874c7fad84f98
Version: webpack 4.19.0
Time: 76ms
Built at: 09/16/2018 4:37:31 PM
 1 asset
Entrypoint main = main.js
[0] ./src/index.js 177 bytes {0} [built] [failed] [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/concepts/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.
(Source code omitted for this binary file)

This will not build the bundle.

However when the contents of ./src/index.js is nothing and it's completely empty it builds fine.

The contents of main.js when it builds under the above condition:

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){}]);

I am sorta stumped right now, webpack shouldn't need a special loader for regular js was my understanding of how it worked.

Extra info
node -v: 10.4.1 (managed with nvm)
npm -v: 6.1.0
webpack: ^4.19.0
webpack-cli: ^3.1.0

1
Show the content of main.js. - connexo
edited the main post to include the content of main.js when it compiles when index.js is empty - Daniel Fraser
At position 1:0, it's probably a byte-order-mark. Google "how to remove bom in <insert editor here>" - Phil
We need the content of main.js before compiling. - connexo
main.js doesn't exist before it is compiled. Webpack 4 creates the file automatically for you if it doens't exist. It isn't created when I have the error, it is only created and the content is what was pasted in the post when index.js is empty on compile. - Daniel Fraser

1 Answers

2
votes

Error seems to be the byte-order-mark (bom) Phil mentioned in the comments. Solved when I tried this fix: https://unix.stackexchange.com/questions/381230/how-can-i-remove-the-bom-from-a-utf-8-file on the index.js and then built again.