storybook: Unexpected token, expected "," when using presets.js

Describe the bug Following the learnstorybook tutorial, everything is fine until i use the following for presets.js for docs addon. Then every story has the following error:

// presets.js
module.exports = ['@storybook/addon-docs/react/preset'];

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/dev/Projects/learnstorybook-design-system/src/Avatar.stories.js: Unexpected token, expected "," (47:2)

I have cleared the node_modules, and deleted the package/yarn.lock file and tried reinstalling everything.

To Reproduce

// package.json
{
  "name": "learnstorybook-design-system",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "polished": "^3.4.1",
    "prop-types": "^15.7.2",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-scripts": "3.2.0",
    "styled-components": "^4.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@storybook/addon-a11y": "^5.2.3",
    "@storybook/addon-actions": "^5.2.3",
    "@storybook/addon-docs": "^5.2.3",
    "@storybook/addon-knobs": "^5.2.3",
    "@storybook/addon-links": "^5.2.3",
    "@storybook/addon-storysource": "^5.2.3",
    "@storybook/addons": "^5.2.3",
    "@storybook/react": "^5.2.3",
    "prettier": "^1.18.2",
    "storybook-chromatic": "^3.0.1"
  }
}

// webpack.config.js
module.exports = ({ config }) => {
	config.module.rules.unshift({
		test: /\.stories\.jsx?$/,
		loaders: [require.resolve('@storybook/addon-storysource/loader')],
		enforce: 'pre'
	});

	return config;
};

// addons.js
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-storysource/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-a11y/register';

// config.js
import React from 'react';
import { configure, addDecorator } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';
import { GlobalStyle } from '../src/shared/global';
import 'storybook-chromatic';

addDecorator(withA11y);
addDecorator(story => (
	<>
		<GlobalStyle />
		{story()}
	</>
));

// automatically import all files ending in *.stories.js
configure(require.context('../src', true, /\.stories\.js$/), module);

Repro* Link to repo

1. inpresets.js change module.exports to empty array and yarn storybook verify it is running.

module.exports = [];

1. add the full statement for docs into presets.js and run and the errors should appear.

module.exports = ['@storybook/addon-docs/react/preset'];

Expected behavior There should not be any errors.

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 77.0.3865.90
    Firefox: 67.0.4
    Safari: 13.0.2
  npmPackages:
    @storybook/addon-a11y: ^5.2.3 => 5.2.3 
    @storybook/addon-actions: ^5.2.3 => 5.2.3 
    @storybook/addon-docs: ^5.2.3 => 5.2.3 
    @storybook/addon-knobs: ^5.2.3 => 5.2.3 
    @storybook/addon-links: ^5.2.3 => 5.2.3 
    @storybook/addon-storysource: ^5.2.3 => 5.2.3 
    @storybook/addons: ^5.2.3 => 5.2.3 
    @storybook/react: ^5.2.3 => 5.2.3