main.js file contains html code instead of javascript Functions

[lisandrolan]

Hi,
When I try to build the CRA in a node server, the main.js contains HTML code, thus I get the error.
Uncaught SyntaxError: Unexpected token <

I also dont see all the node modules generated into the static/js folder of the build.

When I deploy on the localhost it works as expected.
Also, another project is working as expected.

I see that react-script package.json is different between these 2 project.

I've tried deleting all the node_modules folders and I have the same error.
Also, I've tried using the same version of the package.json object and there is no success.

Thanks in advance.

[iansu]

It's hard to help you without more information. Please fill out the issue template and provide your package.json file.

[jdetle]

Hi @iansu, I have read the issue template, rimraffed my files and still am having this issue.

My package.json is :

{
  "name": "portal",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "babel-plugin-react-intl": "^2.3.1",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react-app": "^3.0.2",
    "deepmerge": "^2.0.1",
    "ethereum-qr-code": "^0.1.6",
    "ethereumjs-util": "^5.1.2",
    "firebase": "^4.9.1",
    "firebase-key": "^1.0.5",
    "firebase-tools": "^3.12.0",
    "firestore": "^1.1.6",
    "idx": "^2.2.0",
    "moment": "^2.18.1",
    "numbro": "^1.11.0",
    "prop-types": "^15.5.10",
    "qrcode.react": "^0.7.1",
    "react": "^16.3.2",
    "react-datepicker": "^0.61.0",
    "react-dom": "^16.3.2",
    "react-firebase-file-uploader": "^2.4.1",
    "react-intl": "^2.4.0",
    "react-measure": "^2.0.2",
    "react-redux": "^5.0.6",
    "react-redux-firebase": "^2.0.6",
    "react-router": "3.0.5",
    "react-router-redux": "^4.0.8",
    "react-router-scroll": "^0.4.2",
    "react-scripts": "1.0.11",
    "redux": "^3.7.2",
    "redux-auth-wrapper": "^2.0.1",
    "redux-form": "^7.0.3",
    "redux-segment": "^1.6.2",
    "redux-thunk": "^2.2.0",
    "reselect": "^3.0.1",
    "semantic-ui-react": "^0.79.0",
    "uuid": "^3.1.0",
    "validator": "^8.0.0"
  },
  "scripts": {
    "start": "PORT=4000 react-scripts start",
    "build": "sh -ac '. ./.env.${REACT_APP_ENV:-development}; react-scripts build'",
    "build:staging": "REACT_APP_ENV=staging npm run build",
    "build:production": "REACT_APP_ENV=production npm run build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "precommit": "lint-staged",
    "prettify": "prettier --no-semi --single-quote --trailing-comma es5 --write '**/*.{js,json}' '!**/{lib,.git,package.json,flow-typed,custom_definitions}/**'",
    "translate": "NODE_ENV=production babel ./src --presets react-app >/dev/null && NODE_ENV=production babel-node ./scripts/translate.js --presets react-app && rm -r tmp/translations"
  },
  "lint-staged": {
    "*.js,!custom_definitions/*": [
      "prettier --no-semi --single-quote --trailing-comma es5 --write",
      "git add"
    ],
    "*.json,!package.json": [
      "prettier --no-semi --single-quote --trailing-comma es5 --write",
      "git add"
    ]
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "flow-bin": "^0.65.0",
    "flow-typed": "^2.3.0",
    "husky": "^0.14.3",
    "lint-staged": "^6.1.0",
    "netlify-cli": "^1.2.2",
    "prettier": "^1.10.2",
    "react-test-renderer": "^16.2.0"
  }
}

This is error is a pain to reproduce because it has to do with cache invalidation in production. static/js/main.[hash].jsdoes not get invalidated when the hash changes. Then this error gets thrown and no html gets loaded or rendered. I'm thinking that static/js.main.[hash].js should be in my precache config for the serviceWorker, but it is not.

I have read and tried to understand these links for background:
https://github.com/facebook/create-react-app/blob/79661396359de40742792d413269a65d01e86661/packages/react-scripts/config/webpack.config.prod.js
vuejs-templates/pwa#165
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#service-worker-considerations
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment

I have added the Cache-Control: no-cache header to no avail.

I have been unable to reproduce locally, but I could really use help. I don't want to have to unregister our serviceWorker, but it is looking like that may have to be the fix.

[jdetle]

It looks like this is a duplication of #3882 (comment)

[Rodrigo77777]

+1

It's not a duplication as we are getting a 200 not a 404 as that thread, but it seems express.js is asking for text/html content type for both main.js and main.css, and so the app never renders. I'm attaching a screenshot of my console in the hopes that someone sees something obvious I'm completely missing. The url is exactly what it should be, and the app renders fine when running on development mode running node.js as the back end, but for some reason when the build script is run something breaks.

[jdetle]

You can try to reproduce by generating SSL certs locally? Otherwise service workers won't be used.

[Timer]

Hi! We're not providing support for Service Workers because we're no longer suggesting that anyone use them until they're a more stable spec. Please remove their usage for the time being -- really sorry about this!

[jdetle]

@Timer, I know you're not supporting service workers, but the sw precache plugin + service worker registration logic is still in the code, so maybe the issue can be kept open? There has been no work to actually solve or document the problem at the source, which is that main.js over 2mb doesnt get added to the precache plugin.