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

@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.

Importing local workspace React components into Vite project not working

@srp/web-articles

@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.

Importing local workspace React components into Vite project not working

Importing local workspace React components into Vite project not working

Similar Threads

Similar Threads

Similar Threads