tinycolor is not a function

[Babyfaceqian]

I just upgraded tinycolor@1.5.0 and code like this:

const tinycolor = require('tinycolor2');
tinycolor(color)

It comes tinycolor is not a function error, plz take a look.

[bgrins]

Oh no, I had tested this in #245 but apparently not well enough. I will roll this back in a 1.5.1 and we can try to debug. Can you share any more details or a STR?

[bgrins]

I'll deploy a new version out of 1.4.2-branch

[bgrins]

@Babyfaceqian I just published 1.5.1 which should match 1.4.2

[bgrins]

Specifically - this code is using 1.5.0: https://github.com/bgrins/test-tinycolor-upgrade/blob/2752fa3812ac0721eaed85b3979d82e082f6a832/cjs/package.json & https://github.com/bgrins/test-tinycolor-upgrade/blob/2752fa3812ac0721eaed85b3979d82e082f6a832/cjs/index.js.

[bgrins]

Can you confirm it's working again?

[bgrins]

Also, which version of node are you using?

[Babyfaceqian]

Also, which version of node are you using?

1.5.1 works. The node version is v14.20.1.

[bgrins]

@Babyfaceqian I set this test case up on https://runkit.com/embed/kzh7l5l3wocg and it seems to work. Any chance you can send me a test case / repo where this is failing?

[bgrins]

@Babyfaceqian I published a beta version as 1.6.0, can you please check that? https://www.npmjs.com/package/tinycolor2?activeTab=versions. It can be installed with npm install tinycolor2@beta

[bgrins]

Checked on runkit with the beta, going back to Node 4.0: https://runkit.com/embed/fdd1jg4lfegd

var tinycolor2 = require("tinycolor2@1.6.0-beta.2")
console.log(tinycolor2("red").toString());

Returns red as expected

[Babyfaceqian]

@bgrins Sorry for the late response. I was using tinycolor2 in browser side with commonjs syntax, it works before version 1.5.0. When upgraded to 1.5.0, it works with esmodule syntax, but doesn't work with commonjs syntax, that's why I got "tinycolor is not a function" error.

[bgrins]

Were you loading it with a CDN like https://cdn.jsdelivr.net/npm/tinycolor2/ or https://cdnjs.cloudflare.com/ajax/libs/tinycolor/, or directly from npm? And if from npm can you share what scripts you were using to build for the browser?

It's possible tinycolor2@1.6.0-beta.2 will fix it since I've moved tinycolor.js and dist/tinycolor-min.js into the npm directory.

[Babyfaceqian]

let me try tinycolor2@1.6.0-beta.2 first

[Babyfaceqian]

@bgrins tinycolor2@1.6.0-beta.2 doesn't works. And I am loading it with npm. I am using npm start script and see the error in browser when it's loaded.

// package.json
{
  "name": "@cy/bi",
  "displayName": "tools",
  "version": "1.0.2",
  "description": "tools",
  "author": "zhangqian",
  "componentType": "3",
  "scripts": {
    "start": "dumi dev",
    "docs:build": "dumi build",
    "docs:deploy": "gh-pages -d docs-dist",
    "build": "father-build",
    "deploy": "npm run docs:build && npm run docs:deploy",
    "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
    "test": "umi-test",
    "test:coverage": "umi-test --coverage",
    "prepublishOnly": "npm run build"
  },
  "main": "lib/index.js",
  "module": "es/index.js",
  "typings": "lib/index.d.ts",
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,less,md,json}": [
      "prettier --write"
    ],
    "*.ts?(x)": [
      "prettier --parser=typescript --write"
    ]
  },
  "peerDependencies": {
    "react": ">=16.8.0",
    "js-cookie": "*",
    "uuid": "*"
  },
  "devDependencies": {
    "@types/jest": "^27.0.3",
    "@umijs/test": "^3.0.5",
    "antd": "^4.22.4",
    "babel-eslint": "^9.0.0",
    "babel-plugin-import": "^1.13.5",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "dumi": "^1.1.0",
    "eslint": "^5.4.0",
    "eslint-config-ali": "^9.0.2",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-import-helpers": "^1.2.1",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.29.4",
    "father-build": "^1.17.2",
    "gh-pages": "^3.0.0",
    "js-cookie": "^3.0.1",
    "lint-staged": "^10.0.7",
    "prettier": "^2.2.1",
    "uuid": "^8.3.2",
    "yorkie": "^2.0.0"
  },
  "dependencies": {
    "tinycolor2": "^1.6.0-beta.2"
  }
}

// docs/index.md
const tinycolor = require('tinycolor2');
console.log(tinycolor("red").toString())

[Babyfaceqian]

@bgrins I saw below code in the package.json of tinycolor2@1.6.0-beta.2, the exports config doesn't cover browser runtime right?

// node_modules/tinycolor2/package.json
// ...
"exports": {
    ".": {
      "import": "./esm/tinycolor.js",
      "require": "./cjs/tinycolor.js"
    }
  },
// ...

[bgrins]

