CODEWITHSUNDEEP
typescriptwebpacktypeszurb-foundation
John Manko
John Manko

Reputation: 1908

foundation-sites: 'foundation.d.ts' is not a module

I just updated my Angular / Foundation project to use node.js v9.3.0. Everything worked fine with v8.4.0. I'm now getting an error when webpack tries to build.

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.

The file foundation.d.ts does indeed exist. I even upgraded foundation-sites from v6.4.3 to v6.4.4-rc1, but that didn't resolve the problem.

Here is the import in app.component.ts:

import * as Foundation from 'foundation-sites';

Here are my package.json dependencies:

  "dependencies": {
    "@angular/animations": "^5.1.3",
    "@angular/common": "^5.1.3",
    "@angular/compiler": "^5.1.3",
    "@angular/core": "^5.1.3",
    "@angular/forms": "^5.1.3",
    "@angular/http": "^5.1.3",
    "@angular/platform-browser": "^5.1.3",
    "@angular/platform-browser-dynamic": "^5.1.3",
    "@angular/router": "^5.1.3",
    "big.js": "^5.0.3",
    "chart.js": "^2.7.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.3",
    "font-awesome": "^4.7.0",
    "foundation-sites": "^6.4.3",
    "fullcalendar": "^3.8.0",
    "jquery": "^3.2.1",
    "lodash.merge": "^4.6.0",
    "lz-string": "^1.4.4",
    "moment-timezone": "^0.5.14",
    "normalize.css": "^7.0.0",
    "primeng": "^5.0.2",
    "quill": "^1.3.4",
    "rxjs": "^5.5.6",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.3",
    "@angular/compiler-cli": "^5.1.3",
    "@angular/language-service": "^5.1.3",
    "@types/big.js": "^4.0.2",
    "@types/jasmine": "^2.8.3",
    "@types/jquery": "^3.2.17",
    "@types/node": "^9.3.0",
    "chalk": "^2.3.0",
    "codelyzer": "^4.0.2",
    "copy-paste": "^1.3.0",
    "del": "^3.0.0",
    "foundation-icons": "^1.0.1",
    "glob": "^7.1.2",
    "gulp": "^3.9.1",
    "gulp-sass": "^3.1.0",
    "gulp-shell": "^0.6.5",
    "jasmine-core": "^2.8.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^2.0.0",
    "karma-chrome-launcher": "^2.1.1",
    "karma-cli": "^1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.3",
    "karma-jasmine": "^1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lodash.mergewith": "^4.6.0",
    "moment": "^2.20.1",
    "node-sass-tilde-importer": "^1.0.1",
    "path": "^0.12.7",
    "properties-reader": "^0.0.16",
    "protractor": "^5.2.2",
    "readline-sync": "^1.4.7",
    "request": "^2.83.0",
    "sass-flex-mixin": "^1.0.3",
    "ts-node": "^4.1.0",
    "tslint": "^5.8.0",
    "typescript": "^2.5.3",
    "xml2js": "^0.4.19"
  }

Upvotes: 3

Views: 1071

Answers (1)

borracciaBlu
borracciaBlu

Reputation: 4225

I got two ways It did work.

Method require: 

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

Method import: 

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

To see all the possibles method you have available got see /path/to/node_modules/foundation-sites/dist/js/foundation.d.ts.

Upvotes: 1

Related Questions