0

I'm currently converting a package from rollup to webpack and I've been running into this error around every corner where it doesn't like react/jsx components. Is this still experimental technology or am I missing something obvious? Let me know if I can clarify anything. Thanks in advance for your help/answers.

Error:

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

babel.config.js

module.exports = function () {
  const presets = [
    "@babel/preset-react",
    "@babel/preset-env"
  ];
  const plugins = [
    "@babel/plugin-transform-react-jsx", 
    "@babel/plugin-syntax-jsx",
    {
      "loose": true
    }
  ]

  return {
    presets,
    plugins
  };
}

webpack.config.js

var path = require('path');

module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: {
        presets: [
          ["@babel/preset-env", { modules: "commonjs" }],
          "@babel/preset-react"
        ],
        plugins: [
          "@babel/plugin-syntax-jsx",
          "@babel/plugin-proposal-class-properties",
          "@babel/plugin-proposal-object-rest-spread",
          "@babel/plugin-syntax-dynamic-import",
          "@babel/plugin-transform-runtime",
          "@babel/plugin-transform-react-jsx"
        ]
      }
    }]
  },
};

package.json

...
  "dependencies": {
    "@babel/cli": "^7.12.13",
    "@babel/core": "^7.12.13",
    "babel-core": "^6.26.3",
    "prop-types": "^15.6.2",
    "uuid": "^3.2.1"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.12.13",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-syntax-jsx": "^7.12.13",
    "@babel/plugin-transform-react-constant-elements": "^7.12.13",
    "@babel/plugin-transform-react-inline-elements": "^7.12.13",
    "@babel/plugin-transform-runtime": "^7.12.15",
    "@babel/preset-env": "^7.12.13",
    "@babel/preset-react": "^7.12.13",
    "@babel/runtime": "^7.12.13",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
    "babel-preset-react": "^6.24.1",
    "eslint": "^4.9.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.4.0",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "webpack": "^5.21.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  }
}
Ryan Deyo
  • 1

0 Answers0