9

webpack.config.js:

resolveLoader: { 
    alias: {
        'copy': 'file-loader?name=[path][name].[ext]&context=./src',
    }
},

When I was using javascript, this worked:

entry.js:

 var index = require("copy!../src/index.html");

But I have moved to typescript, using (ts-loader), so I slightly modified what I was doing in entry.ts:

import * as index from 'copy!index.html';

but this now gives me an error:

ERROR in ./src/entry.ts
(3,24): error TS2307: Cannot find module 'copy!../src/index.html'.
Improve this question

3 Answers 3

Reset to default
12

With TypeScript 2 you can have wildcard module declarations:

declare module "*!text" {
    const content: string;
    export default content;
}
// Some do it the other way around.
declare module "json!*" {
    const value: any;
    export default value;
}

Now you can import things that match "*!text" or "json!*".

import fileContent from "./xyz.txt!text";
import data from "json!http://example.com/data.json";
console.log(data, fileContent);
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

And where do I place these wildcard module declarations?
placing it in a file named index.d.ts works for me. Not sure if module declarations can be placed to other locations too.
When I use this technique, I am unable to get compile-time errors for missing files. For example I can do import totallyFake from './totally/fake/file.txt';, and my React app with TS will compile no problem, despite the fact that that file doesn't exist. Which means I'm no better off than if I just plopped the file in the /public directory and used <a href='/path/to/file.txt'></a>. Anyone know of a way to get these imports working in a way that makes TS happy, and also ensures that the file exists?
8

alex's answer is a great one, and is very flexible.

I came across an alternative which is more specific to a file type, so it's less flexible, but doesn't require prefixes/suffixes.

  1. Create a file with declare module '*.png'
  2. Import with import * as logo from "./ss-logo-transparent.png";
Improve this answer

1 Comment

When I use this technique, I am unable to get compile-time errors for missing files. For example I can do import totallyFake from './totally/fake/file.txt';, and my React app with TS will compile no problem, despite the fact that that file doesn't exist. Which means I'm no better off than if I just plopped the file in the /public directory and used <a href='/path/to/file.txt'></a>. Anyone know of a way to get these imports working in a way that makes TS happy, and also ensures that the file exists?
4

Cannot find module 'copy!../src/index.html'.

External modules not written in TypeScript must be declared.

Quick Fix

just use the require function as defined here : https://github.com/TypeStrong/ts-loader#code-splitting-and-loading-other-resources

Code: 

declare var require: {
  <T>(path: string): T;
  (paths: string[], callback: (...modules: any[]) => void): void;
  ensure: (
    paths: string[],
    callback: (require: <T>(path: string) => T) => void
  ) => void;
};
Improve this answer

1 Comment

@AndyJ fixed link and added content from link as well

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.