fix: Workaround for Vite 2.6.0 optimized deps bug

frandiox · Oct 11, 2021 · 650435f · 650435f
1 parent 08067b6
commit 650435f
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 3 deletions.
diff --git a/src/plugin.ts b/src/plugin.ts
@@ -1,4 +1,4 @@
-import type { Plugin } from 'vite'
+import type { Plugin, UserConfig } from 'vite'
 import type { ViteSsrPluginOptions } from './config'
 import type { SsrOptions } from './dev/server'
 import { createSSRDevHandler } from './dev/server'
@@ -15,7 +15,7 @@ export = function ViteSsrPlugin(
   return {
     name: pluginName,
     viteSsrOptions: options,
-    config(config) {
+    config(config, env) {
       const plugins = config.plugins as Plugin[]
       const isVue = hasPlugin(plugins, 'vite:vue')
       const isReact =
@@ -29,6 +29,12 @@ export = function ViteSsrPlugin(
 
       return {
         ...detectedFeats,
+        define: {
+          ...detectedFeats.define,
+          // Vite 2.6.0 bug: use this
+          // instead of import.meta.env.DEV
+          __DEV__: env.mode !== 'production',
+        },
         ssr: {
           ...detectedFeats.ssr,
           noExternal: [pluginName],
@@ -53,6 +59,10 @@ export = function ViteSsrPlugin(
         pluginName + libPath + entryClient,
         pluginName + libPath + entryServer
       )
+
+      if (lib === 'react') {
+        fixReactDeps(config, libPath)
+      }
     },
     async configureServer(server) {
       if (process.env.__DEV_MODE_SSR) {
@@ -97,3 +107,42 @@ function detectReactConfigFeatures(
     },
   }
 }
+
+// FIXME
+// Vite 2.6.0 introduced a bug where `import.meta` is not populated
+// correctly in optimized dependencies. At the same time, all the
+// subdependencies in Style Collectors must be optimized.
+function fixReactDeps(
+  config: Pick<UserConfig, 'optimizeDeps' | 'root'>,
+  libPath: string
+) {
+  const styleCollectorDeps = {
+    'styled-components': ['styled-components'],
+    'material-ui-core-v4': ['@material-ui/core/styles'],
+    emotion: ['@emotion/cache', '@emotion/react'],
+  } as const
+
+  const styleCollectors = Object.keys(styleCollectorDeps).filter((sc) => {
+    try {
+      require.resolve(sc)
+      return true
+    } catch (error) {
+      return false
+    }
+  })
+
+  if (config.optimizeDeps) {
+    config.optimizeDeps.include?.push(
+      ...styleCollectors.flatMap(
+        (sc) => styleCollectorDeps[sc as keyof typeof styleCollectorDeps]
+      )
+    )
+
+    config.optimizeDeps.exclude = config.optimizeDeps.exclude || []
+    config.optimizeDeps.exclude.push(
+      ...styleCollectors.map(
+        (sc) => pluginName + libPath + '/style-collectors/' + sc
+      )
+    )
+  }
+}
diff --git a/src/react/entry-client.ts b/src/react/entry-client.ts
@@ -74,7 +74,7 @@ export const viteSSR: ClientHandler = async function (
     styles && styles.cleanup && styles.cleanup()
 
     // @ts-ignore
-    import.meta.env.DEV ? ReactDOM.render(app, el) : ReactDOM.hydrate(app, el)
+    __DEV__ ? ReactDOM.render(app, el) : ReactDOM.hydrate(app, el)
   }
 }