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 [email protected] 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 [email protected] 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/[email protected]/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 [email protected].

[jmatsushita]

Same here with [email protected] 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 👌🏻

[Sanford284]

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.