"npm run collect" works wrong

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

[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"
  }
}

[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"
  },

1. 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)