Troubleshooting steps to make HMR work in complex webpack configs

Author: non25

README.md

@@ -226,3 +226,32 @@ Granular mode for HMR (which allows independent HMR for components and templates
 ### JSX HMR
 
 JSX, by default, is moved to a separate component to perform granular HMR. To disable this, add `jsx: false`.
+
+## Troubleshooting
+
+### Webpack and dynamic exports
+
+If HMR doesn't work for you in webpack, and you see this warning in the browser's console:
+
+> To use solid-refresh, you need to use the dev build of SolidJS. Make sure your build system supports package.json conditional exports and has the 'development' condition turned on.
+
+Consider checking `resolve.mainFields` and `resolve.conditionNames`. Fx. if you have `svelte-loader` in webpack configuration, which suggests adjusting these fields like this:
+
+```js
+resolve: {
+  mainFields: ['svelte', 'browser', 'module', 'main'],
+  conditionNames: ['svelte', 'browser', 'import']
+}
+```
+
+You need to adjust them like this
+
+```js
+resolve: {
+  mainFields: ['svelte', 'browser', '...'],
+  conditionNames: ['svelte', 'browser', '...'],
+                                      // ^^^ this includes default configuration
+}
+```
+
+That way they will preserve default configuration for conditional exports loading development build of SolidJS.