Build fails with an error related to Prettier after upgrading to 4.2.0

[johnykei]

After upgrading Style Dictionary from 4.1.4 to 4.2.0, the build fails with an error related to Prettier when trying to build JavaScript and TypeScript files.

We are using the following formats in our config.json:

• javascript/module
• typescript/module-declarations

Our project doesn't use Prettier. Tried installing Prettier v3 but it didn't work.
Downgrading back to 4.1.4 makes it work correctly.

Error

I get the following error when running the build:

/Users/xxx/my-project/node_modules/prettier/standalone.js:24
in order for it to be formatted.`,cliCategory:"Other"},tabWidth:{type:"int",category:"Global",default:2,description:"Number of spaces per indentation level.",range:{start:0,end:1/0,step:1}},useTabs:{category:"Global",type:"boolean",default:!1,description:"Indent with tabs instead of spaces."},embeddedLanguageFormatting:{category:"Global",type:"choice",default:"auto",description:"Control how Prettier formats quoted code embedded in the file.",choices:[{value:"auto",description:"Format embedded code if Prettier can automatically identify it."},{value:"off",description:"Never automatically format embedded code."}]}};function it({plugins:e=[],showDeprecated:t=!1}={}){let r=e.flatMap(i=>i.languages??[]),n=[];for(let i of Di(Object.assign({},...e.map(({options:u})=>u),rn)))!t&&i.deprecated||(Array.isArray(i.choices)&&(t||(i.choices=i.choices.filter(u=>!u.deprecated)),i.name==="parser"&&(i.choices=[...i.choices,...ai(i.choices,r,e)])),i.pluginDefaults=Object.fromEntries(e.filter(u=>{var o;return((o=u.defaultOptions)==null?void 0:o[i.name])!==void 0}).map(u=>[u.name,u.defaultOptions[i.name]])),n.push(i));return{languages:r,options:n}}function*ai(e,t,r){let n=new Set(e.map(i=>i.value));for(let i of t)if(i.parsers){for(let u of i.parsers)if(!n.has(u)){n.add(u);let o=r.find(a=>a.parsers&&Object.prototype.hasOwnProperty.call(a.parsers,u)),s=i.name;o!=null&&o.name&&(s+=` (plugin: ${o.name})`),yield{value:u,description:s}}}}function Di(e){let t=[];for(let[r,n]of Object.entries(e)){let i={name:r,...n};Array.isArray(i.default)&&(i.default=y(!1,i.default,-1).value),t.push(i)}return t}var li=e=>String(e).split(/[/\\]/u).pop();function nn(e,t){if(!t)return;let r=li(t).toLowerCase();return e.find(({filenames:n})=>n==null?void 0:n.some(i=>i.toLowerCase()===r))??e.find(({extensions:n})=>n==null?void 0:n.some(i=>r.endsWith(i)))}function ci(e,t){if(t)return e.find(({name:r})=>r.toLowerCase()===t)??e.find(({aliases:r})=>r==null?void 0:r.includes(t))??e.find(({extensions:r})=>r==null?void 0:r.includes(`.${t}`))}function fi(e,t){let r=e.plugins.flatMap(i=>i.languages??[]),n=ci(r,t.language)??nn(r,t.physicalFile)??nn(r,t.file)??(t.physicalFile,void 0);return n==null?void 0:n.parsers[0]}var un=fi;var oe={key:e=>/^[$_a-zA-Z][$_a-zA-Z0-9]*$/.test(e)?e:JSON.stringify(e),value(e){if(e===null||typeof e!="object")return JSON.stringify(e);if(Array.isArray(e))return`[${e.map(r=>oe.value(r)).join(", ")}]`;let t=Object.keys(e);return t.length===0?"{}":`{ ${t.map(r=>`${oe.key(r)}: ${oe.value(e[r])}`).join(", ")} }`},pair:({key:e,value:t})=>oe.value({[e]:t})};var Yt=Me(ot(),1),an=(e,t,{descriptor:r})=>{let n=[`${Yt.default.yellow(typeof e=="string"?r.key(e):r.pair(e))} is deprecated`];return t&&n.push(`we now treat it as ${Yt.default.blue(typeof t=="string"?r.key(t):r.pair(t))}`),n.join("; ")+"."};var le=Me(ot(),1);var st=Symbol.for("vnopts.VALUE_NOT_EXIST"),he=Symbol.for("vnopts.VALUE_UNCHANGED");var Dn=" ".repeat(2),cn=(e,t,r)=>{let{text:n,list:i}=r.normalizeExpectedResult(r.schemas[e].expected(r)),u=[];return n&&u.push(ln(e,t,n,r.descriptor)),i&&u.push([ln(e,t,i.title,r.descriptor)].concat(i.values.map(o=>fn(o,r.loggerPrintWidth))).join(`
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     ^

