chalk/chalk

ReferenceError: navigator is not defined

yayapao opened this issue · 9 comments

I found chalk can't work fine on Node.js runtime with Rollup.

Environment:
Node.js v16.16.0
chalk: ^5.0.1
rollup v2.77.0

Here is steps to reproduce the issue:

  1. Create a src/test.ts
import chalk from 'chalk'

async function testChalk() {
  console.log(chalk.cyanBright('Hello World!'))
}

export default testChalk
  1. Config rollup.config.js
import typescript from '@rollup/plugin-typescript'
import commonjs from '@rollup/plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'
import path from 'node:path'
import { defineConfig } from 'rollup'

const defaultOptions = defineConfig({
  input: path.resolve(__dirname, 'src/test.ts'),
  output: {
    dir: path.resolve(__dirname, 'dist'),
    format: 'esm',
  },
  plugins: [typescript(), resolve(), commonjs()],
})

export default () => {
  return defineConfig([defaultOptions])
}
  1. Test node testChalk.mjs
import testChalk from '../dist/testEnvinfo.mjs'
testChalk()

And throw an Error like below:

file:///[execute file path]/testChalk.mjs:221
const isBlinkBasedBrowser = /\b(Chrome|Chromium)\//.test(navigator.userAgent);
                                                         ^

ReferenceError: navigator is not defined
Qix- commented

Seems like a bug in Rollup, please open an issue with them.

It's choosing to bundle the default vendor import rather than the node import.

https://github.com/chalk/chalk/blob/main/package.json#L14

Seems like a bug in Rollup, please open an issue with them.

It's choosing to bundle the default vendor import rather than the node import.

https://github.com/chalk/chalk/blob/main/package.json#L14

@Qix- @yayapao This is not Rollup problem.

After I disabled @rollup/plugin-node-resolve, I recovered correctly.

Qix- commented

The point was more "this is not a chalk problem". Glad you got it working though 👍.

@Aiden-FE I just ran into this same issue - however, I cannot simply disable @rollup/plugin-node-resolve because I have other dependencies. Is there anything else to try, perhaps?

@Aiden-FE I just ran into this same issue - however, I cannot simply disable @rollup/plugin-node-resolve because I have other dependencies. Is there anything else to try, perhaps?

Maybe picocolor can solve your problem. Or just config external: ['chalk'] in rollup.config.js.

@Aiden-FE I just ran into this same issue - however, I cannot simply disable @rollup/plugin-node-resolve because I have other dependencies. Is there anything else to try, perhaps?

I'm also looking for a better way.

I found this answer to be working for me: SBoudrias/Inquirer.js#1153 (comment)

I found this answer to be working for me: SBoudrias/Inquirer.js#1153 (comment)

It can solve my problem,thank you very much for shared.

Qix- commented

I'm sorry but this isn't a chalk problem. This is Rollup selecting the incorrect source file based on package.json contents. There's nothing we can do, you need to open relevant issues with the rollup folks.