Chalk: Whats the trick for getting chalk workging with TS

[mfour-merickson]

I have a very simple test script

src/index.ts

import * as chalk from 'chalk'

console.log(`${chalk.green('Hello TypeScript world!')}`)

tsconfig.json

After building with webpack 4, everything appears to work, but the chalked output is not honoring color definition

[mfour-merickson]

I have perused the internet for ANY working example, but not having much luck. While the examples show that chalk should work as expected, I am not having much luck.

It seems to me, the working examples are using an older version of chalk (ie around version 2.2) but with the latest chalk they produce the same issues

The following works

// import * as chalk from 'chalk';
const chalk = require('chalk')

let message: string;
message = 'Hello World!';

console.log(chalk.blue(message));

but if I attempt to use import instead of require it produces

[Qix-]

That's strange. My knowledge of TS is limited - given that we've had quite a few people contribute TS definitions to the project, I'd guess it's something related to your environment or invocation rather than TS+Chalk in general.

Maybe some of the others can chime in here, cc @calebboyd @SamVerschueren

[mfour-merickson]

In case anybody wants to review a sample repo, you can see it here

https://github.com/mikeerickson/ts-loader-chalk-issue.git

[SamVerschueren]

This is not an issue with TypeScript, it works perfectly fine. This is a problem with Webpack. Chalk is using supports-color right here. When compiling with Webpack, it compiles to the following import

const stdoutColor = __webpack_require__(/*! supports-color */ "./node_modules/supports-color/browser.js").stdout;

Notice the browser.js import which off course doesn't support colors. My Webpack knowledge is fairly limited, so no idea how you can fix this.

[SamVerschueren]

Oh, apparently it's as simple as setting the target in your webpack.config.js to node.

var path = require('path');

module.exports = {
    entry: './src/index.ts',
    devtool: 'inline-source-map',
    target: 'node',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                use: 'ts-loader',
                test: /\.ts?$/
            }
        ]
    }
}

Sidenote: The correct import for Chalk in TypeScript is import chalk from 'chalk';. It comes bundled with TypeScript type definitions so you don't need to do anything extra for the typings to work. You don't need to add something to tsconfig.json like you did.

[Qix-]

Thanks @SamVerschueren <3

Going to close this as resolved - please let me know if that's not the case @mfour-merickson!

[mfour-merickson]

@SamVerschueren Oh my goodness, what a simple little fix, how did you manage to figure this one out. It was driving me bonkers! Thanks a ton!

And yes @Qix- this can indeed be closes (as it has been)

Thanks gang!

[tmorell]

I am not using it with webpack. chalk is exported as default by the module, so it should be imported using:
import chalk from "chalk";