TypeError: Cannot read properties of undefined (reading 'languages')
    at /Users/xxx/my-project/node_modules/prettier/standalone.js:24:694
    at Array.flatMap (<anonymous>)
    at it (/Users/xxx/my-project/node_modules/prettier/standalone.js:24:681)
    at Ai (/Users/xxx/my-project/node_modules/prettier/standalone.js:27:12039)
    at rr (/Users/xxx/my-project/node_modules/prettier/standalone.js:33:273)
    at /Users/xxx/my-project/node_modules/prettier/standalone.js:35:802
    at Object.gu (/Users/xxx/my-project/node_modules/prettier/standalone.js:35:871)
    at formatJS (/Users/xxx/my-project/node_modules/style-dictionary/lib/common/formats.js:103:19)
    at Object.javascript/module (/Users/xxx/my-project/node_modules/style-dictionary/lib/common/formats.js:395:12)
    at async StyleDictionary.formatFile (/Users/xxx/my-project/node_modules/style-dictionary/lib/StyleDictionary.js:716:30)

Workaround

The issue can be resolved by changing the imports for prettier plugin in /lib/common/format.js to use namespace imports:

// Before (4.2.0)
import * as prettier from 'prettier/standalone.mjs';
import prettierPluginBabel from 'prettier/plugins/babel.mjs';
import prettierPluginEstree from 'prettier/plugins/estree.mjs';
import prettierPluginTypescript from 'prettier/plugins/typescript.mjs';

// After (Workaround)
import * as prettier from 'prettier/standalone.mjs';
import * as prettierPluginBabel from 'prettier/plugins/babel.mjs';
import * as prettierPluginEstree from 'prettier/plugins/estree.mjs';
import * as prettierPluginTypescript from 'prettier/plugins/typescript.mjs';

With this workaround, the build works correctly on our project.

[jorenbroekema]

I double-checked Prettier docs for plugin imports and https://prettier.io/docs/en/api#custom-parser-api-removed also uses the import * as syntax, so I created a PR to update this #1394 , could you verify if this fixes it for you?

If that doesn't fix things:

Can you supply some more information about your environment?

• Operating system
• Browser, NodeJS, Bun or Deno version (depending on what you use)
• Typescript version
• Any involved bundlers/tools such as tsup, webpack, rollup, vite etc. and their versions

If possible, can you provide a minimal reproduction of the issue in stackblitz or by sharing a github repository?

[johnykei]

@jorenbroekema
Thank you for your response!
I have tried #1394 and it works fine on my environment without any errors!

[johnykei]

Just in case, the information of my environment is as follows.

• OS: MacOS 14.6.1
• NodeJS: v20.18.0
• Typescript: v5.6.3
• Build tool: tsx v4.19.2

[TrevorRice]

I've also run into an issue when updating to 4.2.0:

node:internal/process/esm_loader:40
      internalBinding('errors').triggerUncaughtException(
                                ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/xxxx/Projects/xxxx/node_modules/prettier/standalone' imported from /Users/xxxx/Projects/xxxx/node_modules/style-dictionary/lib/common/formats.js
Did you mean to import prettier/standalone.js?
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:327:11)
    at moduleResolve (node:internal/modules/esm/resolve:980:10)
    at defaultResolve (node:internal/modules/esm/resolve:1206:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:404:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:373:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:250:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
    at link (node:internal/modules/esm/module_job:75:36) {
  url: 'file:///Users/xxxx/Projects/xxxx/node_modules/prettier/standalone',
  code: 'ERR_MODULE_NOT_FOUND'
}

Node.js v18.20.5
...

• OS: macOS 14.6.1
• Node: 18.20.5