chore: ensure node_modules is always ignored by react compiler

payloadcms · Aug 19, 2024 · f118ee4 · f118ee4
1 parent 52f2093
commit f118ee4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/packages/richtext-lexical/babel.config.cjs b/packages/richtext-lexical/babel.config.cjs
@@ -1,22 +1,22 @@
 const fs = require('fs')
 
+// Plugin options can be found here: https://github.com/facebook/react/blob/main/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts#L38
 const ReactCompilerConfig = {
   sources: (filename) => {
-    if (!filename.endsWith('.tsx') && !filename.endsWith('.jsx') && !filename.endsWith('.js')) {
+    const isInNodeModules = filename.includes('node_modules')
+    if (isInNodeModules || ( !filename.endsWith('.tsx') && !filename.endsWith('.jsx') && !filename.endsWith('.js'))) {
       return false
     }
 
-    // read file and check if 'use client' is at top. if not, return false
-    // if it is, return true
+    // Only compile files with 'use client' directives. We do not want to
+    // accidentally compile React Server Components
     const file = fs.readFileSync(filename, 'utf8')
     if (file.includes("'use client'")) {
-      //console.log("Compiling: " + filename)
       return true
     }
-    console.log('Skipping: ' + filename)
+    console.log('React compiler - skipping file: ' + filename)
     return false
   },
-  //runtimeModule: "react"
 }
 
 module.exports = function (api) {

diff --git a/packages/ui/babel.config.cjs b/packages/ui/babel.config.cjs
@@ -1,22 +1,22 @@
 const fs = require('fs')
 
+// Plugin options can be found here: https://github.com/facebook/react/blob/main/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts#L38
 const ReactCompilerConfig = {
   sources: (filename) => {
-    if (!filename.endsWith('.tsx') && !filename.endsWith('.jsx') && !filename.endsWith('.js')) {
+    const isInNodeModules = filename.includes('node_modules')
+    if (isInNodeModules || ( !filename.endsWith('.tsx') && !filename.endsWith('.jsx') && !filename.endsWith('.js'))) {
       return false
     }
 
-    // read file and check if 'use client' is at top. if not, return false
-    // if it is, return true
+    // Only compile files with 'use client' directives. We do not want to
+    // accidentally compile React Server Components
     const file = fs.readFileSync(filename, 'utf8')
     if (file.includes("'use client'")) {
-      //console.log("Compiling: " + filename)
       return true
     }
-    console.log('Skipping: ' + filename)
+    console.log('React compiler - skipping file: ' + filename)
     return false
   },
-  //runtimeModule: "react"
 }
 
 module.exports = function (api) {