CODEWITHSUNDEEP
typescriptwebpack
Ashley Coolman
Ashley Coolman

Reputation: 11585

Using file-loader with es6 modules and typescript in webpack

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'.

Upvotes: 9

Views: 11134

Answers (3)

basarat
basarat

Reputation: 275849

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

Upvotes: 4

user310988
user310988

Reputation:

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

Upvotes: 8

alex
alex

Reputation: 2036

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

Upvotes: 12

Related Questions