[BUG] Cannot find module '@trivago/prettier-plugin-sort-imports'

[igitur]

What exactly happened? Steps to reproduce the behavior:

Due to an incompatibility between 2 prettier plugins (@trivago/prettier-plugin-sort-imports and prettier-plugin-tailwindcss), I'm using a workaround as described here. This requires me to use a prettier.config.js instead of a .prettierrc with contents below:

const pluginSortImports = require('@trivago/prettier-plugin-sort-imports')
const pluginTailwindcss = require('prettier-plugin-tailwindcss')

/** @type {import("prettier").Parser}  */
const myParser = {
  ...pluginSortImports.parsers.typescript,
  parse: pluginTailwindcss.parsers.typescript.parse,
}

/** @type {import("prettier").Plugin}  */
const myPlugin = {
  parsers: {
    typescript: myParser,
  },
}

module.exports = {
  plugins: [myPlugin],
  endOfLine: 'auto',
  singleQuote: true,
  semi: false,
  importOrder: [
    '^(.*).css',
    '<THIRD_PARTY_MODULES>',
    '^@/components/(.*)$',
    '^@/constants/(.*)$',
    '^@/context/(.*)$',
    '^@/lib/(.*)$',
    '^[./]',
  ],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
}

Here is my workflow config:

name: Lint
on:
  pull_request:
  push:
    branches:
      - main

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Prettify code
        uses: creyD/prettier_action@v4.2
        with:
          prettier_options: --check src
          prettier_plugins: '@trivago/prettier-plugin-sort-imports prettier-plugin-tailwindcss'

The output complains that it can't find the @trivago/prettier-plugin-sort-imports plugin:

2022-08-13T17:30:51.7371612Z ##[group]Run creyD/prettier_action@v4.2
2022-08-13T17:30:51.7371947Z with:
2022-08-13T17:30:51.7372289Z   prettier_options: --check src
2022-08-13T17:30:51.7372811Z   prettier_plugins: @trivago/prettier-plugin-sort-imports prettier-plugin-tailwindcss
2022-08-13T17:30:51.7373340Z   commit_message: Prettified Code!
2022-08-13T17:30:51.7373697Z   same_commit: false
2022-08-13T17:30:51.7374088Z   file_pattern: *
2022-08-13T17:30:51.7374348Z   dry: false
2022-08-13T17:30:51.7374688Z   prettier_version: false
2022-08-13T17:30:51.7375090Z   working_directory: false
2022-08-13T17:30:51.7375379Z   only_changed: false
2022-08-13T17:30:51.7376003Z   github_token: ***
2022-08-13T17:30:51.7376332Z ##[endgroup]
2022-08-13T17:30:51.7740634Z ##[group]Run PATH=$(cd $GITHUB_ACTION_PATH; npm bin):$PATH /home/runner/work/_actions/creyD/prettier_action/v4.2/entrypoint.sh
2022-08-13T17:30:51.7741594Z PATH=$(cd $GITHUB_ACTION_PATH; npm bin):$PATH /home/runner/work/_actions/creyD/prettier_action/v4.2/entrypoint.sh
2022-08-13T17:30:51.7809219Z shell: /usr/bin/bash --noprofile --norc -e -o pipefail {0}
2022-08-13T17:30:51.7809646Z env:
2022-08-13T17:30:51.7810121Z   INPUT_COMMIT_MESSAGE: Prettified Code!
2022-08-13T17:30:51.7810518Z   INPUT_COMMIT_DESCRIPTION: 
2022-08-13T17:30:51.7810895Z   INPUT_SAME_COMMIT: false
2022-08-13T17:30:51.7811284Z   INPUT_COMMIT_OPTIONS: 
2022-08-13T17:30:51.7811678Z   INPUT_FILE_PATTERN: *
2022-08-13T17:30:51.7811997Z   INPUT_PRETTIER_OPTIONS: --check src
2022-08-13T17:30:51.7812361Z   INPUT_DRY: false
2022-08-13T17:30:51.7812735Z   INPUT_PRETTIER_VERSION: false
2022-08-13T17:30:51.7813046Z   INPUT_ONLY_CHANGED: false
2022-08-13T17:30:51.7813606Z   INPUT_PRETTIER_PLUGINS: @trivago/prettier-plugin-sort-imports prettier-plugin-tailwindcss
2022-08-13T17:30:51.7814152Z   INPUT_WORKING_DIRECTORY: false
2022-08-13T17:30:51.7814801Z   INPUT_GITHUB_TOKEN: ***
2022-08-13T17:30:51.7815105Z ##[endgroup]
2022-08-13T17:30:52.5591973Z Installing prettier...
2022-08-13T17:30:53.5976437Z Checking plugin: @trivago/prettier-plugin-sort-imports
2022-08-13T17:30:53.5999005Z Checking plugin: prettier-plugin-tailwindcss
2022-08-13T17:30:57.4439033Z Prettifying files...
2022-08-13T17:30:57.4439804Z Files:
2022-08-13T17:30:58.5565091Z Checking formatting...
2022-08-13T17:30:58.6039900Z [error] Invalid configuration file `src/App.css`: Cannot find module '@trivago/prettier-plugin-sort-imports'
2022-08-13T17:30:58.6040619Z [error] Require stack:
2022-08-13T17:30:58.6041633Z [error] - /home/runner/work/react-wordle/react-wordle/prettier.config.js
2022-08-13T17:30:58.6044618Z [error] - /home/runner/work/_actions/creyD/prettier_action/v4.2/node_modules/prettier/third-party.js
2022-08-13T17:30:58.6045469Z [error] - /home/runner/work/_actions/creyD/prettier_action/v4.2/node_modules/prettier/index.js
2022-08-13T17:30:58.6046266Z [error] - /home/runner/work/_actions/creyD/prettier_action/v4.2/node_modules/prettier/cli.js
2022-08-13T17:30:58.6047097Z [error] - /home/runner/work/_actions/creyD/prettier_action/v4.2/node_modules/prettier/bin-prettier.js
2022-08-13T17:30:58.6141363Z Problem running prettier with --check src
2022-08-13T17:30:58.6171610Z ##[error]Process completed with exit code 1.

