project reference in typescript not working

Question

im trying to use typescript project refence and it does not seem to work i use node 14.15.4 and typescript 4.5.5 ide webstorm i want to refrence the code from common in server

i have 2 folders

 1 - to_ref
           code
              x.ts
           tsconfig.json
    
    2 - runner
           code
              run.ts
           tsconfig.json   
 3 - base_config
           tsconfig.json

to_ref:

tsconfig.json:

  {
      extends: ../base_config/tsconfig.json
    },
    complierOptions: {
        composite:true,
        rootDir: .
        outDir: ./dist
    }

}

x.ts:

export function f(){
return 'x';
}

runner:

run.ts:

import {f} from "../to_ref/code/x";

f();

tsconfig.json:

    {
      extends: ../base_config/tsconfig.json
    },
    complierOptions: {
        composite:true,
        rootDir: .
        outDir: ./dist
    },
    refernces: [
    {
      path: ../to_ref
    }
]

}

base_config/tsconfig:

{
 complierOptions: {
 target: ES2022,
exprimentalDecorators: true,
emitDecoratorsMetadata: true,
module: commonjs,
moduleResuyltion: node,
strict: true
composite: true,
declaration: true
}
}

i ran npx run tsc in to_ref folder i ran npx run tsc --build in runner folder

when i try to run with nodejs the runner i get MODULE_NOT_FOUND ../to_ref/src/x

can someone help?