Search code examples
reactjsreact-static

Error: 'You may need an appropriate loader to handle this file type' when building react-static site


I got this error when building the site with react-static:

ERROR in ERROR in C:/Users/.../test/artifacts/react-static-templates.js 1:1016 C:/Users/.../test/artifacts/react-static-templates.js 1:1016 Module parse failed: Unexpected token (1:1016) You may need an appropriate loader to handle this file type.

The site was just created. I can run it but i can't build for deploy.

This seams to be a problem with babel loader but i don't know enough about the react-static architecture to fix it.

Here the config files i think may maybe relevant:

file: .babelrc

{
  "presets": ["react-static/babel-preset.js"]
}

file: .eslintrc.js

module.exports = {
  extends: 'react-tools',
}

file:package.json

{
  "name": "react-static-example-basic",
  "private": true,
  "scripts": {
    "start": "react-static start",
    "stage": "react-static build --staging",
    "build": "react-static build",
    "bundle": "react-static bundle",
    "export": "react-static export",
    "serve": "serve dist -p 3000 -s"
  },
  "dependencies": {
    "@reach/router": "^1.2.1",
    "axios": "^0.18.0",
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "react-hot-loader": "^4.3.12",
    "react-static": "^6.0.18"
  },
  "devDependencies": {
    "eslint-config-react-tools": "1.x.x",
    "serve": "10.1.1"
  }
}

Environment:

  • nodejs : v10.15.3
  • npm : 6.9.0
  • react-static: 6.3.6

Update 2019-03-16:

Made a lite progress. Found this closed issue that match perfectly this error.

Still, after applying the fix, build of the static template fails but now with the error message:

ERROR in .../artifacts/react-static-templates.js
Module build failed (from ./babel-loader/lib/index.js):
TypeError: Cannot read property 'replace' of undefined

Solution

  • I fixed the problem on my mac, by cleaning complete the nodejs environment and installing it all again.

    Here the steps. Look at the comments too. It can be a few more steps on comments.