A dynamic import callback was not specified

[aleclarson]

Summary

When Prettier v3 uses dynamic import here, it triggers an error that seems to be related to Node's ESM loader.

Github Repository to Reproduce Issue

You should be able to reproduce on any repository with prettier@3.0.0-alpha.11 installed and prettier-vscode v9.12.0 (the latest version as of now). It might also depend on the Node.js version installed? (if so, I have Node v19.4.0)

Steps To Reproduce:

1. Install the dependencies prettier@3.0.0-alpha.11 and prettier-vscode v9.12.0
2. Save any file that can be formatted by Prettier
3. Check the output channel of prettier-vscode

Expected result

Saving the file should've auto-formatted it with Prettier.

Actual result

Nothing happens.

Additional information

Feel free to attach a screenshot.

VS Code Version: v1.78.1

Prettier Extension Version: v9.12.0

OS and version: macOS v12.5

Prettier Log Output

["ERROR" - 5:04:22 PM] Error handling text editor change
["ERROR" - 5:04:22 PM] A dynamic import callback was not specified.
TypeError: A dynamic import callback was not specified.
    at new NodeError (node:internal/errors:387:5)
    at importModuleDynamicallyCallback (node:internal/process/esm_loader:39:9)
    at Object.<anonymous> (/Users/alec/dev/alloc/alien-dom/node_modules/.pnpm/prettier@3.0.0-alpha.11/node_modules/prettier/index.cjs:647:23)
    at Module.u._compile (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js:4:1271)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1243:10)
    at Module.load (node:internal/modules/cjs/loader:1058:32)
    at Module._load (node:internal/modules/cjs/loader:893:12)
    at Function.f._load (node:electron/js2c/asar_bundle:2:13330)
    at Function.b._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:126:29948)
    at Function.h._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:126:26698)
    at Function.I._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:90:24489)
    at Module.require (node:internal/modules/cjs/loader:1082:19)
    at Module.require (/Users/alec/.vscode/extensions/github.copilot-1.83.41/dist/extension.js:8:366165)
    at t.ModuleResolver.g (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js:4:647)
    at t.ModuleResolver.loadNodeModule (/Users/alec/.vscode/extensions/esbenp.prettier-vscode-9.12.0/dist/extension.js:1:6406)
    at t.ModuleResolver.getPrettierInstance (/Users/alec/.vscode/extensions/esbenp.prettier-vscode-9.12.0/dist/extension.js:1:4086)
    at t.default.handleActiveTextEditorChanged (/Users/alec/.vscode/extensions/esbenp.prettier-vscode-9.12.0/dist/extension.js:1:9843)
    at t.default.handleActiveTextEditorChangedSync (/Users/alec/.vscode/extensions/esbenp.prettier-vscode-9.12.0/dist/extension.js:1:9445)
    at t.default.registerDisposables (/Users/alec/.vscode/extensions/esbenp.prettier-vscode-9.12.0/dist/extension.js:1:12288)
    at /Users/alec/.vscode/extensions/esbenp.prettier-vscode-9.12.0/dist/extension.js:1:77862

[erikpukinskis]

Also seeing this in my project with prettier@3.0.0-alpha.12.

[jmatsushita]

Same here with prettier@3.0.0-alpha.12 and prettier-vscode at 9.13.0

[ntotten]

Fix is being worked on: https://github.com/prettier/prettier-vscode/pull/3016

[boris-petrov]

I just hit this with Prettier 3 stable. I see that the PR has been merged so just a release is needed?

[barbalex]

I just updated to prettier v3.0.0 and now it is broken because of this issue 🤔. I develop on Windows 11.

[svenvoskamp]

Had this error too, but just restarting VS Code fixed it for me.

[barbalex]

@svenvoskamp yeah, you're right. Thanks!

[boris-petrov]

Actually yes, after restarting a few times, the error changes - now I get TypeError: Invalid host defined options. Any ideas about this? There is only one reference of this here in the PR for v3 support.

[hjcian]

I got the TypeError: Invalid host defined options too.

I'm using prettier: 3.0.0 in package.json, and using v9.19.0 of Prettier - Code formatter (vscode extension).

[timotheeguerin]

I solved the TypeError: Invalid host defined options error by specifying the prettier commonjs entrypoint instead of the folder I had before.

In .vscode/settings.json i changed this

-"prettier.prettierPath": "./packages/compiler/node_modules/prettier",
+"prettier.prettierPath": "./packages/compiler/node_modules/prettier/index.cjs",

This feels like the extension should resolve it automatically but this seems to at least be a workaround for now.

[chrismuiruriz]

I had a similar issue with version 3.0.0 restarting Vscode fixed it for me

[allan852]

