Setting up Playroom in a custom Component Library
By: Mandy Michael
Tags: Web Development, Javacript, Component Libraries, Design Systems, Tooling

#Spoilers — Playroom setup working for our Component Library

This is a story of setting up Playroom in my component library may it help you through some of the bumps (specifically the ones I hit) along the way. Spoiler alert, I did get it running. 😄

First things first, the basic setup was pretty much as the Getting Started section of the readme explains — install playroom, setup the config. I set up a index.ts file inside my component library that manually listed the components I wanted playroom to have access too, I started with just one super basic component to keep things simple— a heading (we will talk more complex ones further on in the post).

It was literally just:

export { Headline } from './publication/Headline/Headline'

Once I got the initial stuff set up I started hitting problems.

Issue #1 — totally awesome Type Error. 🤨 Issue #2 — Can’t find my files 😒

These two issues were related.

TypeError: Cannot read property '0' of undefined

at Parser.getComponentInfo (/node_modules/playroom/node_modules/react-docgen-typescript/lib/parser.js)

at /node_modules/playroom/node_modules/react-docgen-typescript/lib/parser.js (node:63647) UnhandledPromiseRejectionWarning: Error: Cannot find module './src/component-library'

Both of these errors I was able to resolve with the help of the Fenders community, specifically Luke (It’s totally in the readme on Github as well — folks you gotta learn to read stuff, don’t be impatient like me 🙈). You have to make sure you are including the typeScriptFiles property in your playroom.config.js file (I just whacked it at the end).

For example:

typeScriptFiles:

['./component-library/**/*.tsx', '!**/node_modules'],

💬 Narrator: Mandy was in fact very happy at this point.

Mission #1&2 Complete ✅ 🎉

Issue #3 — Can’t find the playroom files for Snippets and frameComponent .

No probs, I’ll just comment that out for now, you don’t need it to get started. Let’s get back to this later.

💬 Narrator: Mandy would later regret this decision.

Mission #2 Complete 🙈

Issue #4 —Loader Issues 😒

Module parse failed: Unexpected token

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Need some loaders, cool cool. Thankfully Playroom had an example in the Github Repo so copy-paste that example and you should be good to go.

webpackConfig: () => ({

module: {

rules: [{

test: /\.tsx?$/,

include: __dirname,

exclude: /node_modules/,

use: {

loader: 'babel-loader',

options: {

presets: [

'@babel/preset-env',

'@babel/preset-typescript',

'@babel/preset-react',

],

},

},

}],

}, resolve: {

extensions: ['.js', '.ts', '.tsx'],

},

}),

Stuff is compiling now success. 👍 Except now I’m getting new errors…

Mission #4 Complete ✅

Issue #5 — Dependency Issues 😩

This dependency was not found:

component-library/typography/Heading/Heading.styled in ./src/component-library/src/typography/Heading/Heading.tsx

Now that I’ve got stuff running I get a delightful blank screen. But that’s okay because I also got the above error.

This happens because inside each of our components we reference other dependencies, whether it’s helper functions, styling etc. Our codebase uses aliases to simplify the paths in our projects, so I need to set this up in the Playroom custom webpage config as well. I had a slight issue here because I’d copied it from our tsconfig which has wildcards in, which I totally didn’t need.

With that in mind let’s add that in:

resolve: {

extensions: ['.js', '.ts', '.tsx'],

alias: {

'component-library':

path.resolve(__dirname, 'src/component-library/'),

},

},

👍 Yeah. Mission #5 Complete ✅ (I’m on a roll)

💬 Narrator: Mandy was getting very enthusiastic at this point

Issue #6 — Syntax Errors 😒

Syntax Error: SyntaxError: //src/component-library/__product/index.ts: 'const' enums are not supported.

This one wasn’t so bad, we already have all our plugins defined for our component library configuration so I just had to copy-paste the ones we already had set up into the playroom.config.js file (I just put if after my presets inside the webpackConfig ).

You can see an example of what we needed below:

"plugins": [

["const-enum",

{

"transform": "constObject"

}

], "@emotion",

"@babel/plugin-syntax-dynamic-import",

"@loadable/babel-plugin",

"@babel/plugin-proposal-class-properties",

"@babel/plugin-proposal-numeric-separator"

]

Mission #6 Complete ✅. Right now I’m feeling pretty good about myself.

💬 Narrator: Mandy’s confidence is being restored.