https://discord.umbraco.com
Join Discord
Do not copy node_modules on build
# help-with-umbraco
j
Hi. 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    5254
I have tried to exclude the node_modules folder from my project but it keeps throwing this error. Any ideas on how to resolve this? Thanks, Josef
I 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?
I 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
App_Plugins\QuoteColor\node_modules\
don't install your node modules within the App_Plugins directory.. there's a way to copy them over properly from outside of it. I want the docs to be improved, they're not that easy to follow I learned recently, but please have a look at this video where I set it all up and we discuss where things can be put.

https://youtu.be/arztzoXqFzM?si=ytOeSdP081bFwIRO&t=921▾

j
Thank you so much @Sebastiaan ! I will have a look at the video and go further from there.
Hmm... 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
The trick is to tell vite where to copy stuff in 
vite.config.ts
(
outDir
)
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)
});
This is my work in progress.. open the sln and run it like normal To build the dashboard, run 
npm i && npm run build
in 
.\Gmaps.TakeTwo\Our.Umbraco.GoogleMaps\Client
- the source for the dashboard is in the 
.\Gmaps.TakeTwo\Our.Umbraco.GoogleMaps\Client\src
folder (
my-element.ts
). https://cdn.discordapp.com/attachments/1267778210225979495/1268207976532148286/Gmaps.TakeTwo.zip?ex=66ab9637&is=66aa44b7&hm=03da0eddde8bab38a843d96c6af41adc13826d192bc987e2c697b858824f0dab&
Oh log in with 
test@test.com
/ 
test123456
j
ah, 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 🙂
89 Views
PreviousNext
Powered by

Umbraco

A hub and casual space for you to interact with fellow community members and learn more about Umbraco!

Powered by