production build - 404 error static/frontend/main.js not found

[flabbyThoroughbred]

Hi,

Thanks for the setup. So far it's been pretty much everything I was looking for. However I was testing this for a production environment but I'm getting an error after running npm run build
GET http://localhost:8000/static/frontend/main.js [HTTP/1.1 404 Not Found 4ms]
The resource from “http://localhost:8000/static/frontend/main.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

I'm not sure if the second line is related.
Have there been any other issues with this? As far as I can tell it should source the same main.js webpack as it does when running dev.

my django static settings are simple
STATIC_URL = '/static'
Any insight would be greatly appreciated!

[prozenn]

Hi! I had the same issue.

There's solution:

• remove main.js file from frontend/static/frontend
• change "build" script in package.json to webpack --mode production ./frontend/src/index.js --output-path ./frontend/static/frontend/ and same for "dev"
• npm run build

[DanielScholtz]

Hi probably you had the same problem as me that we use the newer webpack version which has output-path instead of output and there you dont add the file name at the end of path. First, delete your main.js folder then change the script.
My script was like this:
webpack --mode development --watch ./leadmanager/frontend/src/index.js --output-path ./leadmanager/frontend/static/frontend/main.js
and changed to
webpack --mode development --watch ./leadmanager/frontend/src/index.js --output-path ./leadmanager/frontend/static/frontend
after that run npm run build and it should generate good now

[Lamia-Mihoubi]

I had a similar issue, but instead webpack was creating a folder named main.js to put the main.js compiled file in it, so either:

• change the <script src="{% static 'frontend/main.js' %}"></script> in the /frontend/templates/frontend/index.html to <script src="{% static 'frontend/main.js/main.js' %}"></script> or
• change the build script in package.json to "webpack --mode development --watch ./cattracker/frontend/src/index.js --output-filename main.js --output-path ./cattracker/frontend/static/frontend" and do the same with production script (without the --watch flag obviously)