Clarifying usage with custom react apps

Hi @herrstucki, thank you for putting this library out there - excited to use it. However, I was a little confused about how to set it up, and ran into some issues.

I was using a clone of the popular react-universally starter kit to start off. Like most starter kits, it has its own custom webpack setup. So, putting together the instructions in the changelog and the documentation, I did the following:

1. Installed the package and created the catalog. Worked fine, added the commands to package.json and I could access the catalog on localhost:4000. All good here (except maybe that it adds 3.0 beta-6 version instead of the release v3)

yarn add catalog
yarn create catalog

1. I added the library components via pages:

//index.js
const pages = [
  {
    path: '/',
    title: 'Welcome',
    content: pageLoader(() => import('./WELCOME.md')),
  },
  {
    path: '/elements',
    title: 'Elements',
    content: pageLoader(() => import('./ElementPage.js')),
  },
];

...

//ElementPage.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Page, ReactSpecimen, ColorSpecimen } from 'catalog';
import { Logo, Menu } from '../shared/components/DemoApp/Header'; //<------

export default () => (
  <Page>
    <h2>My Buttons</h2>
    
    <ReactSpecimen span={3}>
      <Logo />
      <Header />
    </ReactSpecimen>

    <ColorSpecimen
      name="Red"
      value="#FF5500"
      span={2}
    />

  </Page>
);

At that point, I get the following error:

./shared/components/DemoApp/Header/index.js
Module parse failed: /Users/anuj/Github/react-universally/shared/components/DemoApp/Header/index.js Unexpected token (18:4)
You may need an appropriate loader to handle this file type.
| function Header() {
|   return (
|     <HeaderWrapper>
|       <Logo />
|       <h1>React, Universally</h1>
 @ ./catalog/ElementPage.js 17:14-60
 @ ./catalog/index.js
 @ multi ./node_modules/catalog/dist/cli/config/polyfills.js ./catalog/index.js

I wasn’t sure how to proceed at this point. I added the catalog/babel to my .babelrc but I am not even sure if it is being used by catalog?

If I try yarn catalog-build, I get the same error as above plus the errors below:

static/1.589a5ece.chunk.js from UglifyJs
Unexpected token: punc ()) [./catalog/ElementPage.js:6,15][static/1.589a5ece.chunk.js:29,19]

static/catalog.f474a272.js from UglifyJs
Unexpected token: punc ()) [./catalog/index.js:9,24][static/catalog.f474a272.js:19569,37]

Without the custom react component, it works well!

---

FWIW: Here’s a repo for you to quickly reproduce the issue: https://github.com/oyeanuj/react-universally/tree/dev-with-catalog

Any ideas?

Thank you!

[krystof-k]

Hey there, I have a related question (I guess). I’m trying to setup Catalog with externally loaded create-react-app based React components from another repo, added as a dependency. Do you have any clue how to do that? When running Catalog directly in the create-react-app repo everything works fine, but we would like to separate the catalog to another repo. Thanks!

[jerstucki]

@oyeanuj I released v3.1.0 which adds support for a config file and also always Babel-transpiles from the app’s root folder instead of just from src/. Let me know if there are any issues!