Cannot use import statement in my TypeScript project

[gabalafou]

I recently added react-highlight-words to a TypeScript project, but when I tried to import it in the usual way, I got an error:

import Highlighter from "react-highlight-words";
// Highlighter ends up undefined at runtime

I tried rewording the import statement several different ways, but nothing worked. Eventually, I was able to import react-highlight-words via:

const Highlighter = require("react-highlight-words");

I am able to import other third-party React components with the import statement just fine - for example, react-json-view. So I wonder if it's an issue with my TypeScript configuration or if it's an issue with the way that react-highlight-words is packaged (or both).

Here's how my tsconfig.json file looks:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "lib": ["es6", "dom"],
    "noImplicitAny": true,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "jsx": "react",
    "paths": {
      "*": [
        "node_modules/*",
        "src/types/*"
      ]
    }
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "src/**/*.spec.ts",
    "src/**/*.test.ts",
  ]
}

Thanks!

[gabalafou]

Oh, and maybe the following info will be useful. If I do an import like so:

import * as Highlighter from "react-highlight-words";

Then if I print Highlighter to the console, this is what I get:

function Highlighter(_ref) {
      var _ref$activeClassName = _ref.activeClassName;
      var activeClassName = _ref$activeClassName === undefined ? '' : _ref$activeClassName;
      var _ref$activeIndex = _ref.activeIndex;
      var activeIndex = _ref$activeIndex === undefined ? -1 : _ref$activeIndex;
      var activeStyle = _ref.activeStyle;
      var autoEscape = _ref.autoEscape;
      var _ref$caseSensitive = _ref.caseSensitive;
      var caseSensitive = _ref$caseSensitive === undefined ? false : _ref$caseSensitive;
      var className = _ref.className;
      var findChunks = _ref.findChunks;
      var _ref$highlightClassName = _ref.highlightClassName;
      var highlightClassName = _ref$highlightClassName === undefined ? '' : _ref$highlightClassName;
      var _ref$highlightStyle = _ref.highlightStyle;
      var highlightStyle = _ref$highlightStyle === undefined ? {} : _ref$highlightStyle;
      var _ref$highlightTag = _ref.highlightTag;
      var highlightTag = _ref$highlightTag === undefined ? 'mark' : _ref$highlightTag;
      var sanitize = _ref.sanitize;
      var searchWords = _ref.searchWords;
      var textToHighlight = _ref.textToHighlight;
      var _ref$unhighlightClassName = _ref.unhighlightClassName;
      var unhighlightClassName = _ref$unhighlightClassName === undefined ? '' : _ref$unhighlightClassName;
      var unhighlightStyle = _ref.unhighlightStyle;

      var rest = _objectWithoutProperties(_ref, ['activeClassName', 'activeIndex', 'activeStyle', 'autoEscape', 'caseSensitive', 'className', 'findChunks', 'highlightClassName', 'highlightStyle', 'highlightTag', 'sanitize', 'searchWords', 'textToHighlight', 'unhighlightClassName', 'unhighlightStyle']);

      var chunks = (0, _highlightWordsCore.findAll)({
        autoEscape: autoEscape,
        caseSensitive: caseSensitive,
        findChunks: findChunks,
        sanitize: sanitize,
        searchWords: searchWords,
        textToHighlight: textToHighlight
      });
      var HighlightTag = highlightTag;
      var highlightIndex = -1;
      var highlightClassNames = '';
      var highlightStyles = undefined;

      var lowercaseProps = function lowercaseProps(object) {
        var mapped = {};
        for (var key in object) {
          mapped[key.toLowerCase()] = object[key];
        }
        return mapped;
      };
      var memoizedLowercaseProps = (0, _memoizeOne2['default'])(lowercaseProps);

      return (0, _react.createElement)('span', _extends({
        className: className
      }, rest, {
        children: chunks.map(function (chunk, index) {
          var text = textToHighlight.substr(chunk.start, chunk.end - chunk.start);

          if (chunk.highlight) {
            highlightIndex++;

            var highlightClass = undefined;
            if (typeof highlightClassName === 'object') {
              if (!caseSensitive) {
                highlightClassName = memoizedLowercaseProps(highlightClassName);
                highlightClass = highlightClassName[text.toLowerCase()];
              } else {
                highlightClass = highlightClassName[text];
              }
            } else {
              highlightClass = highlightClassName;
            }

            var isActive = highlightIndex === +activeIndex;

            highlightClassNames = highlightClass + ' ' + (isActive ? activeClassName : '');
            highlightStyles = isActive === true && activeStyle != null ? Object.assign({}, highlightStyle, activeStyle) : highlightStyle;

            var props = {
              children: text,
              className: highlightClassNames,
              key: index,
              style: highlightStyles
            };

            // Don't attach arbitrary props to DOM elements; this triggers React DEV warnings (https://fb.me/react-unknown-prop)
            // Only pass through the highlightIndex attribute for custom components.
            if (typeof HighlightTag !== 'string') {
              props.highlightIndex = highlightIndex;
            }

            return (0, _react.createElement)(HighlightTag, props);
          } else {
            return (0, _react.createElement)('span', {
              children: text,
              className: unhighlightClassName,
              key: index,
              style: unhighlightStyle
            });
          }
        })
      }));
    }

[teuber789]

+1. I'm getting the same thing.

[teuber789]

More information:

I ran npm i --save react-highlight-words as specified in the readme. I then added the following line to the top of the file in question:

import {Highlighter} from 'react-highlight-words';

When I do so, vscode gives me the following error:

[teuber789]

@bvaughn or @gabalafou any updates on this? It's been open for a while.

[jglee96]

npm install --save-dev @types/react-highlight-words ??

[bvaughn]

Yup, I think using the DefinitelyTyped definitions would be the way to go: https://www.npmjs.com/package/@types/react-highlight-words