Component directory cannot be resolved

Im using CRA + TypeScript and wanted to test out playroom but immediately run into this error: (node:39309) UnhandledPromiseRejectionWarning: Error: Cannot find module './src/Components'

playroom.config.js

module.exports = {
  components: './src/Components',
  outputPath: './build/playroom',
  typeScriptFiles: [
    'src/Components/**/*.{ts,tsx}',
    '!**/node_modules',
  ],
};

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src"
  ]
}

Any ideas about this? 😞

[GoodGuyMarco]

Thank you for your detailed explanation. I managed to get it running now. Seems like it was me misunderstanding the documentation. Two things that were not entirely clear to me:

1. By example components: './src/components' it is not clear that it should point to a file containing exported components. I thought it should point to my component directory.
2. Your “TypeScript Support” section does not mention that extra loaders are needed in webpackConfig in order to include components written in TypeScript.

Anyways, maybe it is just my lack of knowledge 😄 Thanks for this awesome project. Will start playing with it right now 👍

[michaeltaranto]

Thanks for that, makes it a lot clearer. Here is the list i worked through to get that example working:

Config issues

The themes and FrameComponent are optional in the playroom config and the paths specified dont exist, so i removed these config values.

The components path is resolved based on your webpack config. Out of the box playroom only configured react and jsx support so doing anything more than playing with react requires passing a webpackConfig that allows playroom to run your code.

Component file

This isn’t being found by webpack because it’s is not configured to resolve ts/tsx extensions out of the box. You can do this by providing your own webpack config (see our typescript example).

Your components file is expected to export a single object or a series of named exports

I recommend pointing at a file the exports your components, eg:

export { default as Text } from '../Text'; // Re-exporting a default export
export { Button } from '../Button'; // Re-exporting a named export
// etc...

The main issue i see here is you need to provide playroom with the webpack config so it knows how to load your components.

Hope this helps.