[Bug]: Error [ERR_REQUIRE_ESM]: require() of ES Module

nhoizey commented 6 months ago

What happened?

When I run my Node script using Style Dictionary and sd-tranforms, I get this error:

./Tokens/node_modules/@tokens-studio/sd-transforms/dist/src/parsers/add-font-styles.cjs:3
var utils = require('style-dictionary/utils');
            ^

Error [ERR_REQUIRE_ESM]: require() of ES Module ./Tokens/node_modules/@tokens-studio/sd-transforms/node_modules/style-dictionary/lib/utils/index.js from ./Tokens/node_modules/@tokens-studio/sd-transforms/dist/src/parsers/add-font-styles.cjs not supported.
Instead change the require of index.js in ./Tokens/node_modules/@tokens-studio/sd-transforms/dist/src/parsers/add-font-styles.cjs to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (./Tokens/node_modules/@tokens-studio/sd-transforms/dist/src/parsers/add-font-styles.cjs:3:13)
    at Object.<anonymous> (./Tokens/node_modules/@tokens-studio/sd-transforms/dist/src/parsers/parse-tokens.cjs:4:21)
    at Object.<anonymous> (./Tokens/node_modules/@tokens-studio/sd-transforms/dist/src/registerTransforms.cjs:16:19)
    at Object.<anonymous> (./Tokens/node_modules/@tokens-studio/sd-transforms/dist/src/index.cjs:3:26)
    at Object.<anonymous> (./Tokens/build-from-figma.js:5:5) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v20.9.0

I get the same error with Style Dictionary latest 3.x and 4.x versions, and both sd-transform 0.13.1 and 0.13.2.

Reproduction

No response

Expected output

No response

Version

0.13.2

jorenbroekema commented 6 months ago

Hi, you're probably using style-dictionary v4 which is ESM only. If you use sd-transforms in CJS context, it will use CJS and try to use style-dictionary as CJS as well.

There's a lot of articles (e.g. https://blog.logrocket.com/commonjs-vs-es-modules-node-js/) about CommonJS versus ES Modules, but the summary is that ES Modules is a standardized format for Javascript, including for browsers, and since style-dictionary v4 is written to be browser-compatible out of the box, we've switched to this modern format of writing Javascript modules, rather than using the old Node default format (CommonJS).

If you want to upgrade to style-dictionary v4, your code must be upgraded to ESM format everywhere (recommended, not too much work usually), or use a build-time tool that allows you to execute javascript with mixed formats (not recommended, as it introduces build-time complexity that is in my experience tough to get rid of later down the line)

nhoizey commented 6 months ago

@jorenbroekema I know ESM/CJS.

As I mentioned in my issue, I get the error with both style-dictionary v3.x and v4.x

As I plan to move to Style Dictionary 4 anyway, I'll change my code to be ESM, and check again.

nhoizey commented 6 months ago

I changed my code to ESM, and I get a new error:

file:///…/Tokens/build-from-figma.js:6
import { StyleDictionary } from 'style-dictionary';
         ^^^^^^^^^^^^^^^
SyntaxError: The requested module 'style-dictionary' does not provide an export named 'StyleDictionary'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:131:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:213:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async loadESM (node:internal/process/esm_loader:34:7)
    at async handleMainPromise (node:internal/modules/run_main:66:12)

Node.js v20.9.0

I see import { StyleDictionary } from 'style-dictionary'; in a lot of code of the https://github.com/amzn/style-dictionary/tree/v4 branch, so I don't understand.

nhoizey commented 6 months ago

import StyleDictionary from 'style-dictionary'; without the curly braces works.

Now I get a new error: TypeError: StyleDictionary.extend is not a function

I'm following this example but with ESM code: https://github.com/tokens-studio/sd-transforms#multi-dimensional-theming

jorenbroekema commented 6 months ago

Right, so style-dictionary v4 is a new major version and comes with some breaking changes https://github.com/amzn/style-dictionary/blob/v4/CHANGELOG.md

Specifically the breaking change that's causing the error for you is this one https://github.com/amzn/style-dictionary/blob/v4/CHANGELOG.md#major-changes-1 :

/**
 * old:
 *   const sd = StyleDictionary.extend({ source: ['tokens.json'], platforms: {} });
 *   sd.buildAllPlatforms();
 */
const sd = new StyleDictionary({ source: ['tokens.json'], platforms: {} });
await sd.buildAllPlatforms();

When Style-Dictionary v4 is fully released, we'll be releasing sd-transforms v1 stable as well and update all of its docs to reflect Style-Dictionary v4, but for now it remains written for v3 as most users are still on that version and v4 is still in alpha state

nhoizey commented 6 months ago

@jorenbroekema now I understand, and it works! 🥳

Thanks a lot for your help! 🙏

It means I'm now using Style Dictionary v4 with sd-transforms, so I'll be happy to help by testing new releases.

tokens-studio / sd-transforms