Question

我正在尝试为项目创建一个带有react和react-native共享代码的项目，该项目是使用create-react-native-app创建的，然后在其中添加了一个节点脚本以加载Web版本。

一个简单的hello world示例工作顺利，但问题出在第一个非常简单的组件，该组件具有共享的controller.js文件。

我收到的错误消息如下：

TypeError：如果没有'new'，则无法调用类构造函数HqHeaderController

这是我的组件->当我不使用控制器时可以使用。

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"],
};

在webback中使用oneOf的Babel-loader配置：

  {
    test: /\.web?\.?(js|jsx|mjs)$/,
    include: paths.appSrc,
    exclude: /node_modules/,
    loader: require.resolve('babel-loader'),
    options: {
      // This is a feature of `babel-loader` for webpack (not Babel itself).
      // It enables caching results in ./node_modules/.cache/babel-loader/
      // directory for faster rebuilds.
      cacheDirectory: true,
    },
  },

我在这里做什么错了？

共享的代码react / react-native应用无法正常运行babel

0 个答案: