Typescript

Project architecture

src/components/index.ts:

export * from './button'; 
export * from './input'; 

src/components/button/index.ts:

export {Button, IProps as IButtonProps} from './Button.tsx';

and the Button is a mere React component.

Playroom

playroom.config.js

module.exports = {
	components: './src/components',
	outputPath: './dist/playroom',
	webpackConfig: () => ({
		module: {
			rules: [
				{
					test: /\.tsx?$/,
					use: [{ loader: 'ts-loader' }]
				}
			]
		}
	})
};

Error

When running playroom start, it produces this error:

$ lerna run --parallel start --scope @myProject/myPackage
lerna notice cli v3.6.0
lerna info filter [ '@myProject/myPackage' ]
lerna info Executing command in 1 package: "yarn run start"
@myProject/myPackage: $ playroom start
@myProject/myPackage: (node:55112) UnhandledPromiseRejectionWarning: /Users/marais/Sites/myProject/packages/myPackage/src/components/index.ts:1
@myProject/myPackage: (function (exports, require, module, __filename, __dirname) { export * from './button';
@myProject/myPackage:                                                               ^^^^^^
@myProject/myPackage: SyntaxError: Unexpected token export
@myProject/myPackage:     at new Script (vm.js:83:7)
@myProject/myPackage:     at createScript (vm.js:267:10)
@myProject/myPackage:     at Object.runInThisContext (vm.js:319:10)
@myProject/myPackage:     at Module._compile (internal/modules/cjs/loader.js:685:28)
@myProject/myPackage:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:733:10)
@myProject/myPackage:     at Module.load (internal/modules/cjs/loader.js:620:32)
@myProject/myPackage:     at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
@myProject/myPackage:     at Function.Module._load (internal/modules/cjs/loader.js:552:3)
@myProject/myPackage:     at Module.require (internal/modules/cjs/loader.js:658:17)
@myProject/myPackage:     at require (internal/modules/cjs/helpers.js:22:18)
@myProject/myPackage: (node:55112) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
@myProject/myPackage: (node:55112) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
lerna success run Ran npm script 'start' in 1 package in 1.1s:
lerna success - @myProject/myPackage
✨  Done in 1.63s.

Question

Is there a way to make the this work?

[flybayer]

This is working for me. I copied it from the internal webpack config and fixed the paths.

    module: {
      rules: [
      {
          test: /\.(ts|tsx)$/,
          include: __dirname,
          exclude: /node_modules/,
          use: {
            loader: require.resolve('babel-loader'),
            options: {
              presets: [
                require.resolve('@babel/preset-env'),
                require.resolve('@babel/preset-react'),
                require.resolve('@babel/preset-typescript')
              ],
              plugins: [
                require.resolve('@babel/plugin-proposal-class-properties')
              ]
            }
          }
        },
        {
          test: /\.js$/,
          include: __dirname,
          exclude: /node_modules/,
          use: {
            loader: require.resolve('babel-loader'),
            options: {
              presets: [
                require.resolve('@babel/preset-env'),
                require.resolve('@babel/preset-react')
              ],
              plugins: [
                require.resolve('@babel/plugin-proposal-class-properties')
              ]
            }
          }
        }
      ],
    },

[debajyoti-thetaonelab]

After using @DavidHooper & @vensa-albertgao’s config on my CRA with --typescript project I am getting the following issue:

This dependency was not found:

* __PLAYROOM_ALIAS__COMPONENTS__ in ./node_modules/playroom/src/Playroom/components.js

To install it, you can run: npm install --save __PLAYROOM_ALIAS__COMPONENTS__

What can it be?