Thanks for looking into it. I didn't realize it had to specify a browser export specifically - tbh the config and docs for it are not very clear to me. Would I also need a sibling to

 "module": "./esm/tinycolor.js",
  "main": "./cjs/tinycolor.js",

or just the exports > . > browser?

[bgrins]

As per https://nodejs.org/api/packages.html#conditional-exports maybe we need a default named export instead of browser

[bgrins]

Alright, published a beta 3 with the default export section at https://www.npmjs.com/package/tinycolor2/v/1.6.0-beta.3?activeTab=explore. Can you try that with your setup?

[Babyfaceqian]

const tinycolor2 = require('tinycolor2');
console.log(tinycolor2)

hmmm...this is what i got with beta 3, same as beta 2

[bgrins]

Alright, tried publishing a beta 4 with the "browser" field in package.json (https://www.npmjs.com/package/tinycolor2/v/1.6.0-beta.4?activeTab=explore)

[bgrins]

Though it seems like the build tool is picking up the module export somehow

[bgrins]

I also went ahead and published a beta 5 which changed the order of the exports to try putting require first https://www.npmjs.com/package/tinycolor2/v/1.6.0-beta.5?activeTab=explore

[bgrins]

Let me know if 4 or 5 fixes it

[Babyfaceqian]

@bgrins 4 fail, trying 5

[Babyfaceqian]

5 same as before

[Babyfaceqian]

Let me try another build tool

[bgrins]

Yeah I was wondering if there was any way to get debugging output from the build tool. It seems to be either grabbing ./esm/tinycolor.js for some reason or grabbing the cjs file and then converting it into esm (despite you using require and your package.json not specifying a module)

[bgrins]

The fact that it was working before (when we weren't exporting ESM makes me think it's the former - grabbing ./esm/tinycolor.js for some reason). I guess you could debug that in your node_modules folder by replacing the content of esm/tinycolor.js with cjs/tinycolor.js and see if it works.

[bgrins]

I know it's a totally different setup, but here's it working in the browser with parcel & ESM https://codesandbox.io/s/determined-meadow-6tip3b?file=/src/index.js

[Babyfaceqian]

alright, i will create demo and send you tomorrow to keep looking into. It's too late here:)

[Babyfaceqian]

@bgrins Plz check this demo: https://codesandbox.io/s/umi-demo-x8cfqf?file=/src/pages/index.tsx If the app does not start automatically on the first loading, try run npm start in the Terminal and refresh in the browser panel.

I also digged into module main browser exports in package.json and found the docs https://webpack.js.org/guides/package-exports/. As the docs says, "exports field is preferred over other package entry fields like main, module, browser or custom ones.", so the build tool should take exports config first if it exists.But what the demo shows seems the build tool ignores the exports config and directly take module config. I did not figure out why...

I also tried to changed the configs in package.json of tinycolor2, and found one way to fix this by adding "browser": "./cjs/tinycolor.cjs" in the package.json.The build tool will take browser config first.You may publish one more with browser config and test in the demo.

[bgrins]

@Babyfaceqian thanks for making that sandbox and digging into the problem, I can reproduce the problem there. I did try adding a browser field in 1.6.0-beta.6 but am still seeing the problem in https://codesandbox.io/s/umi-demo-forked-l5ukny?file=/package.json for some reason:

"module": "./esm/tinycolor.js",
  "main": "./cjs/tinycolor.js",
  "browser": "./cjs/tinycolor.js",
  "exports": {
    ".": {
      "import": "./esm/tinycolor.js",
      "require": "./cjs/tinycolor.js"
    }
  },

From https://www.npmjs.com/package/tinycolor2/v/1.6.0-beta.6?activeTab=explore

[bgrins]

I do notice that in index.tsx you have

import React from 'react';
import styles from './index.less';
const tinycolor2 = require('tinycolor2');

(mixing require and import). Is it possible the build tool is confused by this? It seems to work fine I change it to:

import React from 'react';
import styles from './index.less';
import tinycolor2 from 'tinycolor2';

[bgrins]

Although it seems to work alright with const React = require("react");

[bgrins]

Maybe it is working with beta6 after all and it just wasn't re-running in code sandbox? It appears to be working for me now. Lmk if beta6 is good for you when you have a chance. If so I can add that browser field in a 1.5.3.

[Babyfaceqian]

@bgrins I also see it is working in your code sandbox, beta6 is good for me, you may add browser field in a 1.5.3. let me know when you have a change to figure out why the build tool of umi framework ignores exports config.If I find something new about it, will make an update to you. Thanks for handling this issue.

[bgrins]

Alright, I added the field in the main branch, and have published a 1.6.0-beta.8 from it. I'll push an official new version out in the next day or two.

[bgrins]

@Babyfaceqian I've pushed out https://www.npmjs.com/package/tinycolor2/v/1.5.2, let me know if there are issues with that.

[anisabboud]

import tinycolor2 from 'tinycolor2';  // Works with v1.5.2 (updated syntax).