Result: traceback, included in entirety for completeness. .storybook/config.js beneath. Compilation works when running Webpack manually, FWIW (but obvs not in storybook)
// some of this code adapted from https://storybook.js.org/basics/writing-stories/
// also from https://medium.com/ingenious/storybook-meets-redux-6ab09a5be346
import 'babel-polyfill'
import React from 'react'
import { configure, addDecorator } from '@storybook/react'
import locale from 'date-fns/locale/en-US'
import utils from 'material-ui-pickers/utils/date-fns-utils'
import StoryRouter from 'storybook-router'
import { withKnobs } from '@storybook/addon-knobs'
import HTML5Backend from 'react-dnd-html5-backend'
import { DragDropContextProvider } from 'react-dnd'
import { Provider as ReduxProvider } from 'react-redux'
import apolloStorybookDecorator from 'apollo-storybook-decorator'
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider'
import DateFnsUtils from 'material-ui-pickers/utils/date-fns-utils'
import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider'
import theme from '../js/style/theme'
import store from '../js/redux'
import typeDefs from '../js/schema.graphql'
import { mocks, resolvers as typeResolvers } from '../js/mockql'
// WARNING there are number of obvious optimizations here that make WebPack
// whine, so don't explore them :)
const req = [
require.context('../js/component', true, /\.stories\.js(x?)$/),
require.context('../js/container', true, /\.stories\.js(x?)$/),
require.context('../js/page', true, /\.stories\.js(x?)$/),
require.context('../js/email', true, /\.stories\.js(x?)$/),
require.context('../js/vector', true, /\.stories\.js(x?)$/),
]
addDecorator(doTheThing => <DragDropContextProvider backend={HTML5Backend}>{doTheThing()}</DragDropContextProvider>)
addDecorator(doTheThing => <ReduxProvider store={store}>{doTheThing()}</ReduxProvider>)
addDecorator(doTheThing => <MuiThemeProvider theme={theme}>{doTheThing()}</MuiThemeProvider>)
addDecorator(doTheThing => <MuiPickersUtilsProvider locale={locale} utils={utils}>{doTheThing()}</MuiPickersUtilsProvider>)
addDecorator(StoryRouter())
addDecorator(withKnobs)
addDecorator(apolloStorybookDecorator({ typeDefs, mocks, typeResolvers }))
function loadStories() {
req.forEach(r => r.keys().forEach(filename => r(filename)))
}
configure(loadStories, module)
{
"name": "pyr",
"sideEffects": [
"./js/component/survey-widget-file.jsx",
"./js/app.jsx"
],
"version": "0.0.1",
"repository": {},
"license": "MIT",
"scripts": {
"start": "npm run watch",
"watch": "node_modules/.bin/webpack-dev-server --mode development --inline --hot --stdin --colors --public 0.0.0.0:8080",
"deploy": "npm run update-templates; node_modules/.bin/webpack -p --display-error-details",
"lint": "node_modules/.bin/eslint js --ext .js,.jsx",
"test": "npm run lint && npm run flow && jest",
"flow": "node_modules/.bin/flow",
"update-schema": "bash ./.schema-extractor.sh",
"update-fragments": "node ./.fragment-extractor.js",
"update-vectors": "bash ./.esvoginator.sh",
"update-graphql": "npm run update-fragments ; npm run update-schema",
"update-templates": "node_modules/.bin/babel-node ./.template-generator.js",
"update-graphql-flow": "gql2flow -e http://localhost:4000/graphql/ -o /tmp/graphql-flow.js",
"storybook": "start-storybook -p 6006",
"lint:watch": "esw js -w --ext .js,.jsx",
"jest:watch": "node_modules/.bin/jest --watch",
"flow:watch": "flow-watch --ignore node_modules/ --watch js/*",
"prepush": "npm run test",
"build:stats": "MIX_ENV=prod node_modules/.bin/webpack -p --json --progress --profile > /tmp/webpack-stats.json"
},
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"setupFiles": [
"jest-localstorage-mock",
"./test/jestsetup.js"
],
"moduleNameMapper": {
"^.+\\.(css|scss)$": "identity-obj-proxy"
}
},
"dependencies": {
"@material-ui/codemod": "^1.0.0",
"@material-ui/core": "1.1.0",
"@storybook/addon-links": "^3.4.6",
"add": "^2.0.6",
"apollo-cache-inmemory": "^1.2.1",
"apollo-client": "^2.3.1",
"apollo-link": "^1.2.2",
"apollo-link-context": "^1.0.8",
"apollo-link-error": "^1.0.9",
"apollo-link-http": "^1.5.4",
"axios": "^0.18.0",
"babel-cli": "^6.26.0",
"babel-plugin-lodash": "^3.3.2",
"babel-polyfill": "^6.26.0",
"baobab": "^2.5.2",
"casual": "^1.5.19",
"chance": "^1.0.16",
"change-case": "^3.0.2",
"chart.js": "^2.7.2",
"classnames": "^2.2.5",
"clean-obj": "^1.0.1",
"color-name": "^1.1.3",
"core-decorators": "^0.20.0",
"create-react-class": "^15.6.3",
"currency-symbol-map": "^4.0.4",
"date-fns": "^2.0.0-alpha.7",
"dom-storage": "^2.1.0",
"enzyme": "^3.3.0",
"enzyme-to-json": "^3.3.4",
"escape-quotes": "^1.0.2",
"eslint-plugin-smart-quotes": "^0.0.0",
"eslint-watch": "^3.1.4",
"faker": "^4.1.0",
"fbjs": "^0.8.16",
"filepond": "^1.5.2",
"filepond-plugin-image-preview": "^1.0.9",
"flow-typed": "^2.4.0",
"gql2flow": "^0.4.5",
"graphql": "0.13.2",
"graphql-tag": "^2.9.2",
"graphql-tools": "^3.0.2",
"graphql-type-json": "^0.2.1",
"history": "^4.7.2",
"immutable": "4.0.0-rc.9",
"import-inspector": "^2.0.0",
"imports-loader": "^0.8.0",
"isemail": "^3.1.2",
"isomorphic-fetch": "^2.2.1",
"jest-enzyme": "^6.0.0",
"jss": "^9.8.1",
"jss-css": "^3.0.0",
"juice": "^4.2.3",
"lodash": "^4.17.10",
"lodash-webpack-plugin": "^0.11.5",
"marked": "^0.4.0",
"material-ui-pickers": "^1.0.0-rc.9",
"medium-editor": "^5.23.3",
"normalize-path": "^3.0.0",
"npm-check-updates": "^2.14.2",
"object-hash": "^1.3.0",
"path": "^0.12.7",
"phoenix": "file:../../../deps/phoenix",
"phoenix_html": "file:../../../deps/phoenix_html",
"prop-types": "^15.6.1",
"query-string": "^6.1.0",
"ramda": "^0.25.0",
"react": "16.4.0",
"react-ago-component": "^0.8.1",
"react-apollo": "^2.1.4",
"react-contextmenu": "^2.9.2",
"react-data-grid": "^4.0.7",
"react-dnd": "^4.0.0",
"react-dnd-html5-backend": "^4.0.1",
"react-dom": "16.4.0",
"react-dropzone": "^4.2.9",
"react-feather": "^1.1.0",
"react-filepond": "^2.0.6",
"react-helmet": "^5.2.0",
"react-hot-loader": "^4.2.0",
"react-ideal-image": "0.0.3",
"react-intl": "^2.4.0",
"react-jss": "^8.4.0",
"react-loadable": "^5.4.0",
"react-loadable-visibility": "^2.4.2",
"react-markdown": "^3.3.2",
"react-medium-editor": "^1.8.1",
"react-redux": "^5.0.7",
"react-router": "4.3.0-rc.2",
"react-router-dom": "4.3.0-rc.2",
"react-sortable-hoc": "^0.8.3",
"react-sparklines": "^1.7.0",
"react-swipeable": "^4.2.1",
"react-waypoint": "^8.0.1",
"reactjs-popup": "^1.1.1",
"recompose": "^0.27.1",
"redux": "4.0.0",
"redux-actions": "^2.3.2",
"redux-localstorage": "1.0.0-rc5",
"redux-localstorage-filter": "^0.1.1",
"redux-logger": "^3.0.6",
"redux-query-sync": "^0.1.7",
"redux-throttle": "^0.1.1",
"redux-thunk": "^2.2.0",
"semantic-ui-react": "^0.80.0",
"tinycolor": "^0.0.1",
"tinycolor2": "^1.4.1",
"tinygradient": "^0.4.0",
"trim": "^0.0.1",
"turndown": "^4.0.2",
"unescape-html": "^1.1.0",
"url-join": "^4.0.0",
"uuid": "^3.2.1",
"validator": "^10.2.0",
"written-number": "^0.8.1",
"zxcvbn": "^4.4.2"
},
"devDependencies": {
"@babel/plugin-syntax-export-default-from": "^7.0.0-beta.47",
"@storybook/addon-actions": "^4.0.0-alpha.8",
"@storybook/addon-knobs": "^4.0.0-alpha.8",
"@storybook/react": "^4.0.0-alpha.8",
"apollo-storybook-decorator": "^0.5.1",
"apollo-storybook-react": "^0.1.3",
"autoprefixer": "^8.5.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-jest": "^23.0.1",
"babel-loader": "^7.1.4",
"babel-plugin-flow-react-proptypes": "^24.0.0",
"babel-plugin-import-inspector": "^2.0.0",
"babel-plugin-react-intl": "^2.4.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"cache-loader": "^1.2.2",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-compat": "^2.2.0",
"eslint-plugin-flowtype": "^2.47.1",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-lodash-fp": "^2.1.3",
"eslint-plugin-react": "^7.8.2",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"fetch-mock": "^6.4.2",
"file-loader": "^1.1.11",
"flow-bin": "^0.73.0",
"flow-watch": "^1.1.3",
"get-graphql-schema": "^2.1.1",
"hard-source-webpack-plugin": "^0.7.4",
"husky": "^0.14.3",
"identity-obj-proxy": "^3.0.0",
"image-webpack-loader": "^4.2.0",
"jest": "23.1.0",
"jest-localstorage-mock": "^2.2.0",
"postcss": "^6.0.22",
"postcss-loader": "^2.1.5",
"puppeteer": "^1.4.0",
"react-test-renderer": "^16.3.2",
"redux-mock-store": "^1.5.1",
"refactoring-codemods": "^0.3.4",
"storybook-router": "^0.3.4",
"striptags": "^3.1.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"svgr": "^1.9.2",
"url-loader": "^1.0.1",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4"
}
}