Search code examples
reactjswidgetparceljsreact-widgets

Parcel outputs "cannot resolve dependency" when building react widget

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"
  },

enter image description here

Solution

  • 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/",.