Merge branch 'next' into tech/upgrades

docs/src/pages/basics/writing-stories/index.md

@@ -117,7 +117,7 @@ If you want to load from multiple locations, you can use an array:
 import { configure } from '@storybook/react';
 
 configure([
-  require.context('../src/components', true, /\.stories\.js$/)
+  require.context('../src/components', true, /\.stories\.js$/),
   require.context('../lib', true, /\.stories\.js$/)
 ], module);
 ```

docs/src/pages/configurations/theming/index.md

@@ -14,7 +14,7 @@ We've created two basic themes that look good of the box: "normal" (a light them
 As an example, you can tell Storybook to use the "dark" theme by modifying `.storybook/config.js`:
 
 ```js
-import { addParameters } from '@storybook/react';
+import { configure, addParameters } from '@storybook/react'
 import { themes } from '@storybook/theming';
 
 // Option defaults.
@@ -23,7 +23,10 @@ addParameters({
     theme: themes.dark,
   },
 });
+
+// configure(...)
 ```
+> `addParameters` needs to be called before `configure()` method or it won't have any effect.
 
 When setting a theme, set a full theme object. The theme is replaced, not combined.
 

examples/rax-kitchen-sink/.storybook/webpack.config.js

@@ -1,8 +1,11 @@
 const path = require('path');
 
-module.exports = {
+module.exports = async ({ config, mode }) => ({
+  ...config,
   module: {
+    ...config.module,
     rules: [
+      ...config.module.rules,
       {
         test: [/\.stories\.js$/, /index\.js$/],
         loaders: [require.resolve('@storybook/source-loader')],
@@ -15,4 +18,4 @@ module.exports = {
       },
     ],
   },
-};
+});