I had a similar issue with version 3.0.0, after restarting Vscode I got the TypeError: Invalid host defined options too. I fix it

In .vscode/settings.json

+"prettier.prettierPath": "node_modules/prettier/index.cjs",

[KamaranL]

I got the TypeError: Invalid host defined options too.

I'm using prettier: 3.0.0 in package.json, and using v9.19.0 of Prettier - Code formatter (vscode extension).

Using the same exact setup on my MacBook, but oddly enough, I was able to resolve the error by removing the prettier path from my VS settings.json altogether. Previously, it was set to node_modules/prettier/.

[barbalex]

After not getting this error for a few days it has re-appeared 😢 Reverting to v2.8.8

[Kneesal]

I got the TypeError: Invalid host defined options too. I'm using prettier: 3.0.0 in package.json, and using v9.19.0 of Prettier - Code formatter (vscode extension).

Using the same exact setup on my MacBook, but oddly enough, I was able to resolve the error by removing the prettier path from my VS settings.json altogether. Previously, it was set to node_modules/prettier/.

^ this worked for me also! edit: also using macbook edit2 : in a previous version of prettier, I upgraded my vscode and it stopped working. It turned out I had to specify the prettier path in my editor. but after upgrading prettier as well, it seems like I don't need to specify the path anymore

[phanker]

similar

thanks for your guidance.I have already done it like you.It's perfect

[nicel3d]

An error was displayed in a project with vue, changed the file name prettierrc.js to prettier.config.js, it helped

[Disorrder]

Yeah, fixed after restarting VSCode, thanks!

[gnosticdev]

I fixed this issue by using the package.json for my prettier config, for anyone looking for alternative solutions.

[ZeldOcarina]

I fixed this issue by using the package.json for my prettier config, for anyone looking for alternative solutions.

How is that done? Sorry if my question is naive.

[niaodan2b]

Just setting prettier.prettierPath to empty fixed this for me. However it seems prettier.prettierPath="./node_modules/prettier" is needed for Prettier 2.x So if you have some projects using Prettier 2.x and some using 3.0, you have to set prettierPath for each project in workspace settings, that's super annoying but works for now.

[gnosticdev]

I fixed this issue by using the package.json for my prettier config, for anyone looking for alternative solutions.

How is that done? Sorry if my question is naive.

No worries, there are several ways that you can configure prettier in a project - most of the time people use a separate config file like .prettierrc, or prettier.config.js, etc.

However you can also use package.json to configure prettier, not needing a separate config file at all.

See the first entry in the docs

You just add a "prettier" field to your existing package.json, and add your configurations next to it.

package.json

