Do not copy node_modules on build
# help-with-umbracoj
Josef Henryson
07/30/2024, 9:38 AMHi. I am trying to create a custom property editor with Lit in U14. I can build the package locally with npm inside the package folder. But when I try to build my Umbraco project I keep getting this error:
Copy code
Error MSB3027
Could not copy "C:\Projects\***\App_Plugins\QuoteColor\node_modules\@umbraco-cms\backoffice\dist-cms\packages\block\block-grid\property-editors\block-grid-group-configuration\property-editor-ui-block-grid-group-configuration.element.d.ts" to "bin\Debug\net8.0\App_Plugins\QuoteColor\node_modules\@umbraco-cms\backoffice\dist-cms\packages\block\block-grid\property-editors\block-grid-group-configuration\property-editor-ui-block-grid-group-configuration.element.d.ts". Exceeded retry count of 10. Failed.
C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Current\Bin\amd64\Microsoft.Common.CurrentVersion.targets 5254Josef Henryson
07/30/2024, 9:49 AMI found some post saying "I think the destination path is to long. Try to copy the project to a short root directory"
I don't know how to change this path but I guess the node_modules isn't necessary to keep in the build?
So it should be possible to disable the copy in some way I guess?
Josef Henryson
07/31/2024, 12:19 PMI even restarted and followed this page with the vanilla JS example:
https://apidocs.umbraco.com/v14/ui-api/index.html#md:typescript-with-lit
But still when building I get heaps of TS errors and could not copy the @Umbraco-cms/backoffice folder.
I can't believe I am the only one running into this error. Please let me know if you have encountered this problem and found a way forward...
s
Sebastiaan
07/31/2024, 12:42 PMApp_Plugins\QuoteColor\node_modules\Josef Henryson
07/31/2024, 1:49 PMHmm... okay, so I don't need to do any npm installations at all? THey are already available in the Umbrac context? I n the video I can't see they install it nor have a node_modules folder. But the docs says it should be installed, right?
s
Sebastiaan
07/31/2024, 1:56 PMYes you need npm - this is what it looks like for me :
https://cdn.discordapp.com/attachments/1267778210225979495/1268205593836126301/image.png?ex=66ab93ff&is=66aa427f&hm=3e39f7169cdcad4f30d6ef7e4121815563b5aad791e4a855954f3297a906541e&
Sebastiaan
07/31/2024, 1:57 PMAnd one level up from that is
wwwroot\App_PluginsSebastiaan
07/31/2024, 1:57 PMThe trick is to tell vite where to copy stuff in
vite.config.tsoutDir Copy code
js
import { defineConfig } from "vite";
export default defineConfig({
build: {
lib: {
entry: "src/my-element.ts", // your web component source file
formats: ["es"],
},
outDir: "../wwwroot/App_Plugins/Our.Umbraco.GoogleMaps/dist", // all compiled files will be placed here
emptyOutDir: true,
sourcemap: true,
rollupOptions: {
external: [/^@umbraco/], // ignore the Umbraco Backoffice package in the build
},
},
base: "/wwwroot/App_Plugins/Our.Umbraco.GoogleMaps/", // the base path of the app in the browser (used for assets)
});Sebastiaan
07/31/2024, 2:05 PMThis is my work in progress.. open the sln and run it like normal
To build the dashboard, run
npm i && npm run build.\Gmaps.TakeTwo\Our.Umbraco.GoogleMaps\Client.\Gmaps.TakeTwo\Our.Umbraco.GoogleMaps\Client\srcmy-element.tsSebastiaan
07/31/2024, 2:07 PMOh log in with
test@test.comtest123456j
Josef Henryson
07/31/2024, 2:07 PMah, great, I think I get it... heading home now but I will have another try at it first thing tomorrow. Thanks again, you are an angel 🙂
75 Views