fix(web): Fix importing .ts/.tsx files in web with directory-named-import plugin

packages/core/src/babelPlugins/__tests__/babel-plugin-redwood-directory-named-imports.ts

@@ -1,45 +1,53 @@
 import * as babel from '@babel/core'
+import { ensurePosixPath } from '@redwoodjs/internal'
 
 import namedDirectory from '../babel-plugin-redwood-directory-named-import'
 
+// So tests pass on Windows too
+const POSIX_DIRNAME = ensurePosixPath(__dirname)
+
 const testCases = [
-  // Directory named exports
+  // Directory named imports
   {
     input: 'import pew from "./__fixtures__/directory-named-imports/Module"',
-    output:
-      'import pew from "./__fixtures__/directory-named-imports/Module/Module"',
+    output: `import pew from "${POSIX_DIRNAME}/__fixtures__/directory-named-imports/Module/Module.js";`,
+  },
+  // Directory named imports TSX
+  {
+    input: 'import pew from "./__fixtures__/directory-named-imports/TSX"',
+    output: `import pew from "${POSIX_DIRNAME}/__fixtures__/directory-named-imports/TSX/TSX.tsx";`,
   },
   // Directory named exports
   {
     input:
       'export { pew } from "./__fixtures__/directory-named-imports/Module"',
-    output:
-      'export { pew } from "./__fixtures__/directory-named-imports/Module/Module"',
+    output: `export { pew } from "${POSIX_DIRNAME}/__fixtures__/directory-named-imports/Module/Module.js";`,
   },
   // Gives preferences to `index.*`
   {
     input:
       'export { pew } from "./__fixtures__/directory-named-imports/indexModule"',
-    output:
-      'export { pew } from "./__fixtures__/directory-named-imports/indexModule"',
+    output: `export { pew } from "${POSIX_DIRNAME}/__fixtures__/directory-named-imports/indexModule/index.js";`,
+  },
+  {
+    input:
+      'export { pew } from "./__fixtures__/directory-named-imports/TSWithIndex"',
+    output: `export { pew } from "${POSIX_DIRNAME}/__fixtures__/directory-named-imports/TSWithIndex/index.js";`,
   },
   // Supports "*.ts"
   {
     input: 'export { pew } from "./__fixtures__/directory-named-imports/TS"',
-    output:
-      'export { pew } from "./__fixtures__/directory-named-imports/TS/TS"',
+    output: `export { pew } from "${POSIX_DIRNAME}/__fixtures__/directory-named-imports/TS/TS.ts";`,
   },
   // Supports "*.tsx"
   {
     input: 'export { pew } from "./__fixtures__/directory-named-imports/TSX"',
-    output:
-      'export { pew } from "./__fixtures__/directory-named-imports/TSX/TSX"',
+    output: `export { pew } from "${POSIX_DIRNAME}/__fixtures__/directory-named-imports/TSX/TSX.tsx";`,
   },
   // Supports "*.jsx"
   {
     input: 'export { pew } from "./__fixtures__/directory-named-imports/JSX"',
-    output:
-      'export { pew } from "./__fixtures__/directory-named-imports/JSX/JSX"',
+    output: `export { pew } from "${POSIX_DIRNAME}/__fixtures__/directory-named-imports/JSX/JSX.jsx";`,
   },
 ]
 

packages/core/src/babelPlugins/babel-plugin-redwood-directory-named-import.ts

@@ -1,3 +1,4 @@
+import { resolveFile, ensurePosixPath } from '@redwoodjs/internal'
 import path from 'path'
 
 import type { PluginObj, types } from '@babel/core'
@@ -6,13 +7,20 @@ const getNewPath = (value: string, filename: string) => {
   const dirname = path.dirname(value)
   const basename = path.basename(value)
 
-  const newImportPath = [dirname, basename, basename].join('/')
+  const indexImportPath = [dirname, basename, 'index'].join('/')
 
-  try {
-    require.resolve(path.resolve(path.dirname(filename), newImportPath))
-    return newImportPath
-  } catch (e) {
-    return null
+  const indexImportPathResolved = resolveFile(
+    path.join(path.dirname(filename), indexImportPath)
+  )
+
+  if (indexImportPathResolved) {
+    // If babel can resolve this path with the index file
+    return indexImportPathResolved
+  } else {
+    // If there isn't a index file
+    const newImportPath = [dirname, basename, basename].join('/')
+
+    return resolveFile(path.join(path.dirname(filename), newImportPath))
   }
 }
 
@@ -35,7 +43,7 @@ export default function ({ types: t }: { types: typeof types }): PluginObj {
 
         const newPath = getNewPath(value, <string>filename)
         if (!newPath) return
-        const newSource = t.stringLiteral(value.replace(value, newPath))
+        const newSource = t.stringLiteral(ensurePosixPath(newPath))
         p.node.source = newSource
       },
 
@@ -61,7 +69,7 @@ export default function ({ types: t }: { types: typeof types }): PluginObj {
 
         const newPath = getNewPath(value, <string>filename)
         if (!newPath) return
-        const newSource = t.stringLiteral(value.replace(value, newPath))
+        const newSource = t.stringLiteral(ensurePosixPath(newPath))
         // @ts-expect-error - TypeDef must be outdated.
         p.node.source = newSource
       },

packages/internal/src/paths.ts

@@ -96,7 +96,7 @@ export const getBaseDirFromFile = (file: string) => {
  */
 export const resolveFile = (
   filePath: string,
-  extensions: string[] = ['.js', '.jsx', '.tsx', '.ts']
+  extensions: string[] = ['.tsx', '.ts', '.js', '.jsx']
 ): string | null => {
   for (const extension of extensions) {
     const p = `${filePath}${extension}`