From 937de6e9ae206976d4ba322606db78546c0624bc Mon Sep 17 00:00:00 2001
From: Non <19non91@gmail.com>
Date: Fri, 31 May 2024 02:23:02 +0300
Subject: [PATCH] Troubleshooting steps to make HMR work in complex webpack
 configs

---
 README.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/README.md b/README.md
index 23acb0f..bb31d74 100644
--- a/README.md
+++ b/README.md
@@ -226,3 +226,22 @@ 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`. If you only want to use SolidJS then you could safely remove them.
+
+Otherwise, append '...' to each array to also include webpack's default configuration, that is required for conditional exports and development condition to work properly. E.g.
+
+```js
+resolve: {
+  mainFields: ['something-else', 'browser', '...'],
+  conditionNames: ['something-else', 'browser', '...'],
+}                                             // ^^^ this includes default configuration
+```