'npm run collect' is throwing errors but working with browser.

[DixitIshan]

Hi. I am following the video on youtube from CodingForEntrepreneurs. You have explained things amazingly. There isn't possibly any better explanation regarding Django + React. Thank you for that. Now I am following the same exact thing from cloning to setup to everything but when I run "npm run collect" , it is throwing me the following error. But at the same time even after the error if I refresh my browser page the changes are done as expected. Can you please help me understand what is happening?

P.S: I am using Ubuntu 16.04, Python 3.5, Django 2.0. And the only difference between your setup and mine is that i have created a virtual environment with "python3 -m venv " command. if that might be of any concern !

Thanking you in Advance!

[douglaspetrin]

@Ishan3333 I had the same situation, so you can try this:

In your package.json change to those lines:

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && npm run build-rename ",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"collect": "react-scripts build && npm run build-rename && npm run copy-buildfiles && npm run collectstatic",
"build-rename": "npm run build-rename-js && npm run build-rename-css",
"build-rename-logo": "renamer --regex --find .g --replace logo.svg build/static/media/",
"build-rename-js": "renamer --regex --find .s --replace reactify-django.ui.js build/static/js/.js", "build-rename-css": "renamer --regex --find .s --replace reactify-django.ui.css build/static/css/.css",
"copy-buildfiles": "npm run copy-build-js && npm run copy-build-css && npm run copy-build-logo",
"copy-build-logo": "copyfiles -f build/static/media/* ../staticfiles/img/",
"copy-build-js": "copyfiles -f build/static/js/.js ../staticfiles/js/", "copy-build-css": "copyfiles -f build/static/css/.css ../staticfiles/css/",
"collectstatic": "python ../manage.py collectstatic --no-input"
}

Hope it helps you.

[krisavi]

The issue is not with renames, error is thrown because the venv is not activated prior to running python command

Most likely on windows if using venv named venv, then the collectstatic row should be like below

    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "collect": "react-scripts build && npm run build-rename && npm run copy-buildfiles && npm run collectstatic",
    "build-rename": "npm run build-rename-js && npm run build-rename-css && npm run build-rename-logo",
    "build-rename-logo": "renamer --find \"/([^\\.]+)\\.[^\\.]+\\.(\\w+)/\" --replace \"$1.$2\" build/static/media/*",
    "build-rename-js": "renamer --find \"/main\\.[^\\.]+\\.js/i\" --replace \"reactify-django.ui.js\" build/static/js/*.js",
    "build-rename-css": "renamer --find \"/main\\..+\\.css/i\" --replace \"reactify-django.ui.css\" build/static/css/*.css",
    "copy-buildfiles": "npm run copy-build-js && npm run copy-build-css && npm run copy-build-logo",
    "copy-build-logo": "copyfiles -f \"build/static/media/*\" \"../staticfiles/img/\"",
    "copy-build-js": "copyfiles -f \"build/static/js/*\" \"../staticfiles/js/\"",
    "copy-build-css": "copyfiles -f \"build/static/css/*\" \"../staticfiles/css/\"",
    "collectstatic": "..\\venv\\Scripts\\activate && python ../manage.py collectstatic --no-input && deactivate"
  },

On linux and mac probably can use "../venv/Scripts/activate && python ../manage.py collectstatic --no-input && deactivate"
I am using updated renamer so the renamer command is with a bit different format (doesn't have --regexp part in it) and again windows specific " should be used, so I am using \" to escape the " character.
For me CSS was making in format: main.3b8d5aa4.chunk.css so modified it to accept everything between main. and .css, might be also due to using the latest versions of everything.