Usage / NM Issue

[Rafcin]

Hi Jerome! I really like your repo design and I've been tinkering with it and planning to build a library for my own site using this system. As I was messing around with it, I ran into this issue when building the NextJS app. I keep getting these inference issues that point back to my design system and I'm wondering if you ever run into something like this:

fox-app:build: ./node_modules/@fox-dls/design-system/src/components/aspect-ratio/styles/aspec-ratio.styles.tsx:5:14
fox-app:build: Type error: The inferred type of 'AspectRatioRoot' cannot be named without a reference to '@fox-dls/design-system/node_modules/@emotion/styled'. This is likely not portable. A type annotation is necessary.
fox-app:build: 
fox-app:build:   3 | 
fox-app:build:   4 | // Use to control the width of the content, usually in a flexbox row container
fox-app:build: > 5 | export const AspectRatioRoot = styled('div', {
fox-app:build:     |              ^
fox-app:build:   6 |   name: 'MuiAspectRatio',
fox-app:build:   7 |   slot: 'Root',
fox-app:build:   8 |   overridesResolver: (props, styles) => styles.root

I thought it was an issue with nm being pointed wrong but I'm not actually sure what this is. I wiped node modules and everything. The components and everything are also written in the same style and file structure as you have written them.

[JeromeFitz]

Hi @Rafcin ! Thanks for the kind words. I can't remember running into this specifically, but did a search and I 100% went to this thread at one point 🧵 :

• The inferred type of "X" cannot be named without a reference to "Y". This is likely not portable. A type annotation is necessary. microsoft/TypeScript#42873

Are you using pnpm? You may want to look into hoisting and this comment specifically:

• The inferred type of "X" cannot be named without a reference to "Y". This is likely not portable. A type annotation is necessary. microsoft/TypeScript#42873 (comment)

I believe I cheated awhile back and just did shamefully-hoist=true in .npmrc

Yes, can confirm. Looking back at the litany of code comments in this file, I think I did this (eventually) and called it a day 😆:

• https://github.com/JeromeFitz/websites/blob/main/.npmrc

Let me know if after digging into it more if you still have any questions or issues. I was thinking this could be something with next-transpile-modules depending on if your website and design-system are in the same monorepo. But I would consider the pnpm approach to see if that uncovers anything first.

[Rafcin]

I'll test it out, I think your current config has shameful hoist off in the packages repo and it has it on in the websites repo. I do use pnpm, I've been using Yarn for a long time and your repo reminded nme pnpm exists 😅 and it's sooo fast!!!! Yea it's an odd issue hopefully the hoisting is the solution! Thank you for the info 🙏🙏!! Btw the way I think the way you have the config folder setup for the entire repo is fantastic, the different tsconfigs and lint's are super clean!

…

On Mon, Jul 11, 2022, 6:03 AM Jerome Fitzgerald ***@***.***> wrote: Hi @Rafcin <https://github.com/Rafcin> ! Thanks for the kind words. I can't remember running into this specifically, but did a search and I 100% went to this thread at one point 🧵 : - microsoft/TypeScript#42873 <microsoft/TypeScript#42873> Are you using pnpm? You may want to look into hoisting and this comment specifically: - microsoft/TypeScript#42873 (comment) <microsoft/TypeScript#42873 (comment)> I believe I cheated awhile back and just did shamefully-hoist=true in .npmrc Yes, can confirm. Looking back at the litany of code comments in this file, I think I did this (eventually) and called it a day 😆: - https://github.com/JeromeFitz/websites/blob/main/.npmrc Let me know if after digging into it more if you still have any questions or issues. I was thinking this could be something with next-transpile-modules depending on if your website and design-system are in the same monorepo. But I would consider the pnpm approach to see if that uncovers anything first. — Reply to this email directly, view it on GitHub <#745 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACQCG67VLTTGPAMMLOXUXMTVTQLTZANCNFSM53FTURXQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[Rafcin]

The NPM approach didn't work unfortunately, and also, yea my design system is in the same monorepo as my site. I have the package @fox-dls/design-system set with next-transpile-modules, so it should theoretically be fine.

[JeromeFitz]

Hrm. 🤔

Is your package importing the ./src files of @fox-dls/design-system? If so, then yes, next-transpile-modules is the way to go. (example in this repo)

If your package is importing the compiled files of @fox-dls/design-system from an npm package, then maybe double-check you are not running next-transpile-modules over it "again". EDIT: Sorry I should read your comment more closely. 😅

Perhaps digging into the tsconfig setup and looking into overrides for baseUrl and preserveSymlinks. Aside from the hoist discussion in the earlier thread posted, there seems to be some discussion around that as well.

[Rafcin]

So I've modified my root ts to follow JeromeFitz/websites, I've added baseURL, preserve symlinks and everything, and the issue to the nm modules seems to be gone but the paths for different folders in the next app seem to messed up, and ts config is complaining the changelog folder in gitmoji isn't under the root?

Root ts throws:
conventional-gitmoji/src/changelog/config.ts' is not under 'rootDir' '/home/raf/Desktop/fox/src'. 'rootDir' is expected to contain all source files.

And in the project itself any paths I had like the ones you have with ~foldername/* throw an errors that they can't find the type declarations.

Cannot find module '@/content/specific/context/auth' or its corresponding type declarations.ts(2307)

[Rafcin]

Edit I was wrong. I fixed the other issues I had the wrong TS config stuff. The hoist issue is back though. Seems it jumped from Emotion/styles to @types/react now.

[Rafcin]

Ah, after some modifications to the TSconfig and npmrc files, I was finally able to get it to work until SWC came my way and threw a bunch of loader issues my way LOL.

fox-app:build: ../../packages/design-system/dist/chunk-IXLHTWVX.js
fox-app:build: Module parse failed: Export 'm' is not defined (235:9)
fox-app:build: File was processed with these loaders:
fox-app:build:  * ../../node_modules/.pnpm/[email protected]_beenoklgwfttvph5dgxj7na7aq/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
fox-app:build: You may need an additional loader to handle the result of these loaders.
fox-app:build: |     };
fox-app:build: | }), k = o("svg")(_templateObject2());
fox-app:build: > export { m as a, g as b, b as c, c as d, u as e, y as f, f as g, h, k as i };

After I solve the above, it should compile fine. SWC is a nightmare.

[Rafcin]

I believe I solved the pnpm issues. The typescript configuration declaration seems to be the root of the issue, without declaration the link issues disappear. The alternative to type annotation issue is to go into paths and set the nm path for every package that fails such as

"@jeromefitz/design-system/*": [
        "../../node_modules/@jeromefitz/design-system/*"
      ],
      "react": ["node_modules/@types/react"],

And that should solve the issue.

[Rafcin]

Ah, after some modifications to the TSconfig and npmrc files, I was finally able to get it to work until SWC came my way and threw a bunch of loader issues my way LOL.

fox-app:build: ../../packages/design-system/dist/chunk-IXLHTWVX.js
fox-app:build: Module parse failed: Export 'm' is not defined (235:9)
fox-app:build: File was processed with these loaders:
fox-app:build:  * ../../node_modules/.pnpm/[email protected]_beenoklgwfttvph5dgxj7na7aq/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
fox-app:build: You may need an additional loader to handle the result of these loaders.
fox-app:build: |     };
fox-app:build: | }), k = o("svg")(_templateObject2());
fox-app:build: > export { m as a, g as b, b as c, c as d, u as e, y as f, f as g, h, k as i };

After I solve the above, it should compile fine. SWC is a nightmare.

@JeromeFitz Have you ever ran into this error on other systems or a docker image?

[JeromeFitz]

Have you ever ran into this error on other systems or a docker image?

Hi @Rafcin , unfortunately (or, fortunately I guess), I have not.

Aside from some initial syncing up stuff mentioned earlier.

Sorry you are still having problems. I agree would be ideal to not have customizations immediately out of the gate, especially with configs.

Not sure how to proceed at the moment. Do you feel this is sufficient enough as a reference issue, or do you want to dive into this even further?

I was also looking at tsconfig setups and realize I basically overwrite them all over the place. 🤦

[Rafcin]

@JeromeFitz Hey!

So I managed to solve the issue, it ended up being some issues with the tsconfig paths and Next JS was freaking out due to some dependency on the docker image I was using.

In the time I was researching I also thought about some changes you might be able to make, I can open some pull requests but like next-compose is having some issues and it might be a good idea to use .reduce instead of withPlugins. I'll have to make a write up about the changes I've made!

[JeromeFitz]

Oh wow, that would be very cool if you have the time. Thanks @Rafcin! 🙌🏻

Glad you got it all sorted out on your end as well. 😅