Reactjs build failed attempted import error: 'widget' is not exported

Question

I created a new React project with Typescript and I copy and paste old file from another project which is just .jsx file. This file is importing a class called widget like this.

index.jsx

import { widget } from "../charting_library/charting_library";

This import didn't work due to linting issues so I add an entry to .eslintignore file like this

src/pages/instuments/technicalAnalysis/charting_library/*.js

Then it worked perfectly fine with npm run start. But when I tried to build using `npm run build command. It throws this error

Attempted import error: 'widget' is not exported from '../charting_library/charting_library'.

the widget should be in the charting_libbray folder. Otherwise, it won't work with npm run start as well.

On the other hand, charting_library is a folder

charting_library
-charting_library.cjs.js
-charting_library.d.ts
-charting_library.esm.js
-charting_library.js
-charting_library.standalone.js
-**package.json**

package.json is like this

{
  "private": true,
  "description": "CL v20.033 (internal id 9df149da @ 2021-11-17T10:20:51.511Z)",
  "type": "module",
  "main": "charting_library.cjs.js",
  "module": "charting_library.esm.js",
  "types": "charting_library.d.ts"
}

import { widget } from "../charting_library/charting_library";

What does this charting_library part refer to? When I try click+ctrl on the import statement it points to charting_library.d.ts file. I think that is the reason for this error. If so how can I avoid that?

Answer 1

Try to remove the 2nd charting_library string at import statement: https://github.com/tradingview/charting-library-examples/issues/86#issuecomment-727867852