microsoft / microsoft/TypeScript

Interoperability with Webpack import statements

Open
#38,094 1 comment 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Needs Proposal Suggestion
Dominant language
Go
Stars
111k
Forks
14.3k
Avg merge
2d 4h
Merged PRs (30d)
132

Description

Hello!

First of all, thank you for your hard and amazing work.

The thing is, that Webpack supports more complex import statements than the standard. For example it defines "query" part of the import statements, which looks like this:

import { something } from './path/to/module?query';

The ./path/to/module is an actual filesystem path to a referenced module, however, the ?query is a query part. It allows to configure different loaders for different queries, so the same module could be treated differently in different import statements.

For example import component from './component'; would import the default symbol from the ./component module normally, however, import component from './component?raw'; could be used to load the source code of the ./component file as a string and would put it into component variable (this must be configured in Webpack config). This allows to perform very powerful operations on various files and add it to the resulting bundle. We are using it to generate documentation for example.

The problem is that TypeScript doesn't understand these "extended" import statements and shows errors during type checking. We have to either put @ts-ignore on top of such imports or to use paths configuration option to redirect the compiler to a file containing, e.g.: export default '';.

If TypeScript would support interoperability with extended Webpack import statements it would be very useful in complex projects.

By the way, besides "queries", Webpack also allows to specify loaders inline.

What do you think?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue identifies Webpack query and inline-loader import statements but names no TypeScript files, tests, or entry points. Start by locating the module-resolution and type-checking paths, then determine how support would be specified and tested; done means these imports no longer produce type-checking errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, webpack
Domain
build-system, compilers
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.