@phosphor-icons/react doesn't have support for modules, only CommonJS

[MatheusRoichman]

I was using phosphor-react on my NPM pakcage, and I want to migrate to @phosphor-icons/react, so I can get more icons.
On my package, there is a file src/icons/index.ts where I just export the icons from Phosphor. With phosphor-react, it was working:

export * from 'phosphor-react';

But when I change to @phosphor-icons/react, it gives me the following error message:

TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("@phosphor-icons/react")' call instead. To convert this file to an ECMAScript module, change its file extension to '.mts', or add the field "type": "module" to 'C:/Users/roich/dev/bioma/bioma-ui/lib/package.json'.

I tried to change the file name to index.mts and add the "type": "module" to my package.json, and none of them were the solution I was looking for.

I suggest this new package supports both CommonJS format and ECMAScript modules.

[rektdeckard]

What version are you using? What environment and tooling? We do expose both ES and UMD builds with module and main entrypoints. But we did not explicitly say "type": "module" until 2.0.10.

[MatheusRoichman]

@rektdeckard
Version ^1.4.1 of phosphor-react
Tried to use the latest version of @phosphor-icons/react

PACKAGE.JSON

{
  "name": "@bioma/bioma-ui",
  "version": "1.1.20",
  "description": "Plug-and-play front-end utilities for Bioma platforms.",
  "main": "lib/index.js",
  "types": "./lib/index.d.ts",
  "files": [
    "lib/**/*"
  ],
  "exports": {
    ".": {
      "types": "./lib/index.d.ts",
      "import": "./lib/index.js"
    },
    "./lib/styles.css": "./lib/styles.css",
    "./*": "./lib/*.js",
    "./**/*": "./lib/**/*.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:ts": "tsc",
    "build:css": "tailwindcss -i src/styles/index.css -o lib/styles.css --minify",
    "build": "yarn build:ts && yarn build:css",
    "dev": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "publishConfig": {
    "registry": "https://gitlab.com/api/v4/projects/45701674/packages/npm/"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@gitlab.com/bkpi/bioma-ui.git"
  },
  "author": "",
  "license": "MIT",
  "bugs": {
    "url": "https://gitlab.com/bkpi/bioma-ui/issues"
  },
  "homepage": "https://gitlab.com/bkpi/bioma-ui#readme",
  "devDependencies": {
    "@storybook/addon-essentials": "7.0.8",
    "@storybook/addon-interactions": "7.0.8",
    "@storybook/addon-links": "7.0.8",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/addon-styling": "^1.0.6",
    "@storybook/blocks": "7.0.8",
    "@storybook/react": "7.0.8",
    "@storybook/react-webpack5": "7.0.8",
    "@storybook/testing-library": "0.0.14-next.2",
    "@tsconfig/recommended": "^1.0.2",
    "@types/react": "^18.2.1",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.23",
    "prop-types": "15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "storybook": "7.0.9",
    "typescript": "^5.0.4"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "dependencies": {
    "framer-motion": "^10.12.16",
    "lottie-react-web": "^2.2.2",
    "phosphor-react": "^1.4.1",
    "react-tooltip": "^5.13.0",
    "tailwind-merge": "^1.12.0",
    "tailwindcss": "^3.3.2"
  },
  "engines": {
    "node": ">=16"
  }
}

TSCONFIG.JSON

const colors = {
  "primary-100": "var(--primary-100)",
  "primary-200": "var(--primary-200)",
  "primary-300": "var(--primary-300)",
  "primary-400": "var(--primary-400)",
  "primary-500": "var(--primary-500)",
  "primary-600": "var(--primary-600)",
  "primary-700": "var(--primary-700)",
  "primary-800": "var(--primary-800)",
  "primary-900": "var(--primary-900)",
  "primary-1000": "var(--primary-1000)",
  "primary-1100": "var(--primary-1100)",
  "primary-1200": "var(--primary-1200)",
  "primary-1300": "var(--primary-1300)",
  "primary-1400": "var(--primary-1400)",

  "neutral-0": "var(--neutral-0)",
  "neutral-50": "var(--neutral-50)",
  "neutral-100": "var(--neutral-100)",
  "neutral-200": "var(--neutral-200)",
  "neutral-300": "var(--neutral-300)",
  "neutral-400": "var(--neutral-400)",
  "neutral-500": "var(--neutral-500)",
  "neutral-600": "var(--neutral-600)",
  "neutral-700": "var(--neutral-700)",
  "neutral-800": "var(--neutral-800)",
  "neutral-900": "var(--neutral-900)",
  "neutral-1000": "var(--neutral-1000)",

  "highlight-primary": "var(--highlight-primary)",
  "highlight-secondary": "var(--highlight-secondary)",

  "success-primary": "var(--success-primary)",
  "success-secondary": "var(--success-secondary)",

  "warning-primary": "var(--warning-primary)",
  "warning-secondary": "var(--warning-secondary)",

  "critical-primary": "var(--critical-primary)",
  "critical-secondary": "var(--critical-secondary)",
};

/** @type {import('tailwindcss/types/config').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {
      colors: colors,
      textColor: colors,
    },
  },
  plugins: [],
  safelist: [
    {
      pattern:
        /(bg|text|border)-(primary|neutral|highlight|success|warning|critical)-(100|200|300|400|500|600|700|800|900|1000|1100|1200|1300|1400|primary|secondary)/,
    },
  ],
};

[hatched]

You may have to change the moduleResolution value in your tsconfig.json to "bundler".

--moduleResolution bundler

[rektdeckard]

Have added exports.require declarations in package.json, and build is now live on NPM under version 2.1.3, with the @next tag (can be installed with npm install @phosphor-icons/react@next). Please give this a whirl and let me know if it fixes things for you.

[rektdeckard]

Live on stable versions >-2.0.13. Marking as resolved.