OmegaPirat•16mo 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 🙂

vite.config.mts

deps.ts

9 Replies

sean•16mo ago

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.

OmegaPiratOP•16mo 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•16mo 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?

OmegaPiratOP•16mo 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•16mo 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•16mo 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.

OmegaPiratOP•16mo 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•16mo 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

OmegaPiratOP•16mo 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