What should've happened? I expect the plugin files to be found and executed properly.

How did it look?

Where did you encounter the problem? https://github.com/cwackerfuss/react-wordle/runs/7820780587?check_suite_focus=true

• Repo: [e.g. URL to your repository]
• Version: pretter_action v4.2

[creyD]

Maybe we would need to install the plugins globally to be used with a config?

[igitur]

@creyD Is there anything I can do from my side to check that?

[creyD]

It should be possible to do it like this: prettier_plugins: '@trivago/prettier-plugin-sort-imports prettier-plugin-tailwindcss --global'

[igitur]

No, that unfortunately doesn't work.

Looks like the @trivago/prettier-plugin-sort-imports prettier-plugin-tailwindcss --global is implicitly parsed as 3 separate strings.

[igitur]

I can try submit a PR to add a new option to install prettier and/or its plugins globally, but how does one test GitHub actions locally?

[creyD]

@igitur That's very generous of you to offer, thanks a lot! I myself didn't find a way yet, at least not with the way this action is built (I think docker based actions are more easily tested). What I always do is to create a separate test repo with just one js file in it and the action configured to creyd/prettier_action@latest (you would need to replace the username with your own name to test against your own action and you could exchange latest with any version statement or a branch etc). Hope this helps!

[igitur]

Lots of debugging but I got closer. Because I'm using prettier and its plugins via a require(), I have install them in the project folder, which in this case is /home/runner/work/react-wordle/react-wordle/. Reference: https://docs.npmjs.com/cli/v8/configuring-npm/folders/ (Install it locally if you're going to require() it.).

But for some reason (and I can't figure out why), everything that is installed locally gets installed to /home/runner/work/_actions/creyD/prettier_action/v4.2/.

npm prefix yields /home/runner/work/_actions/creyD/prettier_action/v4.2/ so clearly npm believes that is the 'local' folder. A pwd yields /home/runner/work/react-wordle/react-wordle/ so I don't understand why the difference.

And it's this discrepancy between the 2 directories that makes prettier unable to find the plugin module.

I solved this by amending my lint.yml Github actions file to run a npm install first (I have prettier and the plugins in my package.json too). This works for me, but for people who don't have the library entries in a package.json this won't work and I still believe there must a be more elegant solution.

[creyD]

How would you advise to go forward? @igitur Should we mark this issue as solved or are you still working on a fix?

[igitur]

Happy to close this.