,

How to fix Prettier VSCode TypeError A dynamic import callback was not specified only occurs for JSX/TSX file.

Error Summary

Summary

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)

How to fix prettier error

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;