I have a workspace with 2 packages. One package is the UI Components (@ui/core), the other package is Storybook (@ui/storybook).

I'm new to configuring Webpack and Babel, so I've probably made a silly mistake.

@ui/core contains a basic button component and Storybook is setup with nothing special.

Workspace

package.json

{
  "name": "@ui/workspace",
  "private": true,
  "description": "A Collection of UI Components",
  "version": "1.0.0",
  "keywords": [
    "ui",
    "react"
  ],
  "scripts": {},
  "license": "UNLICENSED",
  "dependencies": {},
  "devDependencies": {
    "@babel/cli": "7.2.3",
    "@babel/core": "7.2.2",
    "@babel/node": "7.2.2",
    "babel-loader": "8.0.4",
    "classnames": "2.2.6",
    "cross-env": "5.2.0",
    "react": "16.7.0",
    "react-dom": "16.7.0",
    "react-jss": "8.6.1",
    "rimraf": "2.6.2",
    "webpack": "4.28.3"
  },
  "peerDependencies": {
    "react": "*",
    "react-dom": "*"
  },
  "workspaces": [
    "packages/*"
  ]
}

UI Components

package.json

{
  "name": "@ui/core",
  "version": "1.0.0",
  "description": "A Collection of UI Components",
  "internal": "true",
  "keywords": [
    "react",
    "ui"
  ],
  "main": "./src",
  "scripts": {
    "build": "yarn build:es2015 && yarn build:copy-files",
    "build:copy-files": "babel-node --config-file ../../babel.config.js ./scripts/copy-files.js",
    "build:es2015": "cross-env NODE_ENV=production babel --config-file ../../babel.config.js ./src --out-dir ./build --ignore *.test.js",
    "prebuild": "rimraf ./build",
    "release": "yarn build && npm publish build"
  },
  "peerDependencies": {
    "react": "16.7.0",
    "react-dom": "16.7.0"
  },
  "dependencies": {
    "@babel/plugin-transform-react-constant-elements": "7.2.0",
    "@babel/plugin-transform-react-inline-elements": "7.2.0",
    "@babel/plugin-transform-runtime": "7.2.0",
    "@babel/preset-env": "7.2.3",
    "@babel/preset-react": "7.0.0",
    "babel-plugin-transform-react-pure-class-to-function": "1.0.1",
    "babel-plugin-transform-react-remove-prop-types": "0.4.21",
    "babel-preset-react": "6.24.1",
    "normalize.css": "8.0.1",
    "prop-types": "15.6.2"
  },
  "engines": {
    "node": ">=8.0.0"
  },
  "license": "UNLICENSED",
  "devDependencies": {}
}

Storybook

package.json

{
  "name": "@ui/storybook",
  "version": "1.0.0",
  "description": "Storybook Output of the UI Components",
  "keywords": [
    "react",
    "storybook",
  ],
  "scripts": {
    "build": "build-storybook -c ./config -o ./build",
    "prebuild": "rimraf ./build",
    "start": "start-storybook -p 9001 -c ./config"
  },
  "peerDependencies": {
    "react": "16.7.0",
    "react-dom": "16.7.0"
  },
  "dependencies": {},
  "engines": {
    "node": ">=8.0.0"
  },
  "license": "UNLICENSED",
  "devDependencies": {
    "@ui/core": "1.0.0",
    "@storybook/react": "4.1.4"
  }
}

When I start Storybook (yarn start), I receive the following error:

ERROR in ../ui/src/button/button.js 52:6
Module parse failed: Unexpected token (52:6)
You may need an appropriate loader to handle this file type.
|
|     return (
>       <ComponentProp

This problem doesn't exist if I build the @ui/core project and make package.json main point to ./build instead of ./src.

Node: v10.15.0
NPM: v6.4.1

Also, massive kudos to Storybook. Best tool ever!