yakovlev-alexey / parcel-resolver-ts-base-url Goto Github PK

I just installed this along with what I think are its dependencies (detailed in the .parcelrc file) and I get the following output.

I think there may be some peer depdency issues so Ive posted my package.json beneath the errors

I installed @parcel/config-default @parcel/transformer-typescript-tsc @parcel/validator-typescript as they are included in the .parcelrc file not sure if that was the right thing to do.

npm run dev

[email protected] dev
npx parcel src/index.html -p 1234

Server running at http://localhost:1234

@parcel/transformer-js: Mutating process.env is not supported

/Users/laurence.fass/SSG/events-service-ui/node_modules/dotenv/lib/main.js:99:9
98 | if (!process.env.hasOwnProperty(key)) {
Server running at http://localhost:1234

@parcel/transformer-js: Mutating process.env is not supported

/Users/laurence.fass/SSG/events-service-ui/node_modules/dotenv/lib/main.js:99:9
98 | if (!process.env.hasOwnProperty(key)) {

99 | process.env[key] = parsed[key]
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
100 | } else if (debug) {
101 | log("${key}" is already defined in \process.env` and will not be overwritten`)

@parcel/resolver-default: Auto installing polyfill for Node builtin module "querystring"...

/Users/laurence.fass/SSG/events-service-ui/node_modules/url/url.js:100:27
99 | },

100 | querystring = require('querystring');
| ^^^^^^^^^^^^^ used here
101 |
102 | function urlParse(url, parseQueryString, slashesDenoteHost) {
Server running at http://localhost:1234

@parcel/transformer-js: Mutating process.env is not supported

/Users/laurence.fass/SSG/events-service-ui/node_modules/dotenv/lib/main.js:99:9
98 | if (!process.env.hasOwnProperty(key)) {

99 | process.env[key] = parsed[key]
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
100 | } else if (debug) {
101 | log("${key}" is already defined in \process.env` and will not be overwritten`)

@parcel/resolver-default: Could not find module "buffer" satisfying ^5.5.0.

/Users/laurence.fass/SSG/events-service-ui/package.json:45:5
44 | "@typescript-eslint/parser": "^5.48.0",

45 | "buffer": "^6.0.3",
| ^^^^^^^^ Found this conflicting local requirement.
46 | "crypto-browserify": "^3.12.0",
47 | "eslint": "^8.31.0",

@parcel/resolver-default: Could not find module "punycode" satisfying ^1.4.1.

/Users/laurence.fass/SSG/events-service-ui/package.json:58:5
57 | "process": "^0.11.10",

58 | "punycode": "^1.4.1",
| ^^^^^^^^^^ Found this conflicting local requirement.
59 | "querystring-es3": "^0.2.1",
60 | "stream-browserify": "^3.0.0",

✨ Built in 1.09s
package.json

{
"name": "xxxx",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "npx jest",
"test:watch": "npx jest --watch",
"lint": "npx eslint . --ext .ts --ext .tsx",
"lint:fix": "npx eslint . --fix --ext .ts --ext .tsx",
"dev": "npx parcel src/index.html -p 1234",
"start": "http-server ./dist-${NODE_ENV} -p 1234 --proxy http://localhost:1234/? ./dist-${NODE_ENV}",
"check": "npx tsc",
"build": "npm run lint && npm run check && parcel build src/index.html",
"api": "node api/api.js",
"prettier:check": "prettier --check .",
"prettier:format": "prettier --write ."
},
"repository": {
"type": "git",
"url": "ssh://[email protected]/b2b/events-service-ui.git"
},
"author": "",
"license": "ISC",
"dependencies": {
"@ssgat/api-ui-core": "^0.0.40",
"@tinymce/tinymce-react": "^4.2.0",
"http-server": "^14.1.0",
"lodash": "^4.17.21",
"oddslib": "^2.1.0",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-router-dom": "^6.3.0",
"swr": "^1.3.0"
},
"devDependencies": {
"@parcel/config-default": "^2.8.2",
"@parcel/transformer-sass": "^2.7.0",
"@parcel/transformer-typescript-tsc": "^2.8.2",
"@parcel/validator-typescript": "^2.8.2",
"@types/jest": "^29.2.5",
"@types/node": "^18.11.18",
"@types/react-dom": "^18.0.10",
"@typescript-eslint/eslint-plugin": "^5.48.0",
"@typescript-eslint/parser": "^5.48.0",
"buffer": "^6.0.3",
"crypto-browserify": "^3.12.0",
"eslint": "^8.31.0",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-unused-imports": "^2.0.0",
"events": "^3.3.0",
"jest": "^29.3.1",
"parcel": "^2.7.0",
"parcel-resolver-tspaths": "^0.0.9",
"path-browserify": "^1.0.1",
"prettier": "2.7.1",
"process": "^0.11.10",
"punycode": "^1.4.1",
"querystring-es3": "^0.2.1",
"stream-browserify": "^3.0.0",
"ts-jest": "^29.0.3",
"typescript": "^4.9.4",
"url": "^0.11.0"
},
"os": [
"darwin",
"linux"
],
"cpu": [
"x64",
"arm64"
]
}

any help and advice is appreciated.

thanks

Typescript compiler (and the rest of toolchain) assumes that tsconfig.json is JSONC.
JSONC allows for neat features like comments, or trailing commas in arrays.

This resolver, hovewer, assumes that tsconfig.json is JSON; that means it will break on comments and other stuff.

For example, following part of tsconfig.json breaks the parsing in this resolver for several reasons:

"compilerOptions": {
  "outDir": "js",
  "rootUrl": "./src/",
  "baseUrl": "./src/",
  // this one is for beatiful imports!
  "paths": {
      "*": [
          "./*",
      ]
  },
}

This works fine on my local machine but falls over in Docker. i.e. it fails to resolve my tsconfig paths.

Is there any docker specific advice or lessons learned you can offer to get this working inside a container?

i.e. what packages need go in "dependencies" and which in "dev-dependencies" to get this to work with a prod build? Based on what this does it sounds like it makes this package a prod build dependency as path resolution needs to happen in both . Is that correct?

By default Parcel looks for tsconfig.json files recursively from the file directory to project root. This plugin only uses tsconfig.json from project root.

https://github.com/parcel-bundler/parcel/blob/a171677e90829b4733397160ad177890cb6f2cee/packages/utils/ts-utils/src/loadTSConfig.js#L12

https://github.com/parcel-bundler/parcel/blob/a171677e90829b4733397160ad177890cb6f2cee/packages/core/core/src/public/Config.js#L119

https://github.com/parcel-bundler/parcel/blob/a171677e90829b4733397160ad177890cb6f2cee/packages/core/utils/src/config.js#L25

https://github.com/parcel-bundler/parcel/blob/a171677e90829b4733397160ad177890cb6f2cee/packages/core/fs/src/find.js#L35

Currently parcel-resolver-ts-base-url does not respect extends property in tsconfig.json and only reads paths/baseUrl properties from the config it found.

https://www.typescriptlang.org/tsconfig#extends

It would be a really easy change to support this as well. same format, different name