hyperstack-org/hyperstack

es6 modules are assumed to have a default component

Open

#231 opened on Aug 23, 2019

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (531 stars) (43 forks)batch import
buggood first issue

Description

related to #185

ES6 modules may not always have a default component. For example Material-UI.

The problem is the eval_native_react_component method assumes if its an es6 module, then there must be a default. This causes that method to attempt to evaluate properties of undefined.

The fix is to check if its an es6 module AND does it have a default:

module Hyperstack
  module Internal
    module Component
      class ReactWrapper
        ...
        def self.eval_native_react_component(name)
          component = `eval(name)`
          raise "#{name} is not defined" if `#{component} === undefined`
          # ------------> the following && component.default needs to be added <-------------
          component = `component.default` if `component.__esModule && component.default`
          is_component_class = `#{component}.prototype !== undefined` &&
                                (`!!#{component}.prototype.isReactComponent` ||
                                 `!!#{component}.prototype.render`)
          has_render_method = `typeof #{component}.render === "function"`
          unless is_component_class || stateless?(component) || has_render_method
            raise 'does not appear to be a native react component'
          end
          component
        end
      end
    end
  end
end

As a work around you can do this in your pack files:

Mui = require('@material-ui/core');
Mui.default = Mui     // <--- add this line ----

Contributor guide