Custom home page tutorial - Error


#1

So, I’m following the custom home page tutorial in the docs for v1.16.0. I’ve created my custom Store Front, which looks like this:

import React from "react";
import { registerComponent, getHOCs, getRawComponent } from "/imports/plugins/core/components/lib";
import './styles.css';

const Products =  getRawComponent("Products")

class MyStoreFront extends Products {
  render() {
   return (
     <div className="test">Custom store front</div>
   );
  }
}

registerComponent("MyStoreFront", MyStoreFront, getHOCs("Products"));

However, I’m getting the following error in the browser console:

MyStoreFront.js:7 Uncaught TypeError: Class extends value (_ref) => {
  let {
    isAdmin
  } = _ref;

  if (isAdmin) {
    return React.createElement(Components.Product...<omitted>...
} is not a constructor or null
    at MyStoreFront.js (MyStoreFront.js:7)
    at fileEvaluate (modules-runtime.js?hash=59942621baf2d3ff23916a0f601008fd2e310b63:349)
    at require (modules-runtime.js?hash=59942621baf2d3ff23916a0f601008fd2e310b63:248)
    at index.js (index.js:1)
    at fileEvaluate (modules-runtime.js?hash=59942621baf2d3ff23916a0f601008fd2e310b63:349)
    at require (modules-runtime.js?hash=59942621baf2d3ff23916a0f601008fd2e310b63:248)
    at plugins.js (plugins.js:1)
    at fileEvaluate (modules-runtime.js?hash=59942621baf2d3ff23916a0f601008fd2e310b63:349)
    at require (modules-runtime.js?hash=59942621baf2d3ff23916a0f601008fd2e310b63:248)
    at app.js?hash=0e6402e841f4768e0b4f4925ecd04022da8e9207:82750

Any ideas?


#2

Try importing getComponent instead of getRawComponent. You also might need to include a registry.js file in the create-homepage directory that looks like this

import Reaction from "/imports/plugins/core/core/server/Reaction";

Reaction.registerPackage({
  label: "MyStoreFront",
  name: "reaction-my-store-front",
  autoEnable: true
});