From 771eed719252a2c77004551a93f70fe067c084bb Mon Sep 17 00:00:00 2001 From: Eddy Nguyen Date: Sat, 17 Jul 2021 11:57:26 +1000 Subject: [PATCH] Set up repo with optimizeDep problem --- demo/package.json | 5 ++- demo/pnpm-lock.yaml | 70 ++++++++++++++++++++++++++++++++ demo/src/Root.tsx | 55 ++----------------------- demo/src/shared/ui/File/File.tsx | 4 ++ demo/src/shared/ui/File/index.ts | 1 + demo/src/shared/ui/index.ts | 1 + demo/tsconfig.json | 37 +++++++++++++++-- demo/vite.config.ts | 13 +++--- package.json | 2 +- pnpm-lock.yaml | 26 ++++++------ 10 files changed, 137 insertions(+), 77 deletions(-) create mode 100644 demo/src/shared/ui/File/File.tsx create mode 100644 demo/src/shared/ui/File/index.ts create mode 100644 demo/src/shared/ui/index.ts diff --git a/demo/package.json b/demo/package.json index 86bbb5f..7d34e91 100644 --- a/demo/package.json +++ b/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" } } diff --git a/demo/pnpm-lock.yaml b/demo/pnpm-lock.yaml index add6e97..9f60128 100644 --- a/demo/pnpm-lock.yaml +++ b/demo/pnpm-lock.yaml @@ -13,6 +13,7 @@ specifiers: sirv-cli: ^1.0.8 vite: link:../node_modules/vite vite-react-jsx: link:.. + vite-tsconfig-paths: ^3.3.13 dependencies: react: 17.0.2 @@ -29,6 +30,7 @@ devDependencies: sirv-cli: 1.0.11 vite: link:../node_modules/vite vite-react-jsx: link:.. + vite-tsconfig-paths: 3.3.13 packages: @@ -239,6 +241,10 @@ packages: to-fast-properties: 2.0.0 dev: true + /@cush/relative/1.0.0: + resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==} + dev: true + /@polka/url/1.0.0-next.12: resolution: {integrity: sha512-6RglhutqrGFMO1MNUXp95RBuYIuc8wTnMAV5MUhLmjTOy78ncwOw7RgeQ/HeymkKXRhZd0s2DNrM1rL7unk3MQ==} dev: true @@ -355,6 +361,18 @@ packages: ms: 2.1.2 dev: true + /debug/4.3.2: + resolution: {integrity: sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==} + engines: {node: '>=6.0'} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + dependencies: + ms: 2.1.2 + dev: true + /electron-to-chromium/1.3.735: resolution: {integrity: sha512-cp7MWzC3NseUJV2FJFgaiesdrS+A8ZUjX5fLAxdRlcaPDkaPGFplX930S5vf84yqDp4LjuLdKouWuVOTwUfqHQ==} dev: true @@ -386,11 +404,19 @@ packages: engines: {node: '>=4'} dev: true + /glob-regex/0.3.2: + resolution: {integrity: sha512-m5blUd3/OqDTWwzBBtWBPrGlAzatRywHameHeekAZyZrskYouOGdNB8T/q6JucucvJXtOuyHIn0/Yia7iDasDw==} + dev: true + /globals/11.12.0: resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==} engines: {node: '>=4'} dev: true + /globrex/0.1.2: + resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==} + dev: true + /has-flag/3.0.0: resolution: {integrity: sha1-tdRU3CGZriJWmfNGfloH87lVuv0=} engines: {node: '>=4'} @@ -517,6 +543,15 @@ packages: object-assign: 4.1.1 dev: false + /recrawl-sync/2.2.1: + resolution: {integrity: sha512-A2yLDgeXNaduJJMlqyUdIN7fewopnNm/mVeeGytS1d2HLXKpS5EthQ0j8tWeX+as9UXiiwQRwfoslKC+/gjqxg==} + dependencies: + '@cush/relative': 1.0.0 + glob-regex: 0.3.2 + slash: 3.0.0 + tslib: 1.14.1 + dev: true + /sade/1.7.4: resolution: {integrity: sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==} engines: {node: '>= 6'} @@ -569,11 +604,21 @@ packages: totalist: 1.1.0 dev: true + /slash/3.0.0: + resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==} + engines: {node: '>=8'} + dev: true + /source-map/0.5.7: resolution: {integrity: sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=} engines: {node: '>=0.10.0'} dev: true + /strip-bom/3.0.0: + resolution: {integrity: sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=} + engines: {node: '>=4'} + dev: true + /supports-color/5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} engines: {node: '>=4'} @@ -596,6 +641,31 @@ packages: engines: {node: '>=6'} dev: true + /tsconfig-paths/3.10.1: + resolution: {integrity: sha512-rETidPDgCpltxF7MjBZlAFPUHv5aHH2MymyPvh+vEyWAED4Eb/WeMbsnD/JDr4OKPOA1TssDHgIcpTN5Kh0p6Q==} + dependencies: + json5: 2.2.0 + minimist: 1.2.5 + strip-bom: 3.0.0 + dev: true + + /tslib/1.14.1: + resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==} + dev: true + /tslib/2.2.0: resolution: {integrity: sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==} dev: false + + /vite-tsconfig-paths/3.3.13: + resolution: {integrity: sha512-G7OO+1g2H6xVN61RIp1xFjvciqJoF5cGKcWfP6ZOZFeA8QRy2X7yaGUZLhXtKxNLEsR2MthDm7KwSNTKQHzwvA==} + peerDependencies: + vite: '>2.0.0-0' + dependencies: + debug: 4.3.2 + globrex: 0.1.2 + recrawl-sync: 2.2.1 + tsconfig-paths: 3.10.1 + transitivePeerDependencies: + - supports-color + dev: true diff --git a/demo/src/Root.tsx b/demo/src/Root.tsx index 91b3a0b..33668da 100644 --- a/demo/src/Root.tsx +++ b/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 ( - <> - - - - - - ) + return } - -const FileZone = () => ( -
- - {state => ( -
- -
- Drop a file on me! -
-
- )} - -
-) diff --git a/demo/src/shared/ui/File/File.tsx b/demo/src/shared/ui/File/File.tsx new file mode 100644 index 0000000..e8f8d46 --- /dev/null +++ b/demo/src/shared/ui/File/File.tsx @@ -0,0 +1,4 @@ +// PROBLEM: The next line is needed in if `optimizeDeps` is used +// import React from 'react' + +export const File = () =>
File
diff --git a/demo/src/shared/ui/File/index.ts b/demo/src/shared/ui/File/index.ts new file mode 100644 index 0000000..02247cb --- /dev/null +++ b/demo/src/shared/ui/File/index.ts @@ -0,0 +1 @@ +export * from './File' diff --git a/demo/src/shared/ui/index.ts b/demo/src/shared/ui/index.ts new file mode 100644 index 0000000..02247cb --- /dev/null +++ b/demo/src/shared/ui/index.ts @@ -0,0 +1 @@ +export * from './File' diff --git a/demo/tsconfig.json b/demo/tsconfig.json index 1918379..e3d788a 100644 --- a/demo/tsconfig.json +++ b/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"] } diff --git a/demo/vite.config.ts b/demo/vite.config.ts index 7868ccb..de80bc2 100644 --- a/demo/vite.config.ts +++ b/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'], }, } diff --git a/package.json b/package.json index bfe6db6..887072e 100644 --- a/package.json +++ b/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": [ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 04ffa45..15aaad1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,7 +13,7 @@ specifiers: prettier: ^2.0.5 resolve: ^1.20.0 typescript: ^4.0.0 - vite: latest + vite: 2.4.2 dependencies: '@babel/core': 7.14.3 @@ -30,7 +30,7 @@ devDependencies: '@types/resolve': 1.20.0 prettier: 2.3.0 typescript: 4.2.4 - vite: 2.3.3 + vite: 2.4.2 packages: @@ -370,8 +370,8 @@ packages: resolution: {integrity: sha512-cp7MWzC3NseUJV2FJFgaiesdrS+A8ZUjX5fLAxdRlcaPDkaPGFplX930S5vf84yqDp4LjuLdKouWuVOTwUfqHQ==} dev: false - /esbuild/0.11.23: - resolution: {integrity: sha512-iaiZZ9vUF5wJV8ob1tl+5aJTrwDczlvGP0JoMmnpC2B0ppiMCu8n8gmy5ZTGl5bcG081XBVn+U+jP+mPFm5T5Q==} + /esbuild/0.12.15: + resolution: {integrity: sha512-72V4JNd2+48eOVCXx49xoSWHgC3/cCy96e7mbXKY+WOWghN00cCmlGnwVLRhRHorvv0dgCyuMYBZlM2xDM5OQw==} hasBin: true requiresBuild: true dev: true @@ -461,8 +461,8 @@ packages: /path-parse/1.0.6: resolution: {integrity: sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==} - /postcss/8.3.0: - resolution: {integrity: sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ==} + /postcss/8.3.5: + resolution: {integrity: sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==} engines: {node: ^10 || ^12 || >=14} dependencies: colorette: 1.2.2 @@ -482,8 +482,8 @@ packages: is-core-module: 2.4.0 path-parse: 1.0.6 - /rollup/2.48.0: - resolution: {integrity: sha512-wl9ZSSSsi5579oscSDYSzGn092tCS076YB+TQrzsGuSfYyJeep8eEWj0eaRjuC5McuMNmcnR8icBqiE/FWNB1A==} + /rollup/2.53.2: + resolution: {integrity: sha512-1CtEYuS5CRCzFZ7SNW5528SlDlk4VDXIRGwbm/2POQxA/G4+7/crIqJwkmnj8Q/74hGx4oVlNvh4E1CJQ5hZ6w==} engines: {node: '>=10.0.0'} hasBin: true optionalDependencies: @@ -526,15 +526,15 @@ packages: hasBin: true dev: true - /vite/2.3.3: - resolution: {integrity: sha512-eO1iwRbn3/BfkNVMNJDeANAFCZ5NobYOFPu7IqfY7DcI7I9nFGjJIZid0EViTmLDGwwSUPmRAq3cRBbO3+DsMA==} + /vite/2.4.2: + resolution: {integrity: sha512-2MifxD2I9fjyDmmEzbULOo3kOUoqX90A58cT6mECxoVQlMYFuijZsPQBuA14mqSwvV3ydUsqnq+BRWXyO9Qa+w==} engines: {node: '>=12.0.0'} hasBin: true dependencies: - esbuild: 0.11.23 - postcss: 8.3.0 + esbuild: 0.12.15 + postcss: 8.3.5 resolve: 1.20.0 - rollup: 2.48.0 + rollup: 2.53.2 optionalDependencies: fsevents: 2.3.2 dev: true