Fix source map HMR via unique nonce

Author: rtsao

core/index.js

@@ -14,25 +14,25 @@ class Token {
   }
 }
 
-let invalidationToken = new Token();
+const state = {
+  sourceNonce: 0,
+  invalidationToken: new Token(),
+  mapperCache: new Map(),
+  sourceCache: new Map(),
+  inboundRequests: new Set(),
+  // List of mapped class names for batch rendering
+  renderQueue: [],
+};
 
 function task(fn) {
-  const token = invalidationToken;
+  const token = state.invalidationToken;
   return result => {
     if (!token.cancelled) {
       return fn(result);
     }
   };
 }
 
-const state = {
-  mapperCache: new Map(),
-  sourceCache: new Map(),
-  inboundRequests: new Set(),
-  // List of mapped class names for batch rendering
-  renderQueue: [],
-};
-
 export function initWasm(url) {
   SourceMapConsumer.initialize({
     "lib/mappings.wasm": url,
@@ -60,7 +60,8 @@ export function renderCSS() {
 
   const map = {
     version: 3,
-    sources,
+    // Source URLs need to be unique for source maps to reload
+    sources: sources.map(source => `${source}?n=${state.sourceNonce}`),
     mappings,
     sourcesContent: sources.map(source => state.sourceCache.get(source)),
   };
@@ -77,15 +78,16 @@ export function addMappedClass({className, stackInfo, stackIndex}) {
 
 export function invalidate() {
   // Token should be immediately invalidated
-  invalidationToken.cancel();
-  invalidationToken = new Token();
+  state.invalidationToken.cancel();
+  state.invalidationToken = new Token();
 
   // After invalidation, existing mapped class names should be rendered
   // using the existing sourceCache
   const css = renderCSS();
 
   state.mapperCache = new Map();
   state.sourceCache = new Map();
+  state.sourceNonce++;
 
   // Replay inbound requests with cleared caches
   for (const request of state.inboundRequests) {

tests/index.js

@@ -87,10 +87,10 @@ test(`replaying requests after invalidation`, async t => {
         t.equal(pos.column, 0, "mapped column matches expected");
         t.equal(
           pos.source,
-          "webpack:///client.js",
+          "webpack:///client.js?n=1",
           "mapped source matches expected",
         );
-        const content = consumer.sourceContentFor("webpack:///client.js");
+        const content = consumer.sourceContentFor("webpack:///client.js?n=1");
         t.equal(
           content,
           fixtures.clientSource,
@@ -142,10 +142,10 @@ function testSingleMap(route) {
         t.equal(pos.column, 0, "mapped column matches expected");
         t.equal(
           pos.source,
-          "webpack:///client.js",
+          "webpack:///client.js?n=0",
           "mapped source matches expected",
         );
-        const content = consumer.sourceContentFor("webpack:///client.js");
+        const content = consumer.sourceContentFor("webpack:///client.js?n=0");
         t.equal(
           content,
           fixtures.clientSource,