Replies: 2 comments 5 replies
-
|
You have You can set // vite.config.ts
import { defineConfig } from 'vite'
import path from 'node:path'
import url from 'node:url'
const _dirname = path.dirname(url.fileURLToPath(import.meta.url))
export default defineConfig({
resolve: {
alias: {
"@shared": resolve(_dirname, "./shared"),
}
},
}) |
Beta Was this translation helpful? Give feedback.
-
|
@sapphi-red Thanks for your help! Your method works in project This is how I configured: // tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": "./",
"paths": {
"@": ["./src"],
"@/*": ["./src/*"],
"@shared": ["./shared"],
"@shared/*": ["./shared/*"],
},
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src", "electron"],
"references": [{ "path": "./tsconfig.node.json" }]
}// tsconfig.node.json
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true,
"strict": true
},
"include": ["vite.config.ts"]
}// vite.config.ts
import { defineConfig } from 'vite'
import path from 'node:path'
import { resolve } from "path";
import electron from 'vite-plugin-electron/simple'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
"@": resolve(__dirname, "./src"),
"@shared": resolve(__dirname, "./shared"),
}
},
// global css
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
additionalData: `@import "@/styles/var.less";`
}
}
},
plugins: [
react(),
electron({
main: {
// Shortcut of `build.lib.entry`.
entry: 'electron/main.ts',
},
preload: {
// Shortcut of `build.rollupOptions.input`.
// Preload scripts may contain Web assets, so use the `build.rollupOptions.input` instead `build.lib.entry`.
input: path.join(__dirname, 'electron/preload.ts'),
},
// Ployfill the Electron and Node.js API for Renderer process.
// If you want use Node.js in Renderer process, the `nodeIntegration` needs to be enabled in the Main process.
// See 👉 https://github.com/electron-vite/vite-plugin-electron-renderer
renderer: process.env.NODE_ENV === 'test'
// https://github.com/electron-vite/vite-plugin-electron-renderer/issues/78#issuecomment-2053600808
? undefined
: {},
}),
],
})And here is the error I got: After I tried several times, I noticed this error only happened on codes in electron folder. |
Beta Was this translation helpful? Give feedback.
-
|
Probably adding a slash would help. resolve: {
alias: {
"@/": resolve(__dirname, "./src"),
"@shared/": resolve(__dirname, "./shared"),
}
},If I remember correctly, the alias plugin only uses the first matched entry. So for |
Beta Was this translation helpful? Give feedback.
-
|
Sadly, adding slash triggered more errors: I import '@shared/utils' in two seperate files:
This resolution error didn't occur in the src/views/browser/users/index.tsx, but only in the browser.ts file. Since browser.ts is under electron folder which is configured by vite-plugin-electron, do you think that plugin might cause this? |
Beta Was this translation helpful? Give feedback.
-
|
im having the exact problem too, did you manage to fix this? |
Beta Was this translation helpful? Give feedback.
-
|
I had the same problem and I fixed it like this: const alias = {
'@main': path.resolve(__dirname, 'src/main'),
'@renderer': path.resolve(__dirname, 'src/renderer'),
'@shared': path.resolve(__dirname, 'src/shared')
}
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
tailwindcss(),
svgLoader(),
// vueDevTools(),
electron({
main: {
// Shortcut of `build.lib.entry`.
entry: 'src/main/main.ts',
vite: {
resolve: {
alias
}
}
},
preload: {
// Shortcut of `build.rollupOptions.input`.
// Preload scripts may contain Web assets, so use the `build.rollupOptions.input` instead `build.lib.entry`.
input: path.join(__dirname, 'src/main/preload.ts'),
vite: {
resolve: {
alias
}
}
},
// Polyfill the Electron and Node.js API for Renderer process.
// If you want to use Node.js in Renderer process, the `nodeIntegration` needs to be enabled in the Main process.
// See 👉 https://github.com/electron-vite/vite-plugin-electron-renderer
renderer: process.env.NODE_ENV === 'test'
// https://github.com/electron-vite/vite-plugin-electron-renderer/issues/78#issuecomment-2053600808
? undefined
: {}
})
],
resolve: {
alias
}
})It seems that the aliases must be defined in every vite instance. |
Beta Was this translation helpful? Give feedback.
-
Worked for me thanks a lot ! |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi, guys, I encountered a import error like this:
As you can see rollup failed to resolve the '@shared/greet.ts' file,
@sharedis a alias for shared folder in the root dir.I have alread upload my project here: https://github.com/bluven/learn-vite-typescript/tree/import-error.
It's basiclly a simple project created from vanilla-ts, I created it to show how the error happened.
I have tried an project with only typescript and rollup, and it won't cause this error. So I thought it might because vite does something.
You might ask why put shared in the root folder, it's because I want to share code between two folder in a electron project: https://github.com/bluven/hydra/tree/error-demo
I have searched similars problems and most of them had a lib involved or just typo problems. I even tried to read source code of a vite plugin, tried to understand how rollup works. I don't want to read vite's source code which will be a impossible challenge for me.
So this is basically the last resort, so help me please!!!! I have struggled with this problem a week.
Beta Was this translation helpful? Give feedback.
All reactions