Problem in typescript:[Could not find a declaration file for module 'react-highlight-within-textarea']

[sreeragrnandan]

When importing HighlightWithinTextarea from package react-highlight-within-textarea in typescript. I am getting an error as:

Could not find a declaration file for module 'react-highlight-within-textarea'. 'C:/Users/UserName/Desktop/React/my-app/node_modules/react-highlight-within-textarea/lib/index.js' implicitly has an 'any' type. Try npm i --save-dev @types/react-highlight-within-textarea if it exists or add a new declaration (.d.ts) file containing declare module 'react-highlight-within-textarea';

can anyone please make this wonderful package work in typescript too

[bonafideduck]

@sreeragrnandan, I've added typescript directly into RHWTA in the 3.0.0-alpha release. Let me know if that helps.

[mirkolenz]

I just updated to 3.0.0-alpha and am not able to import the component. This is my import statement:

import { HighlightWithinTextarea } from "react-highlight-within-textarea";

I get the following error:

ERROR in ./src/components/Resources.tsx 296:24-47
export 'HighlightWithinTextarea' (imported as 'HighlightWithinTextarea') was not found in 'react-highlight-within-textarea' (possible exports: default)
 @ ./src/App.tsx 14:0-47 44:39-48
 @ ./src/index.tsx 18:0-24 70:43-46

ERROR in ./node_modules/react-highlight-within-textarea/es/index.js 1:0-64
Module not found: Error: Can't resolve './HighlightWithinTextarea' in './node_modules/react-highlight-within-textarea/es'
 @ ./src/components/Resources.tsx 15:0-74 296:24-47
 @ ./src/App.tsx 14:0-47 44:39-48
 @ ./src/index.tsx 18:0-24 70:43-46

ERROR in ./node_modules/react-highlight-within-textarea/es/index.js 3:0-72
Module not found: Error: Can't resolve './HighlightWithinTextareaCC' in './node_modules/react-highlight-within-textarea/es'
 @ ./src/components/Resources.tsx 15:0-74 296:24-47
 @ ./src/App.tsx 14:0-47 44:39-48
 @ ./src/index.tsx 18:0-24 70:43-46

ERROR in ./node_modules/react-highlight-within-textarea/es/index.js 4:0-40
Module not found: Error: Can't resolve './Selection' in './node_modules/react-highlight-within-textarea/es'
 @ ./src/components/Resources.tsx 15:0-74 296:24-47
 @ ./src/App.tsx 14:0-47 44:39-48
 @ ./src/index.tsx 18:0-24 70:43-46

ERROR in ./node_modules/react-highlight-within-textarea/es/index.js 5:0-52
Module not found: Error: Can't resolve './createDecorator' in './node_modules/react-highlight-within-textarea/es'
 @ ./src/components/Resources.tsx 15:0-74 296:24-47
 @ ./src/App.tsx 14:0-47 44:39-48
 @ ./src/index.tsx 18:0-24 70:43-46

4 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

In addition, the TypeScript definitions are also not picked up:

webpack 5.70.0 compiled with 5 errors in 17338 ms
ERROR in src/components/Resources.tsx:14:41
TS7016: Could not find a declaration file for module 'react-highlight-within-textarea'. './node_modules/react-highlight-within-textarea/lib/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/react-highlight-within-textarea` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-highlight-within-textarea';`
  > 14 | import { HighlightWithinTextarea } from "react-highlight-within-textarea";

Maybe this issue is related to the way you package the extension for npm?

[bonafideduck]

I may have needed to put the exports somewhere like an index file for the module. I wont be able to look at this until two weekends from now.

[bonafideduck]

Try importing it as default. (Without {} ) and see if that helps.

[mirkolenz]

I think I also tried that and it did not work. I will double-check that tomorrow.

[bonafideduck]

I wonder if https://github.com/bonafideduck/react-highlight-within-textarea/blob/0cebc4c0e2d6c3f4701aba09a1672bd0f9ce7c12/src/index.js#L1 should have had “import * as ReactHighlightWithinTextarea. I’ve run into issues in another ts project when not.

[mirkolenz]

Try importing it as default. (Without {} ) and see if that helps.

I just tried it out again and get the following errors

Compiled with problems:X

ERROR in ./node_modules/react-highlight-within-textarea/es/index.js 1:0-64

Module not found: Error: Can't resolve './HighlightWithinTextarea' in './node_modules/react-highlight-within-textarea/es'


ERROR in ./node_modules/react-highlight-within-textarea/es/index.js 3:0-72

Module not found: Error: Can't resolve './HighlightWithinTextareaCC' in './node_modules/react-highlight-within-textarea/es'


ERROR in ./node_modules/react-highlight-within-textarea/es/index.js 4:0-40

Module not found: Error: Can't resolve './Selection' in './node_modules/react-highlight-within-textarea/es'


ERROR in ./node_modules/react-highlight-within-textarea/es/index.js 5:0-52

Module not found: Error: Can't resolve './createDecorator' in './node_modules/react-highlight-within-textarea/es'

[mirkolenz]

I also had a look at the package structure when downloaded from npm. It seems that the necessary files are not included.

In the folder es, there is only the file index.js with the following content:

import HighlightWithinTextarea from "./HighlightWithinTextarea";
export { HighlightWithinTextarea };
export { HighlightWithinTextareaCC } from "./HighlightWithinTextareaCC";
export { Selection } from "./Selection";
export { createDecorator } from "./createDecorator";
export default HighlightWithinTextarea;

Similarity, the folder lib only contains index.js with the following content:

"use strict";

exports.__esModule = true;
exports["default"] = exports.createDecorator = exports.Selection = exports.HighlightWithinTextareaCC = void 0;

var _HighlightWithinTextarea = _interopRequireDefault(require("./HighlightWithinTextarea"));

exports.HighlightWithinTextarea = _HighlightWithinTextarea["default"];

var _HighlightWithinTextareaCC = require("./HighlightWithinTextareaCC");

exports.HighlightWithinTextareaCC = _HighlightWithinTextareaCC.HighlightWithinTextareaCC;

var _Selection = require("./Selection");

exports.Selection = _Selection.Selection;

var _createDecorator = require("./createDecorator");

exports.createDecorator = _createDecorator.createDecorator;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var _default = _HighlightWithinTextarea["default"];
exports["default"] = _default;

Thus, it is no surprise that we get such errors: The relative imports cannot be resolved due to the fact that the files are not available. I have not much experience with packaging apps for npm, but my assumption would be that the newly created TypeScript files are not picked up by your current publishing workflow.

[robinsrk]

I am getting this error after declaring the module in alltypes.d.ts

Module not found: Can't resolve './HighlightWithinTextarea' in '/home/robin/Development/web/Partake/Flinbo/node_modules/react-highlight-within-textarea/es'

How to fix it?

[bonafideduck]

@MirkoLenz and @robinsrk, it turns out yarn start worked, but yarn build is quite broken. I'll have to fix that next. I also fixed the tagging such that 2.1.4 will still be delivered as latest to new users instead of 3.0.0-alpha.