I am encountering an issue with my ReactJs app that uses Craco, Webpack, and Typescript. While the application can run and build successfully locally, I am facing problems when trying to build it on Azure DevOps, specifically in creating aliases.
azure pipeline.yml
- task: NodeTool@0
inputs:
versionSpec: '12.x'
displayName: 'Install Node.js'
# Installing development dependencies
- script: npm install
displayName: 'Installing Packages'
# Building release
- script: npm run build
failOnStderr: true
displayName: 'Creating optimized build'
craco.config.json
module.exports = {
plugins: [
{
plugin: require('craco-alias'),
options: {
source: 'tsconfig',
baseUrl: './src',
tsConfigPath: './tsconfig.paths.json',
debug: false,
},
},
],
webpack: {},
};
tsconfig.paths.json
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"Api": ["./api"],
"Components": ["./components"],
}
}
}
Azure Pipeline Error
TypeScript error in /home/vsts/work/1/s/src/App.tsx(6,20):
Cannot find module 'Components/Header/Header' or its corresponding type declarations. TS2307
4 | import { LastLocationProvider } from 'react-router-last-location';
5 |
> 6 | import Header from 'Components/Header/Header';
| ^
7 | import Routes from './Routes';
8 |
9 | import * as CommonActions from 'State/actions';
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a6b7b7e9a2bfa6aab7aba287f7e9f6e9f7">[email protected]</a> build: `craco build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="355445451b504d545845595075051b041b05">[email protected]</a> build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/vsts/.npm/_logs/xxx-debug.log
##[error]Bash exited with code '1'.
##[error]Bash wrote one or more lines to the standard error stream.
##[error]The following changes are being made to your tsconfig.json file:
##[error] - compilerOptions.paths must not be set (aliased imports are not supported)
##[error]npm
##[error] ERR! code ELIFECYCLE
npm
##[error]ERR! errno
##[error] 1
##[error]npm
##[error] ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2f3e3e602b362f233e222b0e7e607f607e">[email protected]</a> build: `craco build`
npm
##[error]ERR! Exit status 1
##[error]npm
##[error]Additional writes to stderr truncated