"prettier": {
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

[SharadJ85]

I got the TypeError: Invalid host defined options too. I'm using prettier: 3.0.0 in package.json, and using v9.19.0 of Prettier - Code formatter (vscode extension).

Using the same exact setup on my MacBook, but oddly enough, I was able to resolve the error by removing the prettier path from my VS settings.json altogether. Previously, it was set to node_modules/prettier/.

Thanks, this worked 👌🏻

[yuwanlin]

prettier

work for me

[abumalick]

This happened for me after upgrading prettier and the editor was launch before the upgrade. Restarting vscode fixed it for me.

[J4v4Scr1pt]

Restarting vscode(insider) fixed it for me to,

[shenaldev]

I had a similar issue with version with version 3.0.0 restarting Vscode fixed it for me

This works for me too

[dimaslanjaka]

same here. This errors occurs only for JSX/TSX file.

prettier version

{
    "prettier": "^3.0.3"
}

plugin information

Prettier - Code formatter v10.1.0

vscode version

Version: 1.81.1 (user setup)
Commit: 6c3e3dba23e8fadc360aed75ce363ba185c49794
Date: 2023-08-09T22:22:42.175Z
Electron: 22.3.18
ElectronBuildId: 22689846
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Windows_NT x64 10.0.19045

error logs

["ERROR" - 8:41:13 AM] Error handling text editor change
["ERROR" - 8:41:13 AM] A dynamic import callback was not specified.
TypeError: A dynamic import callback was not specified.
    at new NodeError (node:internal/errors:387:5)
    at importModuleDynamicallyCallback (node:internal/process/esm_loader:39:9)
    at Object.<anonymous> (d:\Repositories\page\node_modules\prettier\index.cjs:600:23)
    at u._compile (d:\ProgramData\Microsoft VS Code\resources\app\out\vs\loader.js:4:1271)
    at Module._extensions..js (node:internal/modules/cjs/loader:1243:10)
    at Module.load (node:internal/modules/cjs/loader:1058:32)
    at Module._load (node:internal/modules/cjs/loader:893:12)
    at f._load (node:electron/js2c/asar_bundle:2:13330)
    at o._load (d:\ProgramData\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:130:28084)
    at f._load (d:\ProgramData\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:130:25418)
    at C._load (d:\ProgramData\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:94:19511)
    at Module.require (node:internal/modules/cjs/loader:1082:19)
    at g (d:\ProgramData\Microsoft VS Code\resources\app\out\vs\loader.js:4:647)
    at t.loadNodeModule (c:\Users\dimas\.vscode\extensions\esbenp.prettier-vscode-10.1.0\dist\extension.js:1:2829)
    at t.PrettierMainThreadInstance.import (c:\Users\dimas\.vscode\extensions\esbenp.prettier-vscode-10.1.0\dist\extension.js:1:17760)
    at t.PrettierMainThreadInstance.resolveConfigFile (c:\Users\dimas\.vscode\extensions\esbenp.prettier-vscode-10.1.0\dist\extension.js:1:18457)
    at t.ModuleResolver.resolveConfig (c:\Users\dimas\.vscode\extensions\esbenp.prettier-vscode-10.1.0\dist\extension.js:1:6705)
    at t.ModuleResolver.getResolvedConfig (c:\Users\dimas\.vscode\extensions\esbenp.prettier-vscode-10.1.0\dist\extension.js:1:7540)
    at async t.default.format (c:\Users\dimas\.vscode\extensions\esbenp.prettier-vscode-10.1.0\dist\extension.js:1:14563)
    at async t.PrettierEditProvider.provideEdits (c:\Users\dimas\.vscode\extensions\esbenp.prettier-vscode-10.1.0\dist\extension.js:1:12672)

[dimaslanjaka]

but when i ran the prettier using ESLint, no errors occurs and successful format when ran eslint --fix

package.json

{
    "eslint": "^8.48.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "prettier": "^3.0.3",
    "@typescript-eslint/eslint-plugin": "^6.4.1",
    "@typescript-eslint/parser": "^6.4.1",
    "ts-node": "^10.9.1",
    "typescript": "4.9.5",
}

.prettierrc.json

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "printWidth": 120,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "prettier.cssEnable": [
    "css",
    "less",
    "sass"
  ]
}

.eslintrc.js

const prettier = require('./.prettierrc.json');

/**
 * @type {import('eslint').ESLint.ConfigData}
 */
const config = {
  root: true, // Specifies your current project has own eslint rules without extends parent folder eslint rules
  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
  env: {
    browser: true, // add support for browser js (window,document,location,etc)
    amd: true, // add amd support
    node: true, // add node support (module.export,etc)
    jquery: true, // add jquery support
  },
  globals: {
    adsbygoogle: true, // add google adsense support
    gtag: true, // add google analytics support
    $: true, // add jquery support
    safelink: true, // add safelinkify support
    google: 'readonly', // add new google GSI authentication support
    gapi: 'readonly', // add google apis support
  },
  parserOptions: {
    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module', // Allows for the use of imports
  },
  extends: [
    'eslint:recommended', // uses eslint default recommended
    'plugin:@typescript-eslint/eslint-recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
  ],
  // override rules for js files
  overrides: [
    {
      files: ['*.js'],
      rules: {
        '@typescript-eslint/no-var-requires': 'off', // disable require warning on js files
        '@typescript-eslint/triple-slash-reference': 'off', // disable include refenrences definition files on js
      },
    },
  ],
  // specify your desired rules for eslint
  rules: {
    'prettier/prettier': ['error', prettier],
    '@typescript-eslint/explicit-function-return-type': 'off', // disable function without return type
    'no-unused-vars': 'off', // disable original eslint unused-vars
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
        caughtErrorsIgnorePattern: '^_',
      },
    ], // enable typescript-eslint unused-vars and allow unused vars start with underscore (_)
    'sort-imports': [
      'warn',
      {
        ignoreDeclarationSort: true,
      },
    ],
    '@typescript-eslint/no-explicit-any': 'off', // allow any types
    '@typescript-eslint/no-this-alias': [
      // rules for this binding
      'error',
      {
        allowDestructuring: false, // Disallow `const { props, state } = this`; true by default
        allowedNames: ['self'], // Allow `const self = this`; `[]` by default
      },
    ],
    // "arrow-body-style" and "prefer-arrow-callback" are two ESLint core rules that can cause issues with prettier/prettier plugin, so turn them off.
    'arrow-body-style': 'off',
    'prefer-arrow-callback': 'off',
  },
};

module.exports = config;

source https://www.webmanajemen.com/NodeJS/eslint-prettier-typescript-vscode.html

[cb-dinesh]

This happened for me after upgrading prettier and the editor was launch before the upgrade. Restarting vscode fixed it for me.

