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
Did you take a look at this?
https://github.com/denoland/examples/tree/main/with-react
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.
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.
These?
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'?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?
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.
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?
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
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