Including a package within another package gives some problems.

[Jarrodsz]

Im trying to include a package inside another package. And have some problems, probably a small oversight.
I already used gpt to debug it but still get errors. Code examples shortened for clarity.

The case:

packages/site/package.json

{
  "name": "@core/site",
  "description": "Site package",
  "version": "1.0.0",
  "private": true,
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "module": "./dist/index.mjs",
  "files": [
    "dist/**"
  ],
  "license": "MIT",
  "scripts": {
    "build": "tsup src/index.tsx --format esm,cjs --dts --external react && tailwindcss -i ./src/styles.css -o ./dist/styles.css",
    "dev": "tsup src/index.tsx --format esm,cjs --dts --external react --watch & tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch",
    "clean": "rm -rf dist",
    "lint": "eslint ./src --fix",
    "typecheck": "tsc --project ./tsconfig.json --noEmit"
  },
  "dependencies": {
    "@core/config": "*",

ETC

packages/site/src/components/Navbar.tsx

import { configuration } from "@core/config";

...

export const Navbar = ({ minimal, userLoggedIn, sticky = true }: { minimal: boolean; userLoggedIn: boolean; sticky?: boolean }) => {

  return (
    <>
                  {configuration.meta.siteName}
  </>

Then I install in my remix-app example/package.json ( both the config and site packages )

 "dependencies": {
    "@core/config": "*",
    "@core/site": "*",

And run ( after pnpm install from the turbo repro root ):

pnpm run --filter remix-app dev

Outputs:

[1] Rebuilding...
[3] ✅ app ready: http://localhost:3000
[2] Watching Remix app in development mode...
[2] 💿 Building...
[2] ✘ [ERROR] Could not resolve "@core/config"
[2]
[2]     ../../packages/site/src/components/FeatureVideo.tsx:2:30:
[2]       2 │ import { configuration } from "@core/config";
[2]         ╵                               ~~~~~~~~~~~~~~
[2]
[2]   You can mark the path "@core/config" as external to exclude it from the bundle, which will remove this error.
[2]
[2]
[2] ✘ [ERROR] Could not resolve "@core/config"
[2]
[2]     ../../packages/site/src/components/Footer.tsx:2:30:
[2]       2 │ import { configuration } from "@core/config";
[2]         ╵                               ~~~~~~~~~~~~~~
[2]
[2]   You can mark the path "@core/config" as external to exclude it from the bundle, which will remove this error.
[2]
[2]
[2] ✘ [ERROR] Could not resolve "@core/config"
[2]
[2]     ../../packages/site/src/components/Navbar.tsx:2:30:
[2]       2 │ import { configuration } from "@core/config";
[2]         ╵                               ~~~~~~~~~~~~~~
[2]
[2]   You can mark the path "@core/config" as external to exclude it from the bundle, which will remove this error.
[2]
[2]
[2] 💿 Rebuilt in 652ms

Also tried adding to tsconfig in the site package:

{
  "compilerOptions": {
    "lib": [
      "dom",
      "ES2015"
    ],
    "module": "ESNext",
    "target": "ES6",
    "jsx": "react-jsx",
    "paths": {
     "@core/config": ["../config"]
    }
  },
  "extends": "@core/tsconfig/react-library.json",
  "include": [
    "src"
  ],
  "exclude": [
    "dist",
    "build",
    "node_modules"
  ]
}

I literally tried everything but cannot get this resolved.
What is it I overlook, or do i need to approach this differently?

The configuration package contains a configuration base object for my whole app that i need in several other packages.
Really did some digging on this but cannot figure it out, hope someone knows.

[PhilDL]

Hi, this setup is a little bit strange. If config is an internal package used by other packages it shouldn't be imported directly in the remix app I think. If remix needs to use it and the packages are not bundled then the Remix app needs to bundle them, and add their path to its tsconfig also. (Careful the path are relative "../" maybe something else from the remix app root tsconfig).

I have another monorepo setup here https://github.com/PhilDL/ts-ghost that contains packages that are published to npm:

These 2 packages are published and exposed to the public:

• content-api
• admin-api

The package core-api is included in both of them.

Then you have a Remix app (and a NextJs app) in the folder examples/remix, this remix app just uses these packages:

"dependencies": {
    // other stuff
    "@ts-ghost/admin-api": "*",
    "@ts-ghost/content-api": "*",
}

The app don't import core-api and it is working fine because admin-api and content-api are bundled. Maybe try to look at that repository to get inspiration or missing configs, it is a more "production-ready" example.

[Jarrodsz]

Hi Phil,

The config package is basically just a config package with a json config object I share across projects.
Its a private package not published. I only need to be able to use the @core/config package in other packages or have a way to supply the configuration object derrived from it to other packages.

I also require the use of @core/config inside my remix application since if for example holds the application name.

What would you suggest in that case as the best solution? including the @core/config in my other packages seem to throw these errors.

[PhilDL]

Hello, sorry but I don't really see the point of having a separate package that holds the config of your remix app instead of putting it directly in the remix app. So my solution would be to not have that config package, I see a couple of problems with that current architecture:

• Now if you have a UI package, it depends on a configuration so it is tied to only 1 website config. If you make another website you will make another UI package?
• In the end, couldn't the remix app simply call the Navbar or Footer Components and pass the required information as props?

Generally, packages are meant to be generic, reusable, and composable. Apps (like remix apps) are specific and hold their own config, use different packages, and compose them. Maybe you are thinking too much in "monorepo", not everything has to be a package 😁

[Jarrodsz]

I think your right. I refactor it and close this one thank you.