Myujth

I'm trying to setup a project with shared code for react and react-native which was created using create-react-native-app and from there adding a node script to load the web version.

A simple hello world example worked without a hitch, but the problem comes with the first very simple component which has a shared controller.js file.

The error message I am getting is as follows:

TypeError: Class constructor HqHeaderController cannot be invoked without 'new'

This is my component -> which works when I don't use the controller.

hq-header.web.js

import React from 'react';

// Imports => Controller
import HqHeaderController from './hq-header.controller';

// Component
class HqHeader extends HqHeaderController 
 render() 
 return <div>HQ Header Web</div>;
 


export default HqHeader;

hq-header.controller.js

import Component from 'react';

// Controller
class HqHeaderController extends Component 
 componentDidMount() 
 this.init();
 
 init() 
 console.group('[HqHeaderController] => fn.Init');
 console.groupEnd();
 


export default HqHeaderController;

.babel-rc.js

module.exports = 
 presets: [
 "babel-preset-expo",
 [
 "@babel/env",
 
 useBuiltIns: "usage",
 modules: "commonjs",
 targets: 
 esmodules: true,
 node: "current"
 ,
 debug: true,
 
 ],
 [
 "@babel/preset-react",
 
 development: process.env.BABEL_ENV === "development",
 ,
 ],
 ],
 plugins: ["@babel/transform-react-jsx", "@babel/transform-react-jsx-source"],
;

Babel-loader config in webback using oneOf:

 jsx,

What am I doing wrong here?