Parcel outputs "cannot resolve dependency" when building react widget

Question

So I am trying to build a react widget. I have completed the app and it's works fine as a react app, but when I try to build it with parcel as a widget so I can be able to embed it in any website, this is what I get when I run the widget build command.

parcel build src/index.tsx --no-source-maps -d widget && cp build/static/css/*.css widget/index.css

C:\Users\Genral Walker\Desktop\Coding\my-personal-works\PneumaCareHQ\consult-widgets\src\App.tsx:17:28: Cannot resolve dependency 'layouts/DashboardLayout'

This is my script package json

"scripts": {
    "eject": "react-scripts eject",
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "build:widget": "parcel build src/index.tsx --no-source-maps -d widget && cp build/static/css/*.css widget/index.css"
  },

The error you're getting seems to indicate that there is an import statement in `src/App.ts` that tries to reference a file called `src/componentLoadingSpin`, but it doesn't exist, and that can't be found. Can you provide a complete, simplified repro - including the files that get built and the things they reference? — Andrew Stegmaier, Nov 07 '21 at 21:40
Also, you usually need to use `./component/LoadingSpin`. Currently it tries to load an npm package called "component" — mischnic, Nov 08 '21 at 09:48
Thanks Andrew, mischinc is right, parcel doesn't recognize if it's a component or a module. I change that and added the "./" to it. The issue I have now is that it recognises another similar error-which I also changed. And it keeps on moving to the next component... Please is there a way I can set this so parcel can build the project without me manually editing all the import instances. I've got like 2000 of those. Thanks. — Genral-walker, Nov 08 '21 at 19:37
You could try to use [package aliases](https://parceljs.org/features/dependency-resolution/#package-aliases) to re-direct what parcel thinks is a package called `component` (in node_modules) to a folder in your project (e.g. src/component) — Andrew Stegmaier, Nov 09 '21 at 16:08
Alright @AndrewStegmaier, I didn't know of this till now, looking into this right away. — Genral-walker, Nov 09 '21 at 20:16

score 1 · Accepted Answer · edited Nov 14 '21 at 16:14

Alright with the help from Andrew, I was able to use package package aliases to resolve the issue.

I inserted the components that were being resolved as modules in the package.json alias block to prevent that.

A simple example: if you have a component you want to import with absolute import method as such import ComponentName from 'component/RouteComposer'; . In order to avoid running into an error when building, insert this in the alias block in package.json as so "component*": "./src/component/",.

Parcel outputs "cannot resolve dependency" when building react widget

1 Answers1