Completely exiting VS Code, and doing a restart worked for me too. Prettier was able to format the files successfully on save.

[axelthat]

For my PHP bros, Restart VSCode and make sure to add "@prettier/plugin-php" in plugins array and then again restart vscode.

package.json

{
    "dependencies": [...],
    "devDependencies": [...],
    "prettier": {
        "plugins": [
            "@prettier/plugin-php"
        ],
        "tabWidth": 4,
        "semi": false,
        "singleQuote": true,
        "trailingComma": "none",
        "printWidth": 100
    }
}

[mvn-thanhvo-dn]

Had this error too, but just restarting VS Code fixed it for me.

Nice bro

[trompx]

same here. This errors occurs only for JSX/TSX file.

Same here, only occurs for JSX and TSX files.

Also have: Prettier version : ^3.0.3 Prettier - Code formatter : v10.1.0 Vscode version : 1.83.0

@dimaslanjaka having to do your eslint setup is a hassle.

Restaring vscode was not enough.

TEMPORARY SOLUTION: downgrade prettier-vscode extension to 9.13.0. I also downgraded prettier to 2.8.8.

[dimaslanjaka]

same here. This errors occurs only for JSX/TSX file.

Same here, only occurs for JSX and TSX files.

Also have: Prettier version : ^3.0.3 Prettier - Code formatter : v10.1.0 Vscode version : 1.83.0

@dimaslanjaka having to do your eslint setup is a hassle.

Restaring vscode was not enough.

TEMPORARY SOLUTION: downgrade prettier-vscode extension to 9.13.0. I also downgraded prettier to 2.8.8.

try remove @types/prettier on package.json when installed, then add resolution prettier to 3.0.3. my working setup https://github.com/dimaslanjaka/webpack-boilerplate/blob/eae10408b9526ccb0e975d5e1b13dcfe1553e9a0/package.json#L126

works within yarn typescript workspace too

VScode info:

Version: 1.83.0
Commit: e7e037083ff4455cf320e344325dacb480062c3c
Date: 2023-10-03T16:11:49.843Z
Electron: 25.8.4
ElectronBuildId: 24154031
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Linux x64 5.15.0-86-generic

using VSCode prettier plugin v10.1.0

[lvl99]

In my case I foolishly had both a user and a workspace setting and removed one (I kept the one which pointed to ./node_modules/prettier/index.cjs), seemed to clear up the issue.

[ladasfeed]

Had this error too, but just restarting VS Code fixed it for me.

ahah thank you mate i have already started exploring source code...

[fresonn]

Fix for VS Code

1. command + shift + p
2. Type -> Developer: Reload Window
3. Your problem fixed

It helps!

[cengit]

it works for me with this setting in .vscode/settings.json:

+"prettier.prettierPath": "./node_modules/prettier/index.cjs", 

not this path in my case: ./packages/compiler/node_modules/prettier/index.cjs

[SaadFarooq-Dev]

For MacOS with NVM installed in the correct path for the prettier in vscode settings will be

/Users/{UserName}/.nvm/versions/node/v18.17.1/lib/node_modules/prettier/index.cjs

[abubakir1997]

I solved the TypeError: Invalid host defined options error by specifying the prettier commonjs entrypoint instead of the folder I had before.

In .vscode/settings.json i changed this

-"prettier.prettierPath": "./packages/compiler/node_modules/prettier",
+"prettier.prettierPath": "./packages/compiler/node_modules/prettier/index.cjs",

This feels like the extension should resolve it automatically but this seems to at least be a workaround for now.

This finally worked for me after trying everything!!! Thanks!

[Alfystar]

I solved the TypeError: Invalid host defined options error by specifying the prettier commonjs entrypoint instead of the folder I had before. In .vscode/settings.json i changed this

-"prettier.prettierPath": "./packages/compiler/node_modules/prettier",
+"prettier.prettierPath": "./packages/compiler/node_modules/prettier/index.cjs",

In my case the solution was::

-"prettier.prettierPath": "./node_modules/prettier",
+"prettier.prettierPath": "./node_modules/prettier/index.cjs",

But the logic was the same thanks @timotheeguerin !

[perjo927]

"prettier.prettierPath": "./node_modules/prettier/index.cjs", 

this did the trick for me 👍

[phoenixeliot]

For some reason I don't understand, Prettier was using some config files that as far as I can tell are not standard for v3 even though it was using v3, like trailingCommas: es5.

To fix this, I had to add an empty config to my package.json. Then the extension started formatting things the same as npx prettier@3 -w ..

Just add this in package.json:

"prettier": {}

[github-actions[bot]]

This issue has been labeled as stale due to inactivity. Reply to keep this issue open.