"npm run collect" works wrong

[menschikov]

MacOS, node v11.2, npm v 6.5, python 3.6

I have this porject on Window and Mac, it's ok on Windows, but not on Mac, when I run npm run collect it does it job but nothing changes. I tried to find out the issue and saw that in build folder files have different name than in tutorial, e.g this "runtime" prefix

> reactify-ui@0.1.0 build-rename-js /Users/menschikov/projects/reactifydjango/src/reactify-ui
> renamer --regex --find 'main\.[^\.]+\.js' --replace 'reactify-django.ui.js' build/static/js/*.js

✔︎ build/static/js/runtime~main.229c360f.js -> build/static/js/runtime~reactify-django.ui.js  

here's what I have in Build

seems it can't find necessary files accordingly to regex and rename them

Also I compared each of these 3 generated js files with reactify-django.ui.js from python static files (originally cloned) and they are totally differenet, I did no changes, just run "npm run collect".

If I run "npm run start"everything work on react-only server

[rcmiskin10]

i just started experiencing this issue as well after having to update react-scripts to > 2.0.. The original repo was using react-scripts 1.0. i believe the way @jmitchel3 had it it would output the old way.. Now that there's an update to react-scripts I believe it is not working as intended.

Still messing around to figure out a workaround. Probably need to look into the new react-script docs

[rcmiskin10]

i also changed the regex around to use runtime~main instead of main, and it outputs the file correctly in the static folder, but for some reason i can't get the page to render...

there is a new key that you have to include i guess in the package.json after you upgrade react-scripts to > 2.0:

"browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ]
which may be causing it to not render (blank screen...no errors in console or on page)

[menschikov]

@rcmiskin10 browserlist is not the case I think. You modified regex to rename "runtime~main", but it's just one 3 generated files and obviously it's not enough just this one js file to load the page. If you look into "runtime~main" you can see it's much shorter than "main" file generated in previous versions

[rcmiskin10]

@menschikov true, obviously didn't know that you need all files now... still trying to mess around a bit... maybe we have to add all the newly generated files to the js.html in templates folder.. currently trying to figure out what each file is for the npm run build creates.. maybe it needs one of the chunk.js

[rcmiskin10]

figured it out... we'll have to change the regex a bit to change the name to these files but if you try copying physically these files (yours will differ in terms of the numbers)
1.b4c54eba.chunk.js
1.b4c54eba.chunk.js.map
main.bd5e9f53.chunk.js
main.bd5e9f53.chunk.js.map
runtimemain.229c360f.js
runtimemain.229c360f.js.map

and put them in the staticfiles folder
and then run collectstatic

and then add this to the js.html in templates folder:

<script src="{% static 'js/main.bd5e9f53.chunk.js' %}"></script> <script src="{% static 'js/1.b4c54eba.chunk.js' %}"></script> <script src="{% static 'js/runtime~main.229c360f.js' %}"></script>

i got it to render... next step is to change the script around to automate that process... instead of just renaming one file we'll have to rename all those files so we can generically name them in js.html if that makes sense.

[rcmiskin10]

@menschikov - SOLUTION if you have to update react-scripts to > 2.0:
change the "scripts" in package.json to the below (just replace all the mob.ui with whatever you're using)

"scripts": {
    "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-1-js && npm run build-rename-main-js && npm run build-rename-runtime-main-js && npm run build-rename-css && npm run build-rename-logo",
    "build-rename-logo": "renamer --regex --find '([^\\.])\\.[^\\.]+\\.(\\w+)' --replace '$1.$2' build/static/media/*",
    "build-rename-1-js": "renamer --regex --find '1\\.[^\\.]+\\.chunk.js' --replace '1.mob.ui.chunk.js' build/static/js/1.*.chunk.js",
    "build-rename-main-js": "renamer --regex --find 'main\\.[^\\.]+\\.chunk.js' --replace 'main.mob.ui.chunk.js' build/static/js/main.*.chunk.js",
    "build-rename-runtime-main-js": "renamer --regex --find 'runtime~main\\.[^\\.]+\\.js' --replace 'runtime~main.mob.ui.js' build/static/js/runtime~main.*.js",
    "build-rename-css": "renamer --regex --find '1\\.[^\\.]+\\.chunk.css' --replace 'mob.ui.chunk.css' build/static/css/1.*.chunk.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"
  },

2. Add these script tags to your js.html files in your templates folder (again replace mob.ui with whatever you're using):

<script src="{% static 'js/main.mob.ui.chunk.js' %}"></script>
<script src="{% static 'js/1.mob.ui.chunk.js' %}"></script>
<script src="{% static 'js/runtime~main.mob.ui.js' %}"></script>

and

<link rel='stylesheet' href="{% static 'css/mob.ui.chunk.css' %}" />

to your css.html file in templates folder

--- you can name these files whatever you want I just kept them consistent with what npm run build generates

Maybe not the best solution but it works for me (not exactly sure what the difference between the 1.*.chunk.js, main.*.chunk.js, and runtime~main*.js files are)

[HarryCJ]

I had an issue with "npm run collect" not renaming and copying the files.
I fixed this by replacing the single ' with double " inside the package.json renamer and build commands.
" is used instead of ' on windows. My package.json now looks like this:

{
  "name": "reactify-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0"
  },
  "devDependencies": {
    "react-scripts": "1.1.4",
    "copyfiles": "^2.0.0",
    "renamer": "^0.7.0"
  },
  "scripts": {
    "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 --regex --find \"([^\\.])\\.[^\\.]+\\.(\\w+)\" --replace \"$1.$2\" build/static/media/*",
    "build-rename-js": "renamer --regex --find \"main\\.[^\\.]+\\.js\" --replace \"reactify-django.ui.js\" build/static/js/*.js",
    "build-rename-css": "renamer --regex --find \"main\\.[^\\.]+\\.css\" --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"
  }
}

[Andrewsyl]

Great answer! Thanks for this. Helped me a lot.

[believeohiozua]

thanks a lot, buddy @HarryCJ

[richardbalwane]

Thank you, so much, @rcmiskin10 and @HarryCJ. Am bald headed, had no hair to pluck out over this, that you solved for me. These are the greatest posts along my humble Django journey, so far!
God bless...

[colonder]

Whoever reads this, if you still learn from this but you installed the newest libraries instead, use this answer as the solution to the problem https://stackoverflow.com/a/54447444

My package.json looks like this

{
  "name": "reactify-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "copyfiles": "^2.3.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.2",
    "renamer": "^2.0.1",
    "typescript": "^3.9.7"
  },
  "scripts": {
    "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 -f \"/([^\\.])\\.[^\\.]+\\.(\\w+)/\" -r \"$1.$2\" build/static/media/*",
    "build-rename-js": "renamer -f \"/main\\.[^\\.]+\\.js/\" -r \"reactify-django.ui.js\" build/static/js/*.js",
    "build-rename-css": "renamer -f \"/main\\.[^\\.]+\\.css/\" -r \"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"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[olbol-sabai]

Thanks for the answers above and also of course thanks to CFE who continue to blow my mind with their awesome tutorials. Eventually with these dependencies below (everything other than rename is the latest versions)this works:

"dependencies": {
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.3",
"@testing-library/user-event": "^12.6.0",
"copyfiles": "^2.4.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "^4.0.1",
"renamer": "^0.7.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"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-2-js && npm run build-rename-3-js && npm run build-rename-main-js && npm run build-rename-runtime-main-js && npm run build-rename-css && npm run build-rename-logo",
"build-rename-logo": "renamer --regex --find "([^\\.])\.[^\\.]+\.(\w+)" --replace "$1.$2" build/static/media/",
"build-rename-2-js": "renamer --regex --find "2\.[^\\.]+\.chunk.js" --replace "2.ui.chunk.js" build/static/js/.js",
"build-rename-3-js": "renamer --regex --find "3\.[^\\.]+\.chunk.js" --replace "3.ui.chunk.js" build/static/js/.js",
"build-rename-main-js": "renamer --regex --find "main\.[^\\.]+\.chunk.js" --replace "main.ui.chunk.js" build/static/js/.js",
"build-rename-runtime-main-js": "renamer --regex --find "runtime-main\.[^\\.]+\.js" --replace "runtime-main.ui.js" build/static/js/.js",
"build-rename-css": "renamer --regex --find "main\.[^\\.]+\.chunk.css" --replace "ui.chunk.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"
},

then in js.html:

<script src="{% static 'js/main.ui.chunk.js' %}"></script> <script src="{% static 'js/2.ui.chunk.js' %}"></script> <script src="{% static 'js/3.ui.chunk.js' %}"></script> <script src="{% static 'js/runtime-main.ui.js' %}"></script>

and css.html:

[tushar-code007]

Harry Johnson HarryCJ : suggested this solution above, it worked for me.
**Harry, you are awesome, like Harry 🥇 ** Wonderful solution :)

I had an issue with "npm run collect" not renaming and copying the files.
I fixed this by replacing the single ' with double " inside the package.json renamer and build commands.
" is used instead of ' on windows. My package.json now looks like this:

{
  "name": "reactify-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0"
  },
  "devDependencies": {
    "react-scripts": "1.1.4",
    "copyfiles": "^2.0.0",
    "renamer": "^0.7.0"
  },
  "scripts": {
    "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 --regex --find \"([^\\.])\\.[^\\.]+\\.(\\w+)\" --replace \"$1.$2\" build/static/media/*",
    "build-rename-js": "renamer --regex --find \"main\\.[^\\.]+\\.js\" --replace \"reactify-django.ui.js\" build/static/js/*.js",
    "build-rename-css": "renamer --regex --find \"main\\.[^\\.]+\\.css\" --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"
  }
}