5

Environment Gems: Rails 5.2.1 Webpacker 3.5.5

This is my package.json

{
  "private": true,
  "scripts": {
    "test": "jest",
    "build": "./bin/webpack"
  },
  "devDependencies": {
    "autoprefixer": "9.1.1",
    "jest": "23.4.1",
    "webpack-cli": "3.1.0",
    "webpack-dev-server": "2.11.2",
    "babel-core": "~6.26.3",
    "babel-loader": "^7.0.2",
    "babel-preset-react": "~6.24.1",
    "postcss-loader": "~3.0.0",
    "sass-loader": "~7.1.0",
    "webpack": "^3.5.5"
  },
  "jest": {
    "roots": [
      "app/specs/"
    ]
  },
  "dependencies": {
    "@rails/webpacker": "3.5",
    "prop-types": "~15.6.2",
    "react": "~16.5.2",
    "react-dom": "~16.5.2"
  }
}

webpacker.yml is accepting .jsx in the extensions section.

And this is my .babelrc

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": "> 1%",
          "uglify": true
        },
        "useBuiltIns": true
      }
    ],
    "react"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ]
  ]
}

I'm getting this error, which, I suppose, means that babel isn't transpiling react.

enter image description here

Any clue about what could go wrong? I just started using webpacker and react. Webpacker works fine, it injects the desired script or css. I installed react with bundle exec rails webpacker:install:react and imported the sample file hello_react.jsx into one of my views with <%= javascript_pack_tag 'hello_react' %>

EDIT: This seems to be a RAILS WEBPACKER issue, not a babel issue. I tried all the answers that are supposedly duplicated. Please, read the question properly before marking it as duplicated.

Paulo Madroñero
  • 320
  • 4
  • 14
  • Ok I know what was wrong and how to fix it. It is NOT a duplicated question, and the answer is NOT on these duplicated questions linked, but I can't answer because someone decided this is a duplicated question without even read what the problem is. – Paulo Madroñero Sep 25 '18 at 00:43
  • 3
    Care to give the answer now that your question is not marked as dupe anymore? – posixpascal Dec 09 '18 at 11:18

0 Answers0