danm•2w ago

Importing local workspace React components into Vite project not working

On this project https://github.com/danm/deno-srp-base/tree/main/packages/web I am trying to import a package called Articles, which is a React JSX component, into a package called Core, which is another React component, but the one which runs using Vite. The repo uses workspaces, and the Articles package has the name @srp/web-articles. When i try to import it, React throws an error:

[plugin:vite:import-analysis] Failed to resolve import "@srp/web-articles" from "src/main.tsx". Does the file exist?
/Users/danm/git/deno-srp-base/packages/web/core/src/main.tsx:6:21
5  |  import { createRoot } from 'react-dom/client';
6  |  import { BrowserRouter, Routes, Route } from 'react-router-dom';
7  |  import Articles from '@srp/web-articles';
   |                        ^
8  |  createRoot(document.getElementById('root')).render(/*#__PURE__*/ _jsxDEV(StrictMode, {
9  |      children: /*#__PURE__*/ _jsxDEV(BrowserRouter, {

[plugin:vite:import-analysis] Failed to resolve import "@srp/web-articles" from "src/main.tsx". Does the file exist?
/Users/danm/git/deno-srp-base/packages/web/core/src/main.tsx:6:21
5  |  import { createRoot } from 'react-dom/client';
6  |  import { BrowserRouter, Routes, Route } from 'react-router-dom';
7  |  import Articles from '@srp/web-articles';
   |                        ^
8  |  createRoot(document.getElementById('root')).render(/*#__PURE__*/ _jsxDEV(StrictMode, {
9  |      children: /*#__PURE__*/ _jsxDEV(BrowserRouter, {

@srp/web-articles has the following in the deno.json

{
  "name": "@srp/web-articles",
  "version": "1.0.0",
  "imports": {
    "react": "npm:react@^18.3.1",
    "@types/react": "npm:@types/react@^18.3.12"
  },
  "exports": "./src/main.tsx"

}

{
  "name": "@srp/web-articles",
  "version": "1.0.0",
  "imports": {
    "react": "npm:react@^18.3.1",
    "@types/react": "npm:@types/react@^18.3.12"
  },
  "exports": "./src/main.tsx"

}

In Node, this just works, but struggling with using package names when they are importing local packages.
Any recommendations on how to this working? Thanks!

GitHub

deno-srp-base/packages/web at main · danm/deno-srp-base

Single repository platform base template for T. Contribute to danm/deno-srp-base development by creating an account on GitHub.

2 Replies

danmOP•2w ago

line which errors https://github.com/danm/deno-srp-base/blob/main/packages/web/core/src/main.tsx#L6C1-L7C1

GitHub

deno-srp-base/packages/web/core/src/main.tsx at main · danm/deno-s...

Single repository platform base template for T. Contribute to danm/deno-srp-base development by creating an account on GitHub.

marvinh.•2w ago

That sounds like an unexpected behaviour, which I'd classify as a bug. Can you file an issue for that over here https://github.com/denoland/deno/issues ?

Importing local workspace React components into Vite project not working

Did you find this page helpful?