0

I am running an easy Sharepoint Framework project in Visual Studio Code:

I have this structure:

enter image description here

My files are as follows: ComplexCalculator.ts

export class ComplexCalculator {
  public sqr(v1: number): number {
    return v1*v1;
  }

  public multiply(v1:number, v2:number): number {
    return v1*v2;
  }
}

EasyCalculator.ts

export class EasyCalculator {
  public sum(v1: number, v2: number): number {
    return v1 + v2;
  }

  public subtraction(v1: number, v2: number): number {
    return v1 - v2;
  }
}

Calculator.ts

export * from './ComplexCalculator';
export * from './EasyCalculator';

Calculator.manifest.json

{
  "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
  "id": "8de800b0-6a4f-4cb0-bf75-62c32e6ea66b",
  "componentType": "Library",
  "version": "0.0.1",
  "manifestVersion": 2
}

On my config.json I have this:

{
  "entries": [
    {
      "entry": "./lib/webparts/librarysample/LibrarysampleWebPart.js",
      "manifest": "./src/webparts/librarysample/LibrarysampleWebPart.manifest.json",
      "outputPath": "./dist/librarysample.bundle.js"
    },
     {
      "entry": "./lib/libraries/calculator/Calculator.js",
      "manifest": "./src/libraries/calculator/Calculator.manifest.json",
      "outputPath": "./dist/calculator.bundle.js"
    }
  ],
  "externals": {
    "@microsoft/sp-client-base": "node_modules/@microsoft/sp-client-base/dist/sp-client-base.js",
    "@microsoft/sp-client-preview": "node_modules/@microsoft/sp-client-preview/dist/sp-client-preview.js",
    "@microsoft/sp-lodash-subset": "node_modules/@microsoft/sp-lodash-subset/dist/sp-lodash-subset.js",
    "office-ui-fabric-react": "node_modules/office-ui-fabric-react/dist/office-ui-fabric-react.js",
    "react": "node_modules/react/dist/react.min.js",
    "react-dom": "node_modules/react-dom/dist/react-dom.min.js",
    "react-dom/server": "node_modules/react-dom/dist/react-dom-server.min.js",
    "calculator": "./dist/calculator.bundle.js"
  },
  "localizedResources": {
    "librarysampleStrings": "webparts/librarysample/loc/{locale}.js"
  }
}

and finally on my gulpfile.js

const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
var through = require('through2'),
    util = require('gulp-util'),
    spawn = require('child_process').spawn,
    clean = require('gulp-clean'),
    ts = require('gulp-typescript');

build.initialize(gulp);

var libsPath = 'lib/libraries';
var srcPath = 'src/libraries';
var calculatorLibraryFolder = 'calculator';

gulp.task('watch-calculator-lib', (cb) => {
  var watcher = gulp.watch(`${srcPath}/${calculatorLibraryFolder}/**/*.ts`, ['update-calculator-typings']);
  watcher.on('change', (event) => {
    console.log(`File ${event.path} was ${event.type}, Rebuilding library typings...`);
  });
});

gulp.task('update-calculator-typings', [
  'update-calculator-typings:clean-old-typings',
  'update-calculator-typings:get-latest-typings',
  'update-calculator-typings:build-lib-typings'
], () => {
});

gulp.task('update-calculator-typings:clean-old-typings', () => {
  return gulp.src(`${libsPath}/${calculatorLibraryFolder}/**`, { read: false })
    .pipe(clean());
});

gulp.task('update-calculator-typings:get-latest-typings', ['update-calculator-typings:clean-old-typings'], () => {
  var tsResult = gulp.src(`${srcPath}/${calculatorLibraryFolder}/**/*.ts`)
    .pipe(ts({
      outDir: `${libsPath}/${calculatorLibraryFolder}`,
      module: 'umd',
      declaration: true
    }));
  return tsResult.dts.pipe(gulp.dest(`${libsPath}/${calculatorLibraryFolder}`));
});

gulp.task('update-calculator-typings:build-lib-typings', ['update-calculator-typings:get-latest-typings'], () => {
  return gulp.src(`${libsPath}/${calculatorLibraryFolder}/**/*.d.ts`)
    .pipe(updateLibTypings('calculator.d.ts'))
    .pipe(gulp.dest('./typings'));
});

var updateLibTypings = function (typingsFilePath, opt) {
  var typings = ["declare module 'calculator' {"];
  var latestFile;

  function processTypings(file, encoding, cb) {
    if (file.isNull() || file.isStream()) {
      cb();
      return;
    }

    latestFile = file;

    var contents = file.contents.toString('utf8');
    if (contents.indexOf('export declare class ') === -1) {
      cb();
      return;
    }

    contents = contents.replace('export declare class ', 'class ');
    typings.push(contents);
    cb();
  }

  function endStream(cb) {
    if (!latestFile) {
      cb();
      return;
    }

    typings.push('}');

    var file = latestFile.clone({ contents: false });
    file.path = latestFile.base + typingsFilePath;
    file.contents = new Buffer(typings.join('\r\n'));
    this.push(file)
    cb();
  }

  return through.obj(processTypings, endStream);
}

the typings file is generated correctly on the dist folder calculator.d.ts

declare module 'calculator' {
class ComplexCalculator {
    sqr(v1: number): number;
    multiply(v1: number, v2: number): number;
}

class EasyCalculator {
    sum(v1: number, v2: number): number;
    subtraction(v1: number, v2: number): number;
}

}

However, when I try to reference it into my webpart file

import * as calculator from 'calculator';

and then I try to compile

I get this error

Error - typescript - src/webparts/librarysample/LibrarysampleWebPart.ts(13,29): error TS2307: Cannot find module 'calculator'.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.