title: How to fix Unknown compiler option 'importsNotUsedAsValues'. error?
body: <p>I have a project with following config files:</p>
  <p><strong>tsconfig.json</strong> file</p>
  <pre><code>{
      &quot;compilerOptions&quot;: {
          &quot;outDir&quot;: &quot;./dist&quot;,
          &quot;module&quot;: &quot;esnext&quot;,
          &quot;target&quot;: &quot;es5&quot;,
          &quot;lib&quot;: [&quot;es6&quot;, &quot;dom&quot;],
          &quot;sourceMap&quot;: true,
          &quot;allowJs&quot;: true,
          &quot;jsx&quot;: &quot;react&quot;,
          &quot;moduleResolution&quot;: &quot;node&quot;,
          &quot;noImplicitReturns&quot;: true,
          &quot;noImplicitThis&quot;: true,
          &quot;noImplicitAny&quot;: true,
          &quot;strictNullChecks&quot;: true,
          &quot;baseUrl&quot;: &quot;./&quot;,
          &quot;rootDir&quot;: &quot;./&quot;,
          &quot;typeRoots&quot;: [&quot;./node_modules/@types&quot;, &quot;./src/@types&quot;],
          &quot;paths&quot;: {
              &quot;@src/*&quot;: [&quot;src/*&quot;],
              &quot;@images/*&quot;: [&quot;src/images/*&quot;],
              &quot;@components/*&quot;: [&quot;src/components/*&quot;],
              &quot;@pages/*&quot;: [&quot;src/pages/*&quot;],
              &quot;@modules/*&quot;: [&quot;src/modules/*&quot;],
              &quot;@hooks/*&quot;: [&quot;src/hooks/*&quot;],
              &quot;@routing/*&quot;: [&quot;src/routing/*&quot;],
              &quot;@utils/*&quot;: [&quot;src/utils/*&quot;],
              &quot;@locales/*&quot;: [&quot;src/locales/*&quot;],
              &quot;@gql/*&quot;: [&quot;src/gql/*&quot;]
          },
          &quot;allowSyntheticDefaultImports&quot;: true,
          &quot;esModuleInterop&quot;: true,
          &quot;importsNotUsedAsValues&quot;: &quot;preserve&quot;,
          &quot;resolveJsonModule&quot;: true,
          &quot;skipLibCheck&quot;: false
      },
      &quot;exclude&quot;: [
          &quot;node_modules&quot;,
          &quot;webpack&quot;,
          &quot;src/gql/types.ts&quot;,
          &quot;src/**/*generated.ts&quot;
      ]
  }
  </code></pre>
  <p>My <strong>package.json</strong> file with  <strong>&quot;typescript&quot;: &quot;4.1.2&quot;</strong></p>
  <pre><code>{
      &quot;name&quot;: &quot;application&quot;,
      &quot;version&quot;: &quot;1.0.0&quot;,
      &quot;description&quot;: &quot;application&quot;,
      &quot;license&quot;: &quot;UNLICENSED&quot;,
      &quot;main&quot;: &quot;webpack.config.babel.js&quot;,
      &quot;scripts&quot;: {
          &quot;build&quot;: &quot;webpack --config webpack.config.babel.js&quot;,
          &quot;profile&quot;: &quot;webpack --profile --json --config webpack.config.babel.js &gt; ./dist/profile.json &amp;&amp; webpack-bundle-analyzer ./dist/profile.json&quot;,
          &quot;start:withoutAuth&quot;: &quot;webpack serve --env skipAuth --env mode=dev --env isDevServer --env NODE_ENV=local --config webpack.config.babel.js&quot;,
          &quot;start&quot;: &quot;concurrently \&quot;webpack serve --env mode=dev --env isDevServer --env NODE_ENV=local --config webpack.config.babel.js\&quot; \&quot;yarn build:gql --watch\&quot;&quot;,
          &quot;test&quot;: &quot;npm run build:messages &amp;&amp; jest&quot;,
          &quot;test:watch&quot;: &quot;npm run build:messages &amp;&amp; jest --watch&quot;,
          &quot;lint:types&quot;: &quot;tsc --noEmit&quot;,
          &quot;lint&quot;: &quot;eslint 'src/**/*.{js,ts,tsx}' --quiet --fix &amp;&amp; npm run lint:types&quot;,
          &quot;build:messages&quot;: &quot;formatjs extract --out-file extracted.json ./src/**/messages.ts &amp;&amp; formatjs compile --out-file ./src/locales/en.json extracted.json&quot;,
          &quot;build:gql&quot;: &quot;graphql-codegen --config .graphqlrc.js&quot;,
          &quot;build:gql:watch&quot;: &quot;graphql-codegen --config .graphqlrc.js --watch&quot;,
          &quot;fetchToken&quot;: &quot;node scripts/fetch-token.js&quot;
      },
      &quot;husky&quot;: {
          &quot;hooks&quot;: {
              &quot;pre-commit&quot;: &quot;lint-staged&quot;,
              &quot;post-commit&quot;: &quot;git update-index --again&quot;
          }
      },
      &quot;dependencies&quot;: {
          &quot;@apollo/client&quot;: &quot;^3.3.7&quot;,
          &quot;@apollo/link-context&quot;: &quot;^2.0.0-beta.3&quot;,
          &quot;@apollo/link-error&quot;: &quot;^2.0.0-beta.3&quot;,
          &quot;@react-keycloak/web&quot;: &quot;^3.4.0&quot;,
          &quot;@types/classnames&quot;: &quot;2.2.11&quot;,
          &quot;@types/react&quot;: &quot;17.0.0&quot;,
          &quot;@types/react-dom&quot;: &quot;17.0.0&quot;,
          &quot;@types/react-router-dom&quot;: &quot;5.1.6&quot;,
          &quot;classnames&quot;: &quot;2.2.6&quot;,
          &quot;dayjs&quot;: &quot;1.9.7&quot;,
          &quot;docz&quot;: &quot;latest&quot;,
          &quot;graphql&quot;: &quot;^15.4.0&quot;,
          &quot;keycloak-js&quot;: &quot;10.0.2&quot;,
          &quot;lodash&quot;: &quot;4.17.20&quot;,
          &quot;react&quot;: &quot;17.0.1&quot;,
          &quot;react-dnd&quot;: &quot;^11.1.3&quot;,
          &quot;react-dnd-html5-backend&quot;: &quot;^11.1.3&quot;,
          &quot;react-dom&quot;: &quot;17.0.1&quot;,
          &quot;react-intl&quot;: &quot;5.10.6&quot;,
          &quot;react-router-dom&quot;: &quot;5.2.0&quot;,
      },
      &quot;devDependencies&quot;: {
          &quot;@babel/core&quot;: &quot;7.12.9&quot;,
          &quot;@babel/plugin-proposal-class-properties&quot;: &quot;~7.12.1&quot;,
          &quot;@babel/plugin-proposal-export-default-from&quot;: &quot;^7.12.1&quot;,
          &quot;@babel/plugin-proposal-export-namespace-from&quot;: &quot;~7.12.1&quot;,
          &quot;@babel/plugin-proposal-object-rest-spread&quot;: &quot;^7.12.1&quot;,
          &quot;@babel/plugin-proposal-throw-expressions&quot;: &quot;~7.12.1&quot;,
          &quot;@babel/plugin-syntax-dynamic-import&quot;: &quot;~7.8.3&quot;,
          &quot;@babel/preset-env&quot;: &quot;~7.12.1&quot;,
          &quot;@babel/preset-react&quot;: &quot;~7.12.1&quot;,
          &quot;@babel/register&quot;: &quot;^7.12.1&quot;,
          &quot;@formatjs/cli&quot;: &quot;^2.13.15&quot;,
          &quot;@graphql-codegen/add&quot;: &quot;^2.0.2&quot;,
          &quot;@graphql-codegen/cli&quot;: &quot;^1.20.0&quot;,
          &quot;@graphql-codegen/near-operation-file-preset&quot;: &quot;^1.17.13&quot;,
          &quot;@graphql-codegen/typescript&quot;: &quot;^1.19.0&quot;,
          &quot;@graphql-codegen/typescript-operations&quot;: &quot;^1.17.13&quot;,
          &quot;@graphql-codegen/typescript-react-apollo&quot;: &quot;^2.2.1&quot;,
          &quot;@pmmmwh/react-refresh-webpack-plugin&quot;: &quot;~0.5.0-beta.0&quot;,
          &quot;@svgr/webpack&quot;: &quot;5.5.0&quot;,
          &quot;@types/enzyme&quot;: &quot;^3.10.8&quot;,
          &quot;@types/jest&quot;: &quot;^26.0.15&quot;,
          &quot;@types/react-test-renderer&quot;: &quot;^17.0.0&quot;,
          &quot;@typescript-eslint/eslint-plugin&quot;: &quot;4.8.2&quot;,
          &quot;@typescript-eslint/parser&quot;: &quot;4.8.2&quot;,
          &quot;@wojtekmaj/enzyme-adapter-react-17&quot;: &quot;^0.4.0&quot;,
          &quot;babel-eslint&quot;: &quot;~10.1.0&quot;,
          &quot;babel-loader&quot;: &quot;~8.2.1&quot;,
          &quot;clean-webpack-plugin&quot;: &quot;~3.0.0&quot;,
          &quot;concurrently&quot;: &quot;^5.3.0&quot;,
          &quot;core-js&quot;: &quot;~3.7.0&quot;,
          &quot;dotenv&quot;: &quot;^8.2.0&quot;,
          &quot;enzyme&quot;: &quot;^3.11.0&quot;,
          &quot;eslint&quot;: &quot;7.14.0&quot;,
          &quot;eslint-config-airbnb-base&quot;: &quot;~14.2.0&quot;,
          &quot;eslint-config-airbnb-typescript&quot;: &quot;~12.0.0&quot;,
          &quot;eslint-config-prettier&quot;: &quot;~6.15.0&quot;,
          &quot;eslint-import-resolver-alias&quot;: &quot;~1.1.2&quot;,
          &quot;eslint-plugin-import&quot;: &quot;~2.22.1&quot;,
          &quot;eslint-plugin-jsx-a11y&quot;: &quot;~6.4.1&quot;,
          &quot;eslint-plugin-react&quot;: &quot;~7.21.5&quot;,
          &quot;eslint-plugin-react-hooks&quot;: &quot;~4.2.0&quot;,
          &quot;eslint-webpack-plugin&quot;: &quot;2.4.0&quot;,
          &quot;fork-ts-checker-webpack-plugin&quot;: &quot;~6.0.1&quot;,
          &quot;html-loader&quot;: &quot;~1.3.2&quot;,
          &quot;html-webpack-plugin&quot;: &quot;~5.0.0-alpha.6&quot;,
          &quot;husky&quot;: &quot;~4.3.0&quot;,
          &quot;import-sort-style-module-and-prefix&quot;: &quot;~0.1.3&quot;,
          &quot;jest&quot;: &quot;^26.6.3&quot;,
          &quot;jest-svg-transformer&quot;: &quot;^1.0.0&quot;,
          &quot;lint-staged&quot;: &quot;~10.5.0&quot;,
          &quot;path&quot;: &quot;~0.12.7&quot;,
          &quot;prettier&quot;: &quot;2.2.0&quot;,
          &quot;prettier-plugin-import-sort&quot;: &quot;~0.0.6&quot;,
          &quot;pretty-quick&quot;: &quot;~3.1.0&quot;,
          &quot;react-refresh&quot;: &quot;~0.9.0&quot;,
          &quot;react-test-renderer&quot;: &quot;^17.0.1&quot;,
          &quot;regenerator-runtime&quot;: &quot;~0.13.7&quot;,
          &quot;svg-url-loader&quot;: &quot;~6.0.0&quot;,
          &quot;terser-webpack-plugin&quot;: &quot;~5.0.1&quot;,
          &quot;ts-jest&quot;: &quot;^26.4.4&quot;,
          &quot;ts-loader&quot;: &quot;~8.0.7&quot;,
          &quot;typescript&quot;: &quot;4.1.2&quot;,
          &quot;url-loader&quot;: &quot;~4.1.1&quot;,
          &quot;webpack&quot;: &quot;5.6.0&quot;,
          &quot;webpack-bundle-analyzer&quot;: &quot;~4.1.0&quot;,
          &quot;webpack-cli&quot;: &quot;4.5.0&quot;,
          &quot;webpack-dev-server&quot;: &quot;~3.11.0&quot;,
          &quot;webpack-merge&quot;: &quot;5.4.0&quot;,
          &quot;webpack-shell-plugin-next&quot;: &quot;^2.0.8&quot;,
          &quot;yargs&quot;: &quot;~16.1.0&quot;
      },
      &quot;importSort&quot;: {
          &quot;.ts, .tsx&quot;: {
              &quot;style&quot;: &quot;module-and-prefix&quot;,
              &quot;parser&quot;: &quot;typescript&quot;
          },
          &quot;.js, .jsx&quot;: {
              &quot;style&quot;: &quot;module-and-prefix&quot;,
              &quot;parser&quot;: &quot;babylon&quot;
          }
      }
  }
  </code></pre>
  <p>I want create documentation for my components and run my <a href="https://www.docz.site/" rel="nofollow noreferrer">docz</a> app:</p>
  <pre><code>yarn docz dev
  </code></pre>
  <p>But it gives me an error:</p>
  <blockquote>
  <pre><code> ERROR 
  
  Failed to process data server
  
   ERROR 
  
  {
    file: undefined,
    start: undefined,
    length: undefined,
    messageText: &quot;Unknown compiler option 'importsNotUsedAsValues'.&quot;,
    category: 1,
    code: 5023,
    reportsUnnecessary: undefined
  }
  
  not finished source and transform nodes - 1.311s
  </code></pre>
  </blockquote>
  <p>If I remove <strong>importsNotUsedAsValues</strong> prop from tsconfig - the error goes away.</p>
  <p>But how to handle the error WITH <strong>importsNotUsedAsValues</strong> prop ?</p>