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 (43 forks)batch import
buggood first issue

Repository metrics

Stars
 (531 stars)
PR merge metrics
 (No merged PRs in 30d)

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