Installation

npm install --save-dev @orgajs/loader @orgajs/estree-jsx @orgajs/rehype-estree @orgajs/reorg-rehype

Configuration

An example webpack.config.js file.

import toEstree from '@orgajs/rehype-estree'
import toRehype from '@orgajs/reorg-rehype'
import toJsx from '@orgajs/estree-jsx'

const config = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.org$/,
        use: [
          'babel-loader',
          {
            loader: '@orgajs/loader',
            options: {
              plugins: [
                toRehype,
                toEstree,
                toJsx,
              ]
            }
          }],
      },
    ]
  },
}

export default config

As you can see that the output of @orgajs/loader is normal JSX code, so you will need babel-loader to finish it at the end.

Babel Configuration

YOu will need to configure babel to support react syntax. An example of .babelrc file.

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

Take a look at webpack documentation for creating a basic react project for more details.