I have upgraded from yeoman 1.3.4 to 1.4.0 and I cannot import mystrings.d.ts

[Nigel Price]

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.

[#2 · Accepted solution]

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;
}

change

import * as strings from reactSearchBoxStrings

to 

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

and finally add 

var strings: IReactSearchBoxStrings;

Then it all compiles and links.

Regards

Nigel