Encountered an error in React where the declaration file for a module could not be located

New to Typescript and trying to incorporate a splitter into my project. I'm utilizing SplitPane from "react-split-pane/lib/SplitPane" and Pane from "react-split-pane/lib/Pane" in my Typescript project, but encountering an error:

Could not find a declaration file for module 'react-split-pane/lib/Pane'. 'C:/.../node_modules/react-split-pane/lib/Pane.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/react-split-pane` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-split-pane/lib/Pane';`ts(7016)

Although it is functioning correctly without any issues, the error persists. The recommendation to try '@types/react-split-pane' is no longer viable as the package has been deprecated.

As mentioned in comments, I imported it as follows:

import SplitPane from "react-split-pane/lib/SplitPane";

import Pane from "react-split-pane/lib/Pane";

Any suggestions on how to resolve this error?

English is not my native language so there may be mistakes present.

Here is a link to my splitpane module:

https://i.stack.imgur.com/wXO2D.jpg

javascriptcssreactjstypescriptmaterial-ui

Answer №1

My approach to importing it is like this: import SplitPane from react-split-pane/lib/SplitPane; import Pane from react-split-pane/lib/Pane;

It's important to never delve into the directory structure of libraries for imports unless explicitly instructed in the documentation.

As per the index file of the library found here, the correct way to import the values is different. The library exports as follows:

export default SplitPane;
export { Pane };

This means that you should actually import these two values like so:

import SplitPane, { Pane } from 'react-split-pane'

Check out a live demo in this TypeScript Playground.

You can also see this setup in action in this code sandbox project:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Verifying with VueJS and Jest: How to test if a component's method calls an imported function

I've created a VueJS 2 component that has the following structure: <template> <div> <button @click="onFavorite"> Add to favorites </button> </div> </template> <script> import { tra ...

javascriptvue.jsvuejs2jestjs

Full-screen Bootstrap burger navigation menu

Check out this code snippet on boot ply: I'm trying to create a full-screen menu with the same effect as the burger menu for non-mobile screens. Currently, the burger menu only shows up on mobile devices. Does anyone know how I can achieve this? Than ...

cssangularjstwitter-bootstrap

Switching out an element within a constrained array causes a momentary disappearance of the item

My playlist features artwork images that can be clicked. Upon clicking an image, the current track is replaced by the new selection in the array. An issue arises when Ember re-renders the items, causing a brief moment where the replaced element disappears ...

jqueryhtmlcssember.js

Tips for creating a fixed AppBar and table headers that are stacked underneath each other on a single page while scrolling, using Material UI

Check out these screenshots of the AppBar and Table: View screenshot at the top of the page. Screenshot when scrolling down Take a look at the code for the AppBar and Table: <AppBar position="static" style = {{background : "#00009A"}}> ...

javascriptnode.jsreactjsmaterial-ui

Customizing the arrow icon in Material Design Android Text fields / TextInputLayout

Can the icon of TextInputLayout that is highlighted in yellow be customized? https://i.stack.imgur.com/t2PJu.png ...

androidxmlmaterial-uimaterial-design

useEffect invoked repeatedly

I've come across this reactjs code: import React, { useState, useEffect } from 'react' const Test = () => { const [counter, setCounter] = useState(0) useEffect(() => { const data = localStorage.getItem('counter&a ...

reactjsreact-hooks

Tips for leveraging Backbone.js for creating dynamic single page websites

I am eager to create my own personal website with a unique functionality similar to this example: The idea is to have the entire website contained within a single HTML page, where clicking on a navigation item will dynamically load only the necessary info ...

javascriptjqueryhtmlnode.jsbackbone.js

Transform a literal string type definition into a string value (similar to the typeof operator), or is it the other way around in TypeScript?

Is there a way to retrieve the string value of a string literal type without having to define it twice, similar to the typeof operator in C#? myStringLiteral: 'STRING TYPE'; myString: string = typeof(myStringLiteral); // I want myString to be e ...

stringtypescripttypesconstants

CSS Issue with Background Image not Fully Covering Viewport Width

Why isn't the CSS background covering the entire viewport width when using media query @media (max-width: 62.5em)? I've attempted to use background-size: cover, background-position: top left, and background-repeat: no-repeat, but nothing seems t ...

htmlcssbackgroundmedia-queriesbackground-image

Unlocking the power of asynchronous methods within the useEffect() hook

When attempting to fetch an API within a useEffect(), I encountered the following error: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. Here is the code snippet that caused the error: -API being fetched: ex ...

node.jsreactjstypescriptnext.js

Retrieve the most recent tweet from a user's timeline using the twit npm package

I need help setting up a discord bot to send notifications for new tweets. Currently, I've implemented T.stream('statuses/filter', { follow : ['798934987978510337'] });, but it's also displaying mentions. Is there a way to o ...

javascriptnode.jsnpmtwitter

Updating NPM packages versions is currently restricted

I'm in the process of creating a Next.JS application using create-next-app. However, I've noticed that in the package.json file it lists the following dependencies: "eslint": "8.43.0", "eslint-config-next": &quo ...

javascriptnode.jsnpmnext.js

Resetting a JQuery button to its initial state

I have a button that, when clicked, rotates to 25deg thanks to Jquery. Now, I want it so that if I click the button again, it returns to its original position. Here is what I have tried: $(document).ready(function() { $(function() { ...

javascriptjquery

What causes the element to remain visible despite the changes made to the v-show attribute?

<!DOCTYPE html> <html> <head> <title>test</title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app"> <p v-show="show&qu ...

javascripthtmlvue.jsweb

Modal containing react-select dropdown opens successfully

I am currently facing an issue with my custom modal that contains 2 react-select components. The modal body is set up to auto scroll when the content exceeds its size, but the problem arises when the dropdowns of the react-select components open within the ...

javascriptreactjsreact-selectcss-modules

toggle back and forth between two div elements

I am trying to create a toggle effect between two divs, where clicking on one will change its border and header color to red while the other div disappears. I have tried using an IF statement in my JavaScript code, but it is not working as expected. Can so ...

javascriptjqueryhtmlcss

Issue: spawn command UNKNOWN while running npx create-react-app

Encountering an error message in the command prompt while trying to create a React app. Here are some details: Node version: v16.16.0 Npm version: 8.15.1 Operating system: Windows 11 Attempted solutions include running the command in PowerShell, cleari ...

javascriptnode.jsreactjsnpmcreate-react-app

Certain javascript files have had illegal characters mistakenly added to them

There seems to be an issue with the js files or server on certain pages, as they are not loading in Firefox: with firefox: SyntaxError: illegal character 癡爠浥湵楤猠㵛≶敲瑩捡汭敮產崻 ⽅湴敲⁩搨猩映啌敮畳Ⱐ獥灡牡瑥 ...

javajavascripthtmltomcatstruts2

Displaying multiple lines in an alert box using Angular 8

I need assistance in displaying an alert message when the user selects a checkbox. We have a shared alert service component that is being utilized by every module. My current code snippet is as follows: if(this.checkboxvalue) { this.al ...

angulartypescript

Prioritize the first child in Flexbox by truncating its text before the second

I am working with a flex-box container named .search-bar, which contains two divs with text, labeled as .title. My goal is to make the second child take up any extra space available and only start ellipsizing when there is no more space left for the first ...

cssflexboxellipsis