webpack built 0 bytes

Question

I am just learning how to use webpack. Here is my situation. So, in my Django project, I have a static folder. Django has to know about the static files, so I have made an index.js file there. The file looks like this:

// index.js
import { pickRandomColor } './dashboard.js'
document.body.style.backgroundColor = pickRandomColor();

My dashboard.js inside the static folder has all the js code for my dashboard. I'm just trying to bring in some code and build it using webpack to test. My package.json resides in the root directory of the django project:

- root
-- static
---  dashboard.js
- package.json

My package.json has the following:

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build_dashboard": "webpack static/js/index.js main.js"
 },
...
"devDependencies": {
"eslint": "^6.8.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},

Now, when I run

npm run build_dashboard

I get:

Hash: 01134d33832ec1eee2c0
Version: webpack 4.44.1
Time: 482ms
Built at: 08/11/2020 4:58:19 PM
  Asset       Size  Chunks             Chunk Names
main.js  983 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] multi ./static/js/index.js ./main.js 40 bytes {0} [built]
[1] ./static/js/index.js 0 bytes {0} [built]
[2] ./main.js 0 bytes {0} [built]

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/

Why can't npm build it and why is it building 0 bytes? How can I fix this?

Answer 1

You've got an Unexpected token error. Try to replace:

import { pickRandomColor } './dashboard.js'

by:

import { pickRandomColor } from './dashboard.js'