Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui): avoid bundling injectionKeys in custom components #718

Merged
merged 2 commits into from
Jan 7, 2025

Conversation

madeindjs
Copy link
Collaborator

The custom component built using npm run custom.build was not working correctly because the provide/inject failed.

The error was, we bundled injectionKeys in the template.umd.js , So it makes defining two different Symbol which point to a different provide.

It's because the rollupOptions.external in Vite config pointed to ../injectionKeys, but we sometime use the alias @/injectionKeys. So I simply use path.resolve to be sure injectionKeys are not bundled in custom components.

@madeindjs madeindjs self-assigned this Jan 3, 2025
@madeindjs madeindjs marked this pull request as ready for review January 3, 2025 15:33
The custom component built using `npm run custom.build` was not working
correctly because the `provide/inject` failed.

The error was, we bundled `injectionKeys` in the `template.umd.js` , So
it makes defining two different `Symbol` which point to a different
`provide`.

It's because the `rollupOptions.external` in Vite config pointed to
`../injectionKeys`, but we sometime use the alias `@/injectionKeys`. So
I simply use `path.resolve` to be sure `injectionKeys` are not bundled
in custom components.
@@ -29,11 +31,11 @@ export default defineConfig({
},
},
rollupOptions: {
external: ["vue", "../injectionKeys"],
external: ["vue", injectionKeys],
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have to use this code to make the build of custom component working on windows.

rollupOptions: {
			external: ["vue", "@/injectionKeys"],
			output: {
				globals: {
					vue: "vue",
					[path.resolve("src/injectionKeys")]: "injectionKeys",
				},
			},
		},
		```

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I implemented it in d6fb5ec

@ramedina86 ramedina86 merged commit a50852c into writer:dev Jan 7, 2025
16 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants