Webpack not finding file

Question

I'm recently following a tutorial on using webpack with Django and for the life of me the local host just can't find my bundle file

This is what the console shows when I inspect on my local host:

GET http://127.0.0.1:8000/static/bundles/bundle.js net::ERR_ABORTED 404 (Not Found)

But I do have a directory called static in my project root directory, and a bundles directory inside, and a bundle.js file inside. I don't understand why the local host just couldn't find my file

This is part of my tree:

├── static
│   └── bundles
│       └── bundle.js
├── templates
│   ├── base.html
│   ├── components
│   │   ├── game
│   │   │   └── game.html
│   │   └── lobby
│   │       ├── LobbyBase.jsx
│   │       ├── index.jsx
│   │       └── lobby.html
│   ├── home.html
│   ├── login.html
│   └── register.html
├── webpack-stats.json
└── webpack.config.js

As you can see there's a static file, a bundle file inside, and the bundle.js inside. This is the Django setting code I have:

STATIC_URL = '/static/'

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'bundles/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
    },
}

Any help will be appreciated! Thank you so much

EDIT: Follow up: Deleting STATIC_URL doesn't help either. Thought that might be causing problem but doesn't seem so

You need to configure both STATIC_URL (url where all the static files can be referenced via web) and STATIC_ROOT (folder where all the static files will be physically located) - Django maps one to another to make static files work. STATICFILES_DIRS is a list of optional directories where from files must be copied into STATIC_ROOT during `collectstatic` command execution; also these directories are searched while DEBUG=true (so files are accessible without `collectstatic`). — Ivan Starostin, Feb 05 '20 at 06:23
Thanks for the comment! I'm pretty new to this - can I set static_root inside setting.py like i do for staticfiles_dir? Thanks! — Lucy Gu, Feb 05 '20 at 19:22

score 0 · Answer 1 · answered Feb 04 '20 at 21:29

0

I still don't know why this would fix the problem, but here's what I did to fix it:

Add this to setting:


STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

and magically the localhost can find the file. If anyone can explain why this is happening that would be awesome, hopefully this could save someone else some time if they're encountering similar problems!

answered Feb 04 '20 at 21:29

Lucy Gu

369
1
3
10

No, you should configure `STATIC_ROOT` instead. `collectstatic` will collect all the static files from `STATICFILES_DIRS` into `STATIC_ROOT`. `STATICFILES_DIRS` are **additional source directories** for filling `STATIC_ROOT` - which will be used on prod as the static files location. Currently the **static files physical location** (`STATIC_ROOT`) is not configured in your project. – Ivan Starostin Feb 20 '20 at 06:13

Webpack not finding file

1 Answers1