1

I have a file mystrings.d.ts which contains :-

  declare interface IReactSearchBoxStrings {
  PropertyPaneSearchOptions: string;
  BasicGroupName: string;
  DefaultSearchResultsPageUrlFieldLabel: string;
  EnableCustomSearchPlaceholderLabel: string;
  SearchLabel: string;
  CustomSearchPlaceholderModeOnAlert: string;
}


declare module 'reactSearchBoxStrings' {
  const strings: IReactSearchBoxStrings;
  export = strings;
}

I want to import the contents thus into ReactSearchBoxWebPart.ts:-

import * as strings from 'reactSearchBoxStrings';

It complies but when I want to ship it (gulp bundle --ship) I get this error :-

Module not found: Error: Can't resolve 'reactSearchBoxStrings' in 'C:/Users/xxxx/Documents/SPFx/Projects/1-4-0/react-search-box-webpart/lib/webparts/reactSearchBox'
resolve 'reactSearchBoxStrings' in 'C:/Users/xxxx/Documents/SPFx/Projects/1-4-0/react-search-box-webpart/lib/webparts/reactSearchBox'

This worked Ok when the project was built with yeoman 1.3.4, but does not work when the project is built with yeoman 1.4.0.

0

Try adding reference path over the import statement. Like below:

/// <reference path="..." />
import * as strings from 'reactSearchBoxStrings';

Sometimes Typescript is unable to resolve the relative path for the modules. In these cases reference path helps.

  • I tried this and got this message from typescript 2.4.2 :- [ts-npm-lint] Removed reference to 'loc/mystrings.d.ts' in lib\webparts\reactSearchBox\ReactSearchBoxWebPart.d.ts then got error [webpack] 'dist' followed by module not found – Nigel Price Jan 12 '18 at 14:55
0

This is due to yeoman 1.4.0 using TypeScript 2.4.2 which starts to phase out .d.ts and @Typings.

So to fix rename "MyStrings.d.ts" to IReactSearchBoxStrings,ts. Change the contents to

export interface IReactSearchBoxStrings {
  PropertyPaneSearchOptions: string;
  BasicGroupName: string;
  DefaultSearchResultsPageUrlFieldLabel: string;
  EnableCustomSearchPlaceholderLabel: string;
  SearchLabel: string;
  CustomSearchPlaceholderModeOnAlert: string;
}

In the calling file change :-

import * as strings from reactSearchBoxStrings

to

import { IReactSearchBoxStrings} from './components/IReactSearchBoxStrings';

and finally add

var strings: IReactSearchBoxStrings;

to the calling file.

Then it all compiles and links.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.