Set up repo with optimizeDep problem

demo/package.json

@@ -2,7 +2,7 @@
   "name": "demo",
   "private": true,
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --force",
     "build": "vite build",
     "test": "sirv dist"
   },
@@ -20,6 +20,7 @@
     "@vitejs/plugin-react-refresh": "^1.3.3",
     "sirv-cli": "^1.0.8",
     "vite": "link:../node_modules/vite",
-    "vite-react-jsx": "link:.."
+    "vite-react-jsx": "link:..",
+    "vite-tsconfig-paths": "^3.3.13"
   }
 }

demo/src/Root.tsx

@@ -1,54 +1,7 @@
-import { useState } from 'react'
-
-// This local package uses the automatic JSX runtime in a .jsx module
-import One from 'react-one'
-
-// This local package uses `import React from 'react'` in a .tsx module
-import Two from 'react-two'
-
-// This package has a minified CJS entry point and a development module
-import { Switch } from './deps'
-
-// This package has a ESM entry point
-import Dropzone from 'react-dropzone'
+// PROBLEM: This is an alias path set in tsconfig.json
+// This points to src/shared/ui which has an index.ts file that exports stuff
+import { File } from '@/shared/ui'
 
 export const Root = () => {
-  const [checked, setChecked] = useState(false)
-  return (
-    <>
-      <One />
-      <Two />
-      <Switch checked={checked} onChange={setChecked} />
-      <FileZone />
-    </>
-  )
+  return <File />
 }
-
-const FileZone = () => (
-  <div style={{ width: 200, margin: '50px auto' }}>
-    <Dropzone>
-      {state => (
-        <div {...state.getRootProps()}>
-          <input {...state.getInputProps()} />
-          <div
-            style={{
-              width: 200,
-              height: 200,
-              borderRadius: 10,
-              background: `hsla(0, 0%, 100%, ${
-                state.isDragActive ? 0.3 : 0.1
-              })`,
-              color: 'white',
-              fontSize: 14,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              userSelect: 'none',
-            }}>
-            Drop a file on me!
-          </div>
-        </div>
-      )}
-    </Dropzone>
-  </div>
-)

demo/src/shared/ui/File/File.tsx

@@ -0,0 +1,3 @@
+// import React from 'react'
+
+export const File = () => <div>File</div>

demo/src/shared/ui/File/index.ts

@@ -0,0 +1 @@
+export * from './File'

demo/src/shared/ui/index.ts

@@ -0,0 +1 @@
+export * from './File'

demo/tsconfig.json

@@ -1,8 +1,37 @@
 {
-  "extends": "../tsconfig.json",
-  "include": ["src", "vite.config.ts"],
   "compilerOptions": {
+    "rootDir": ".",
+    "baseUrl": ".",
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "Node",
     "jsx": "react-jsx",
-    "lib": ["dom", "es2018"]
-  }
+    "noEmit": true,
+    "alwaysStrict": true,
+    "noImplicitThis": true,
+    "noImplicitReturns": true,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "strictFunctionTypes": true,
+    "strictNullChecks": true,
+    "noImplicitAny": true,
+    "esModuleInterop": false,
+    "declaration": true,
+    "allowJs": false,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noUnusedLocals": true,
+    "downlevelIteration": true,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["./src"],
+  "exclude": ["node_modules"]
 }

demo/vite.config.ts

@@ -1,14 +1,15 @@
 import reactJsx from 'vite-react-jsx'
 import reactRefresh from '@vitejs/plugin-react-refresh'
+import tsconfigPaths from 'vite-tsconfig-paths'
 import type { UserConfig } from 'vite'
 
 const config: UserConfig = {
-  plugins: [reactRefresh(), reactJsx()],
-  build: {
-    // The minified bundle works as expected.
-    minify: false,
-    // Source maps are generated properly.
-    sourcemap: true,
+  plugins: [reactRefresh(), tsconfigPaths(), reactJsx()],
+  // PROBLEM: Current setup does not work with `optimizeDeps`
+  // It will say something like this in the browser console:
+  // File.tsx:3 Uncaught ReferenceError: React is not defined
+  optimizeDeps: {
+    include: ['@/shared/ui'],
   },
 }
 

package.json

@@ -30,7 +30,7 @@
     "@types/resolve": "^1.20.0",
     "prettier": "^2.0.5",
     "typescript": "^4.0.0",
-    "vite": "latest"
+    "vite": "2.4.2"
   },
   "prettier": "@alloc/prettier-config",
   "keywords": [