DEV Community

Akbar Ali
Akbar Ali

Posted on

Common JS library import in ES Module

#javascript #react #debugging

Spent a lot of time debugging this.

I was using react color library from NPM in a project and my project was in ES module scope.

Problem 

import reactColor from "react-color";
Enter fullscreen mode Exit fullscreen mode 
TypeError: Cannot read properties of undefined (reading 'displayName')
Enter fullscreen mode Exit fullscreen mode

Fix 

import * as reactColor from "react-color";
Enter fullscreen mode Exit fullscreen mode 
const { SketchPicker } = reactColor;
Enter fullscreen mode Exit fullscreen mode

Top comments (0)