Context
- ALM used : Azure DevOps
- CI system used : Azure DevOps
- Scanner command used when applicable (private details masked) :
- task: SonarCloudPrepare@1
inputs:
SonarCloud: 'SonarCloud-Clement'
organization: 'assoconnect'
scannerMode: 'CLI'
configMode: 'manual'
cliProjectKey: 'assoconnect_frontend'
cliProjectName: 'frontend'
cliProjectVersion: '$(Build.BuildNumber)'
cliSources: 'src'
extraProperties: |
sonar.tests=src
sonar.test.inclusions=**/__tests__/**
sonar.coverage.exclusions=src/pages/**
sonar.junit.reportPaths=junit.xml
sonar.typescript.lcov.reportPaths=coverage/lcov.info
sonar.typescript.tsconfigPath=tsconfig.json
displayName: 'Prepare SonarQube analysis'
- task: SonarCloudAnalyze@1
displayName: 'Run SonarQube analysis'
- task: SonarCloudPublish@1
inputs:
pollingTimeoutSec: '300'
displayName: 'Publish SonarQube analysis result'
- Languages of the repository : TypeScript
Problem observed
For all our imports in .tsx files , we have instances of the “Dependencies should be explicit (typescript:S4328)” issue.
We have configured a baseUrl (https://www.typescriptlang.org/docs/handbook/module-resolution.html#base-url) in our tsconfig.json file so that we don’t have to deal with relative paths.
WebStorm seems OK with this config and the linter doesn’t show any message. But in Sonar, when we import a module, since there is no ./ prepending, it thinks it is an external module and looks for it in the dependencies.
Example
- our layout is :
src/
|___pages/
| |___Index/
| |___index.tsx
| |___type.tsx
|___App.tsx
package.json
tsconfig.json
- files contents
// package.json
// nothing path-related, only external dependencies
...
// tsconfig.json
{
"compilerOptions": {
"baseUrl": "./src/",
...
# src/App.tsx
...
import Index from 'pages/Index' # => ISSUE : Dependencies should be explicit (typescript:S4328)
...
# src/pages/Index/index.tsx
...
import * as Type from './type' # => OK, NO ISSUES
...
import { StoreContext } from 'store' # => ISSUE : Dependencies should be explicit (typescript:S4328)
...
export default () => (
...
