OmegaPirat
OmegaPiratโ€ข11mo ago

External dependencies with npm specifier in combination with vite does not work.

Hi, I am new to Deno and want to build an app with deno, vite and react. Unfortunately the dependencies are not resolved correctly. It says: The following dependencies are imported but could not be resolved: npm:react (imported by.....) npm:react-dom/client (imported by ...) npm:styled-components (imported by...) npm:vite@^4.3.9 (imported by ...) npm:@vitejs/plugin-react@^4.0.0 I added my vite.config.mts and my deps.ts to the attachment. I start the app with the command deno run -A npm:vite My deno version is 1.36.1 Do you need any further information? I am pretty desperated and thanks in advance ๐Ÿ™‚
9 Replies
sean
seanโ€ข11mo ago
GitHub
examples/with-react at main ยท denoland/examples
A simple todo app using Deno and React. Contribute to denoland/examples development by creating an account on GitHub.
OmegaPirat
OmegaPiratโ€ข11mo ago
Yes I came across of it. Unfortunately they don't make use of the npm prefix outside of the vite config file. For some reason it recognizes the imports if I place the vite dependencies directly into the vite config file instead of the deps.ts. For what are those additional react imports in the vite config good for? Is this important? https://github.com/denoland/examples/blob/main/with-react/vite.config.mjs
GitHub
examples/with-react/vite.config.mjs at main ยท denoland/examples
A simple todo app using Deno and React. Contribute to denoland/examples development by creating an account on GitHub.
sean
seanโ€ข11mo ago
import "npm:react@^18.2";
import "npm:react-dom/client@^18.2";
import "npm:react-router-dom@^6.4";
import "npm:react@^18.2";
import "npm:react-dom/client@^18.2";
import "npm:react-router-dom@^6.4";
These?
OmegaPirat
OmegaPiratโ€ข11mo ago
yes i just cloned the demo project and tried to start it. It fails with the message Task dev deno run -A --unstable --node-modules-dir npm:vite failed to load config from C:\Users\bsiem\WebstormProjects\examples\with-react\vite.config.mjs error when starting dev server: TypeError: Invalid package specifier 'npm:react-dom/client@^18.2'. Did you mean to write 'npm:react-dom@^18.2/client'?
sean
seanโ€ข11mo ago
I honestly don't know for sure Yup, you aren't the only one There are other people having your same issue apparently Do you have a node project that you need to convert to Deno? Or is it a brand new thing?
sean
seanโ€ข11mo ago
Because if I were you I wouldn't risk going crazy and just go with the recommended alternatives: https://deno.land/manual@v1.36.1/basics/react
Deno
Using React with Deno | Manual | Deno
To use React with Deno, we recommend using one of the third-party frameworks below.
OmegaPirat
OmegaPiratโ€ข11mo ago
It is just a small private project (a differential equation solution plotter to solve and visualize physics problems): It started with node and now I want to transform it to deno. So you mean I should try a react based framework like fresh?
sean
seanโ€ข11mo ago
Probably would be the smoothest option In the past I used to waste way too much time fixing problems like this, it's just not worth it Just build your project xD
OmegaPirat
OmegaPiratโ€ข11mo ago
now i run into another issue. I setup fresh and if I want to import import {BarChart} from "https://deno.land/x/d3nodata@v0.1.3.1/charts.ts" and use it like <BarChart datasets={plotData.datasets}/> It says TypeError: Cannot read properties of undefined (reading '__H') at a (https://esm.sh/stable/preact@10.11.0/denonext/hooks.js:2:208) at j (https://esm.sh/stable/preact@10.11.0/denonext/hooks.js:2:910) at Object.BarChart (https://deno.land/x/d3nodata@v0.1.3.1/chart-comps/BarChart.tsx:379:3) i scaffold a basic fresh project and it runs normally but as soon as i want to use something from d3no I run into this issue