0

I have project that I have not touched in a year that I am trying to get back going but when I run

node --es-module-specifier-resolution=node ./node_modules/@angular/cli/bin/ng serve

I get a compile failure. The first error is: Error:

src/app/pages/create/components/steps/offer/offer.component.ts:2:35 - error TS2307: Cannot find module '@yoyoreact/yoyo-shared' or its corresponding type declarations.

The @yoyoreact/yoyo-shared is installed and in mode_modules (at least I think it is installed). I suspect that it is meaningful that visual studio code does not seem to recognise the package either.

enter image description here

Note the use of --es-module-specifier-resolution=node I thought perhaps it has something to do with this.

Suggestions on what the problem is here would be helpful.

Here is my package.json:

{
    "name": "yoyo-experience",
    "version": "1.0.0",
    "type": "module",
    "scripts": {
        "start": "ng serve --port 4001",
        "start:local": "node --es-module-specifier-resolution=node ./node_modules/@angular/cli/bin/ng serve --port 4600 --configuration = local",
        "build": "ng build",
        "build:prod": "NODE_ENV=production ng build --configuration production",
        "deploy": "yarn build && firebase use yoyoreact-dev && firebase deploy --only hosting:yoyo-dev-experience",
        "deploy:prod": "yarn build:prod && firebase use yoyoreact-prod && firebase deploy --only hosting:yoyo-experience",
        "lint": "ng lint",
        "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
        "storybook": "yarn docs:json && start-storybook -p 6006",
        "build-storybook": "yarn docs:json && build-storybook"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^14.0.4",
        "@angular/common": "^14.0.4",
        "@angular/compiler": "^14.0.4",
        "@angular/core": "^14.0.4",
        "@angular/forms": "^14.0.4",
        "@angular/platform-browser": "^14.0.4",
        "@angular/platform-browser-dynamic": "^14.0.4",
        "@angular/router": "^14.0.4",
        "@tailwindcss/forms": "^0.4.0",
        "@yoyoreact/yoyo-shared": "git+https://github.com/yoyoreact/yoyo-shared.git",
        "bowser": "^2.11.0",
        "firebase": "^8.6.1",
        "jasmine": "^4.1.0",
        "jasmine-core": "^4.1.1",
        "karma": "^6.3.20",
        "karma-chrome-launcher": "^3.1.1",
        "karma-coverage": "^2.2.0",
        "karma-coverage-istanbul-reporter": "^3.0.3",
        "karma-jasmine": "^5.0.1",
        "karma-jasmine-html-reporter": "^1.7.0",
        "ng-circle-progress": "^1.6.0",
        "npm-check-updates": "^16.10.16",
        "recordrtc": "^5.6.1",
        "rxjs": "~6.6.0",
        "tslib": "^2.6.0",
        "zone.js": "~0.11.4"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^14.2.12",
        "@angular-eslint/builder": "^16.1.0",
        "@angular-eslint/eslint-plugin": "16.1.0-alpha.0",
        "@angular-eslint/eslint-plugin-template": "16.1.0-alpha.0",
        "@angular-eslint/schematics": "16.1.0-alpha.0",
        "@angular-eslint/template-parser": "16.1.0-alpha.0",
        "@angular/cli": "^14.0.4",
        "@angular/compiler-cli": "^14.0.4",
        "@angular/language-service": "^14.0.4",
        "@babel/core": "^7.18.6",
        "@compodoc/compodoc": "^1.1.19",
        "@storybook/addon-actions": "^6.5.9",
        "@storybook/addon-essentials": "^6.5.9",
        "@storybook/addon-interactions": "^6.5.9",
        "@storybook/addon-links": "^6.5.9",
        "@storybook/angular": "^6.5.9",
        "@storybook/builder-webpack5": "^6.5.9",
        "@storybook/manager-webpack5": "^6.5.9",
        "@storybook/testing-library": "^0.0.13",
        "@types/node": "^12.20.4",
        "@types/recordrtc": "^5.6.5",
        "@typescript-eslint/eslint-plugin": "5.59.7",
        "@typescript-eslint/parser": "5.59.7",
        "autoprefixer": "10.4.5",
        "babel-loader": "^8.2.5",
        "codelyzer": "^6.0.0",
        "eslint": "^8.40.0",
        "postcss": "^8.4.12",
        "tailwindcss": "3.0.24",
        "ts-node": "~7.0.0",
        "tslint": "^6.1.3",
        "typescript": "^4.7.1-rc"
    },
    "resolutions": {
        "webpack": "5.66.0"
    }
}
ruth
  • 29,535
  • 4
  • 30
  • 57
mg360
  • 103
  • 2
  • 10
  • It looks like that repo is private, so no one who views this question would be able to see if it has a main or module field, types, and a correct package.json. Are you able to post any of that relevant code? Do you need to update module resolution in that module if you're [on a new version of Node](https://stackoverflow.com/questions/74660824/nodejs-v19-drops-support-for-es-module-specifier-resolution-node-which-makes-i)? – Zac Anger Jul 23 '23 at 03:55
  • Thank you for the reply. Can't make the repo public and do need the help so would be keen to know what else I can show beyond the package.json (happy to paste in whatever). Thanks for the suggestion on module resolution I will research that. – mg360 Jul 23 '23 at 22:37

1 Answers1

0

The answer to the problems in this question were a misunderstanding of how .npmrc files work and node version.

Specifically that in this .npmrc @yoyoreact is not a username but the organisation and anyone's access token (assuming they have permission in the repo) will work.

//npm.pkg.github.com/:_authToken=
@yoyoreact:registry=https://npm.pkg.github.com

The next thing was a misunderstanding of node version. In the package.json you can see that it is calling for angular version 14.0.4. I thought this meant I would need a similar node version. It turned when I used node 16 on this and got the .npmrc right this worked.

mg360
  • 103
  • 2
  • 10