CODEWITHSUNDEEP
typescriptvitemonoreponx-monoreposvg-rect
Amir Rezvani
Amir Rezvani

Reputation: 1504

NX monorepo (@nrwl) can no find .svgr config file inside of lib directory

I am new to NX Monorepo with 2 separate react applications. need to have an icons lib to share between both of these apps.

I change the project.json of icons lib and add svg command like so:

{
  "name": "icons",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "libs/icons/src",
  "projectType": "library",
  "tags": [],
  "targets": {
    "svg": {
      "command": "svgr libs/icons/assets",
      "configurations": {
      }
    },
    "lint": {
      "executor": "@nx/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": ["libs/icons/**/*.{ts,tsx,js,jsx}"]
      }
    },
    "build": {
      "executor": "@nx/vite:build",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "outputPath": "dist/libs/icons"
      },
      "configurations": {
        "development": {
          "mode": "development"
        },
        "production": {
          "mode": "production"
        }
      }
    }
  }
}

when i run the yarn nx run icons:svg command it throw the following error

Directory are not supported without `--out-dir` option instead.
Warning: run-commands command "svgr libs/icons/assets" exited with non-zero status code

and if I add --out-dir to the svg command SVGR will successfully generate my icons.

but I need to tell it to use the .svgrrc file that i provided.

{
  "icon": true,
  "dimensions": false,
  "expandProps": true, 
  "typescript": true,
  "outDir":"src/",
  "replaceAttrValues": {
      "#000":"currentColor",
      "#292D32":"currentColor"
  }
}

Upvotes: 0

Views: 507

Answers (1)

Amir Rezvani
Amir Rezvani

Reputation: 1504

after some testing and research, I found that inside nx.json we can add svgr config file it works for me like so:

"namedInputs": {
    "default": ["{projectRoot}/**/*", "sharedGlobals"],
    "production": [
      "default",
      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
      "!{projectRoot}/tsconfig.spec.json",
      "!{projectRoot}/.eslintrc.json",
      "!{projectRoot}/.svgrrc" // ===> I put .svgrrc inside of root folder
    ],
    "sharedGlobals": []
  },

Upvotes: 0

Related Questions