Can't use Babel ES2015 syntax in config.js

[sean-clayton]

# Versions of things
node -v && npm -v && npm list @kadira/storybook version
v6.2.1
3.9.3
storybook-test @1.0.0 /Users/sean/code/storybook-test
└── @kadira/storybook@2.2.1

// .babelrc
{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "env": {
    "development": {
      "plugins": [
        ["react-transform", {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals": ["module"]
          }, {
            "transform": "react-transform-catch-errors",
            "imports": ["react", "redbox-react"]
          }]
        }],
        "transform-runtime"
      ]
    },
    "production": {
      "presets": [
        "react-optimize"
      ]
    }
  }
}

// config.js
import React from 'react'
import storybook, { configure, setAddon, addDecorator } from '@kadira/storybook'
import infoAddon from '@kadira/react-storybook-addon-info'
import centered from '@kadira/react-storybook-decorator-centered'

setAddon(infoAddon)
addDecorator(centered)

const req = require.context('../src/components/', true, /\.story\.jsx?$/)

function loadStories() {
  req.keys().forEach(req)
}

configure(loadStories, module)

# Terminal
> start-storybook -p 9001

=> Loading custom .babelrc
=> Loading custom webpack config (full-control mode).

React Storybook started on => http://localhost:9001/

webpack built e8503e27264e3642b296 in 4080ms

// Browser Console
Uncaught SyntaxError: Unexpected token import(…)

[sean-clayton]

I just changed my config.js to the following

const storybook = require('@kadira/storybook')
const infoAddon = require('@kadira/react-storybook-addon-info')
const centered = require('@kadira/react-storybook-decorator-centered')

const { configure, setAddon, addDecorator } = storybook

setAddon(infoAddon)
addDecorator(centered)

const req = require.context('../src/components/', true, /\.story\.jsx?$/)

function loadStories() {
  req.keys().forEach(req)
}

configure(loadStories, module)

And now I get this error:

[sean-clayton]

Closing this because I found out the issue. It turns out this broke because of my own webpack configuration file. The export of my webpack.config.js was a function that returned an object. I made it so it wasn't a function and instead an object and all seemed to be fine!