Closed liuzw2579 closed 2 years ago
There's a PR for this #29
I just haven't had time to review it
TLDR: Read the edit at the bottom.
Seems that including the patch in #29 did not resolve the issue for me.
With the following configuration:
vite.ts.config:
import path from "path";
import reactRefresh from "@vitejs/plugin-react-refresh";
import { defineConfig, loadEnv } from "vite";
import eslintPlugin from "vite-plugin-eslint";
import istanbul from "vite-plugin-istanbul";
import svgr from "vite-plugin-svgr";
import tsconfigPaths from "vite-tsconfig-paths";
// @ts-ignore
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, "env");
const isCoverage = process.env.VITE_COVERAGE === "true";
const sourcemap = isCoverage ? "inline" : undefined;
const htmlPlugin = () => {
return {
name: "html-transform",
transformIndexHtml(html: string) {
return html.replace(/%(.*?)%/g, function (match, p1) {
return env[p1];
});
},
};
};
const istanbulPlugin = isCoverage
? istanbul({
include: "src/*",
exclude: ["node_modules"],
extension: [".js", ".jsx", ".ts", ".tsx"],
requireEnv: true,
})
: undefined;
return {
base: "./",
build: {
sourcemap,
outDir: "../internal/server/public_html",
assetsDir: "static",
rollupOptions: {
output: {
entryFileNames: `static/js/[name].[hash].js`,
chunkFileNames: `static/js/[name].[hash].js`,
assetFileNames: ({ name }) => {
if (name && name.endsWith(".css")) {
return "static/css/[name].[hash].[ext]";
}
return "static/media/[name].[hash].[ext]";
},
},
},
},
server: {
open: false,
hmr: {
clientPort: env.VITE_HMR_PORT || 3000,
},
},
plugins: [eslintPlugin(), htmlPlugin(), istanbulPlugin, reactRefresh(), svgr(), tsconfigPaths({ loose: true })],
};
});
tsconfig.json:
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@root/*": ["./*"],
"@assets/*": ["assets/*"],
"@components/*": ["components/*"],
"@constants/*": ["constants/*"],
"@hooks/*": ["hooks/*"],
"@layouts/*": ["layouts/*"],
"@models/*": ["models/*"],
"@services/*": ["services/*"],
"@themes/*": ["themes/*"],
"@utils/*": ["utils/*"],
"@views/*": ["views/*"]
},
"target": "es6",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"types": ["@types/node", "vite/client", "vite-plugin-svgr/client"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
}
}
~~You can reproduce the issue by cloning the the following repo with the included patch which removes the in place workaround: https://github.com/authelia/authelia~~
Index: web/vite.config.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/web/vite.config.ts b/web/vite.config.ts
--- a/web/vite.config.ts (revision 2853a8e56a86fa2590aca2abbb8f8cd9df8a56e4)
+++ b/web/vite.config.ts (date 1633997017579)
@@ -1,5 +1,3 @@
-import path from "path";
-
import reactRefresh from "@vitejs/plugin-react-refresh";
import { defineConfig, loadEnv } from "vite";
import eslintPlugin from "vite-plugin-eslint";
@@ -59,14 +57,6 @@
clientPort: env.VITE_HMR_PORT || 3000,
},
},
- resolve: {
- alias: [
- {
- find: "@components",
- replacement: path.resolve(__dirname, "src/components"),
- },
- ],
- },
- plugins: [eslintPlugin(), htmlPlugin(), istanbulPlugin, reactRefresh(), svgr(), tsconfigPaths()],
+ plugins: [eslintPlugin(), htmlPlugin(), istanbulPlugin, reactRefresh(), svgr(), tsconfigPaths({ loose: true })],
};
});
Index: web/tsconfig.json
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/web/tsconfig.json b/web/tsconfig.json
--- a/web/tsconfig.json (revision 2853a8e56a86fa2590aca2abbb8f8cd9df8a56e4)
+++ b/web/tsconfig.json (date 1633996862882)
@@ -34,16 +34,5 @@
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
- },
- "include": [
- ".*.js",
- "vite.config.ts",
- "src",
- "types"
- ],
- "exclude": [
- "node_modules",
- "build",
- "coverage"
- ]
+ }
}
Also for clarity it fails with the following error:
[vite]: Rollup failed to resolve import "@components/FingerTouchIcon.module.css?used" from "src/components/FingerTouchIcon.tsx".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "@components/FingerTouchIcon.module.css?used" from "src/components/FingerTouchIcon.tsx".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
at onRollupWarning (/srv/repos/authelia/web/node_modules/vite/dist/node/chunks/dep-713b45e1.js:43249:19)
at onwarn (/srv/repos/authelia/web/node_modules/vite/dist/node/chunks/dep-713b45e1.js:43033:13)
at Object.onwarn (/srv/repos/authelia/web/node_modules/rollup/dist/shared/rollup.js:22917:13)
at ModuleLoader.handleResolveId (/srv/repos/authelia/web/node_modules/rollup/dist/shared/rollup.js:22265:26)
at /srv/repos/authelia/web/node_modules/rollup/dist/shared/rollup.js:22257:26
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Process finished with exit code 1
EDIT:
It looks like the changes actually do work however, if there are no includes
excludes
in my tsconfig.json
the following error occurs:
[vite:tsconfig-paths] The argument 'path' must be a string or Uint8Array without null bytes. Received '/srv/repos/authelia/web/src/\x00commonjsHelpers.js'
error during build:
TypeError [PLUGIN_ERROR]: The argument 'path' must be a string or Uint8Array without null bytes. Received '/srv/repos/authelia/web/src/\x00commonjsHelpers.js'
at Object.stat (node:fs:1458:10)
at fileExistsAsync (/srv/repos/authelia/web/node_modules/.pnpm/vite-tsconfig-paths@3.3.15_vite@2.6.7/node_modules/vite-tsconfig-paths/node_modules/.pnpm/tsconfig-paths@3.11.0/node_modules/tsconfig-paths/lib/filesystem.js:41:8)
at findFirstExistingPath (/srv/repos/authelia/web/node_modules/.pnpm/vite-tsconfig-paths@3.3.15_vite@2.6.7/node_modules/vite-tsconfig-paths/node_modules/.pnpm/tsconfig-paths@3.11.0/node_modules/tsconfig-paths/lib/match-path-async.js:66:9)
at matchFromAbsolutePathsAsync (/srv/repos/authelia/web/node_modules/.pnpm/vite-tsconfig-paths@3.3.15_vite@2.6.7/node_modules/vite-tsconfig-paths/node_modules/.pnpm/tsconfig-paths@3.11.0/node_modules/tsconfig-paths/lib/match-path-async.js:31:5)
at /srv/repos/authelia/web/node_modules/.pnpm/vite-tsconfig-paths@3.3.15_vite@2.6.7/node_modules/vite-tsconfig-paths/node_modules/.pnpm/tsconfig-paths@3.11.0/node_modules/tsconfig-paths/lib/match-path-async.js:15:16
at /srv/repos/authelia/web/node_modules/.pnpm/vite-tsconfig-paths@3.3.15_vite@2.6.7/node_modules/vite-tsconfig-paths/dist/index.js:109:9
at new Promise (<anonymous>)
at resolveWithPaths (/srv/repos/authelia/web/node_modules/.pnpm/vite-tsconfig-paths@3.3.15_vite@2.6.7/node_modules/vite-tsconfig-paths/dist/index.js:108:63)
at resolveId (/srv/repos/authelia/web/node_modules/.pnpm/vite-tsconfig-paths@3.3.15_vite@2.6.7/node_modules/vite-tsconfig-paths/dist/index.js:119:50)
at /srv/repos/authelia/web/node_modules/.pnpm/vite-tsconfig-paths@3.3.15_vite@2.6.7/node_modules/vite-tsconfig-paths/dist/index.js:139:23
ELIFECYCLE Command failed with exit code 1.
Fixed in v3.3.16
vite can import file use
?raw
or?url
and so on, when use it, plugin can't resolveId should substring it: