It appears that 'foundation.d.ts' is not recognized as a module by foundation-sites

After updating my Angular / Foundation project to use node.js v9.3.0, I encountered an error during webpack build process. Everything was fine with v8.4.0.

ERROR in src/app/app.component.ts(9,29): error TS2306: File '/path/to/node_modules/foundation-sites/dist/js/foundation.d.ts' is not a module.

Even though the file foundation.d.ts does exist, upgrading from foundation-sites v6.4.3 to v6.4.4-rc1 did not solve the issue.

This is how the import is configured in app.component.ts:

import * as Foundation from 'foundation-sites';

Below are the dependencies listed in my package.json:

  "dependencies": {
    // List of dependencies here ...
  },
  "devDependencies": {
    // List of devDependencies here ...
  }
typescriptwebpacktypeszurb-foundation

Answer №1

I discovered two effective methods.

Necessary method: 

const Framework = require('foundation-sites');
new Framework.default.Tooltip($('.has-tip'), {});

Import method: 

import 'foundation';
new Foundation.Tooltip($('.has-tip'), {});

To explore all available methods, refer to 

/path/to/node_modules/foundation-sites/dist/js/foundation.d.ts
.

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

Unable to clear all checkboxes after deleting

In my application, there are 3 checkboxes along with a master checkbox that allows users to select or deselect all of them at once. Everything works fine with the master checkbox until I delete some rows from the table. After deleting data, I can check th ...

angulartypescriptangular-material

What steps can be taken to resolve the error message "Path must be a string. Received undefined" that is occurring in webpack4 with the copy-webpack-plugin?

I am currently working on setting up a separate file in webpack to handle the copying of static assets from the src folder to the web folder. Versions: node: 8.15.0 yarn: 1.13.0 webpack: 4.19.1 copy-webpack-plugin: 6.0.0 In my existing project structure, ...

javascriptnode.jssvgwebpackwebpack-4

Passing a value from an HTML template to a method within an Angular 4 component

Encountering an issue with Angular 4. HTML template markup includes a button: <td><a class="btn btn-danger" (click)="delete()"><i class="fa fa-trash"></i></a></td> Data is assigned to each td from a *ngFor, like {{ da ...

htmlangulartypescript

When employing HTTP GET within Angular 2, it prompts the retrieval of a response in my subsequent HTTP POST request for

Greetings! I am relatively new to Angular 2 and I am encountering some unexpected HTTP behavior. Below is my login method used to send an HTTP POST request to my backend server and retrieve a token. It is functioning properly. public login(username, pass ...

restangulartypescriptasynchronous

Tips for determining if a class has been declared in Typescript

When it comes to checking if a class (or any other element) exists in the global scope, Javascript offers a convenient method: typeof SomeUndeclaredOne === 'undefined' However, this approach doesn't translate well into TypeScript as it trig ...

typescript

Implementing raw static HTML files in webpack: a step-by-step guide

Recently, I created a basic template called test.html <div>raw text with content</div> All I'm trying to achieve is to import the raw file without any alterations For example: require('./test.html'); // This should return "&l ...

javascripthtmlnode.jsnpmwebpack

Converting JSON data into custom object types using TypeScript

Utilizing the AlphaVantage API, I am receiving a JSON response that looks like this: { "Meta Data": { "1. Information": "Intraday (5min) open, high, low, close prices and volume", "2. Symbol": &qu ...

jsontypescriptalpha-vantage

Concerns with combining key value pairs in Typescript Enums

Could you help me figure out how to properly implement an enum in my drop-down so that I can only display one value at a time? Currently, I am seeing both the key and the value in the list. This is my enum: export enum VMRole { "Kubemaster" = 0, "Kub ...

htmlangulartypescript

To achieve this, my goal is to have the reels start playing on a separate page when a user clicks on the designated image. I am currently working on a project that involves this

When a user clicks on the designated image, I want the reels to start playing on a separate page. In my main project, I have a reels project within it, with the reels project built in ReactJS and the main project in React TypeScript. For example, if a user ...

javascriptreactjstypescriptreact-typescript

"Exploring the Concept of Tuple Narrowing and Type

Is there anyone who can assist me in comprehending the scenario below: export function functionThatReturnsTurpleObjects(): | [{ a: number }, undefined] | [undefined, { a: number }] { if (Math.random() > 0.5) { return [undefined, { a: 1 }]; ...

typescript

SignalR Integration Issue in Angular2 (Typescript) - Import Troubleshooting

I've encountered some issues while trying to implement signalR in my Angular2-Typescript application. Previously, I had no trouble using it in an Angular 1 app. The problem seems to lie in the importing process. While I do have intellisense working, ...

angulartypescript

When running `npm test`, Mocha TS tests encounter failure, but the issue does not arise when executing them

When running tests in my Typescript nodejs project, I use the following command: mocha --compilers ts:ts-node/register,tsx:ts-node/register The tests run successfully with this command. However, when I try to run them using npm test, I encounter the foll ...

node.jstypescriptmocha.js

Configuring the React Typescript router to support username-based URLs should be done in a way that does not cause conflicts with other routes

I am looking to display a user's profile on a URL format such as www.domain.com/<userName> and load the component ShowProfile. I want to ensure that terms is not mistaken for a username, so if I visit www.domain.com/terms, I do not want to load ...

reactjstypescriptreact-router-v4

Enriching HtmlElement with a type property using TypeScript

Check out my TypeScript code snippet below: let script: HTMLElement = document.createElement("script"); script.appendChild(document.createTextNode(` { "json": "property" } `)); script.id = 'appContextModel'; document.body.appendChild(scr ...

angulartypescript

Displaying webpack errors within gulp is a simple process

My TypeScript project utilizes webpack for transpilation, and gulp for managing build tasks. Let's consider this simple task to illustrate my query: var webpack = require('webpack'); var webpackStream = require("webpack-stream"); gulp.task ...

typescriptwebpackgulp

Is there a way to prevent webpack from replacing process.env variables with their values during the build process?

Within one of my project files, I have the following snippet: const identifier = process.env.DBID; console.log('identifier', identifier); When I execute the command: cross-env PORT=4000 NODE_ENV=production WEBPACK_CONFIG=browser_prod,server_p ...

javascriptnode.jsreactjsnpmwebpack

What could be causing the Next.js error: WEBPACK_IMPORTED_MODULE function not being recognized?

I've hit a roadblock with an issue I can't seem to solve. I'm exporting a function that is supposed to provide the current authenticated user object, if available. I then use this user object to determine whether to add a navigation link. De ...

javascripttypescriptnext.jsamazon-cognito

Bring in the 'three' module using THREE

I am trying to implement 'THREE.js' with 'webpack', see below. THREE = require './three' //code + THREE.js -> webpack.js <script src = "webpack.js"></script> The above code is not functioning properly. <s ...

three.jswebpack

Is it possible to selectively disable the <span> tag in Angular?

I have encountered a situation where I need to dynamically disable a button and show a tooltip based on specific conditions in an Angular application. Here is the current code that I am using: <span *ngIf="(hourEnabled && theTest && ...

htmlangulartypescriptfrontend

Creating custom observables by utilizing ViewChildren event and void functions in Angular 12: A step-by-step guide

I am currently working on developing a typeahead feature that triggers a service call on keyup event as the user types in an input field. The challenge I face is that my input field is enclosed within an *ngIf block, which requires me to utilize ViewChildr ...

angulartypescriptrxjs