Importing React Component with JSX

Question

There was a problem with importing react component with JXS. Components are imported from library (used like a SDK).

/sdk/dist/js/app.js

import React, { Component } from 'react';

 export default class Test extends Component {
    render() {
       return <div>Hello</div>;
    }
 }

There is a project where this SDK is used, there is webpack / babel that already does a build, the file with import of this component looks like this:

app/js/index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import Test from 'sdk/dist/js/App';

Result:

BUT! Everything will work if:

We remove JSX from this component

app/js/index.js

import React, { Component } from 'react';

export default class Test extends Component {
    render() {
        return React.createElement(
            "div",
            null,
            "Hello"
        );
    }
}

Remove import and insert component directly.

app/js/index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Test extends Component {
    render() {
        return <div>Hello</div>;
    }
}

The problem is that it needs to work through import. I suggest that the problem is that the webpack does not transpose the imported file - and reads it as is ...

webpack:

{
      entry: './app/js/index.js',
      output: {
        path: resolve(__dirname, plConfig.paths.public.root),
        filename: "[name].js"
      },

      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: [
              {
                loader: "babel-loader",
                options: {
                  cacheDirectory: true
                }
              }
            ]
          }
        ]
      }

.babelrc:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

Pretty sure you need to transform the jsx into js in your babel config. See stackoverflow.com/questions/43111618/… — Pants
If u have any stylesheets anywhere... You'll need a css-loader also setup in ur Webpack... — Kwame Opare Asiedu

Kwame Opare Asiedu Kwame Opare Asiedu · Accepted Answer · 2019-12-05T16:03:04

You'll need a babel plugin to transform jsx...

@babel/plugin-transform-react-jsx

Install npm i -D @babel/plugin-transform-react-jsx

Use in .babelrc

{
    presets: [ ... ],
    plugins: [ "@babel/plugin-transform-react-jsx", ...other plugins ]
}

EDIT:

You also need to add a babel rule for jsx... In your webpack module rules...

Change test: /\.js$/ to test: /\.jsx?$/

Importing React Component with JSX

1 Answers