Sapphire - Imagine a framework•2y ago

interactionHandler parse showing TS '...cannot be named without reference to...' error

When attempting to make a very basic interaction handler I'm getting the pictured compiler error. The guide suggests that I shouldn't need to explicitly type the parse function so I'm not sure why I'm getting this error. The code:

import { ApplyOptions } from '@sapphire/decorators';
import { InteractionHandler, InteractionHandlerOptions, InteractionHandlerTypes } from '@sapphire/framework';
import type { ButtonInteraction } from 'discord.js';

@ApplyOptions<InteractionHandlerOptions>({
    interactionHandlerType: InteractionHandlerTypes.Button
})
export class PollHandler extends InteractionHandler {

    public parse(interaction: ButtonInteraction) {
        if (interaction.id.startsWith('poll')) {
            return this.none();
        }
        return this.some('Hello button');
    }

    public async run(interaction: ButtonInteraction, promisedPoll: InteractionHandler.ParseResult<this>) {
        interaction.reply({ content: promisedPoll, ephemeral: true });
    }

}

import { ApplyOptions } from '@sapphire/decorators';
import { InteractionHandler, InteractionHandlerOptions, InteractionHandlerTypes } from '@sapphire/framework';
import type { ButtonInteraction } from 'discord.js';

@ApplyOptions<InteractionHandlerOptions>({
    interactionHandlerType: InteractionHandlerTypes.Button
})
export class PollHandler extends InteractionHandler {

    public parse(interaction: ButtonInteraction) {
        if (interaction.id.startsWith('poll')) {
            return this.none();
        }
        return this.some('Hello button');
    }

    public async run(interaction: ButtonInteraction, promisedPoll: InteractionHandler.ParseResult<this>) {
        interaction.reply({ content: promisedPoll, ephemeral: true });
    }

}

Solution:

Summary for Answer Overflow: The issues was caused by pnpm (the package manager I was using) using symlinks for @sapphire/result. Hoisting all sapphire packages did not help. Switching to yarn in place of pnpm has solved the build issue.

Jump to solution

31 Replies

Ben•2y ago

Heres the error in text if needed

10  public parse(interaction: ButtonInteraction) {
           ~~~~~

src/interaction-handlers/poll.ts:10:9 - error TS2742: The inferred type of 'parse' cannot be named without a reference to '.pnpm/@sapphire+result@2.6.0/node_modules/@sapphire/result/dist/lib/Option/Some'. This is likely not portable. A type annotation is necessary.

10  public parse(interaction: ButtonInteraction) {
           ~~~~~

10  public parse(interaction: ButtonInteraction) {
           ~~~~~

src/interaction-handlers/poll.ts:10:9 - error TS2742: The inferred type of 'parse' cannot be named without a reference to '.pnpm/@sapphire+result@2.6.0/node_modules/@sapphire/result/dist/lib/Option/Some'. This is likely not portable. A type annotation is necessary.

10  public parse(interaction: ButtonInteraction) {
           ~~~~~

Sawako•2y ago

Downgrade sapphire result To 2.6.0

Favna•2y ago

What why would a downgrade of result be needed lol In fact you shouldn't need to manually install result at all In fact 2.6.0 is latest @kaname-png smhhh It looks like a pnpm issue Ben maybe you can do me a solid here @Ben855. Add a tag to @Spinel pnpm with content:

When using pnpm with Sapphire Framework make sure to configure pnpm to hoist all Sapphire packages. This is required because of how Sapphire leverages JavaScript and TypeScript and it doesn't work if the Sapphire packages do not physically exist in `node_modules/.pnpm/@sapphire/`

In your `.npmrc` add a line:
`public-hoist-pattern[]=*@sapphire*`

Or with a single command line:

\`\`\`sh
echo "public-hoist-pattern[]=*@sapphire*" >> .npmrc
\`\`\`

When using pnpm with Sapphire Framework make sure to configure pnpm to hoist all Sapphire packages. This is required because of how Sapphire leverages JavaScript and TypeScript and it doesn't work if the Sapphire packages do not physically exist in `node_modules/.pnpm/@sapphire/`

In your `.npmrc` add a line:
`public-hoist-pattern[]=*@sapphire*`

Or with a single command line:

\`\`\`sh
echo "public-hoist-pattern[]=*@sapphire*" >> .npmrc
\`\`\`

and if you can add a page with about that content in the Additional Information category of the guide that'd be even more awesome

Ben•2y ago

I’ll give that fix a shot and the open a few PRs in several hours

Sawako•2y ago

Pinning the version to 2.6.0 fixed the problem for me using pnpm ¯\_(ツ)_/¯

Ben•2y ago

Unless I missed something here, adding the hoist pattern doesnt seem to have causes pnpm to do anything differently. Everything in the @sapphire dir in node_modules is still simlinked .

Ben•2y ago

I did also yeet my node modules and lockfile then reinstalled

Favna•2y ago

adding framework without hoist:

Favna•2y ago

adding framework with hoist:

Favna•2y ago

so yes it does change things TypeScript doesn't read types that aren't in node_modules/@types/ or node_modules/**/package.json:types/typings/export.types

Ben•2y ago

Both those framework folders look simlinked

Favna•2y ago

and when was this ever about framework

Favna•2y ago

Ben•2y ago

Right I know the problem is with result being simlinked. I'm just confused since both the two file tree screenshots you posted have everything in the @sapphire dir simlinked. they all have the little simlink arrow to the right of the folder name

Favna•2y ago

mate the first screenshot only has framework nothing else

Ben•2y ago

Yeah I know that

Favna•2y ago

all the other dependencies are not in node_modules at all

TypeScript doesn't read types that aren't in node_modules/@types/ or node_modules/**/package.json:types/typings/export.types

like I said TS literally cannot read the shit that pnpm does with dependencies without being patched by pnpm on install which pnpm doesnt do

Ben•2y ago

Right okay so then why doesnt this work?

Favna•2y ago

compare that to Yarn which does do that Again, pnpm DID do something different I already explained it like thrice now

Ben•2y ago

So neither of the file trees you posted would work then right

Favna•2y ago

I would assume the latter one does with the hoisting heck if I know, I don't have your source code to try

Ben•2y ago

Here you go: https://github.com/BenSegal855/Steve-V3/tree/tmp-for-Favna

GitHub

GitHub - BenSegal855/Steve-V3 at tmp-for-Favna

Contribute to BenSegal855/Steve-V3 development by creating an account on GitHub.

Ben•2y ago

What I was saying is that my filetree screenshot matches your second file tree screenshot unless I'm not seeing something correctly. So if your second one works, whats wrong with mine

Favna•2y ago

nothing is wrong but as far as I am aware you haven't checked whether the issue persists yet

Ben•2y ago

I have That was the first thing I did after reinstalling with the updated .npmrc

Favna•2y ago

well idk then I never use pnpm yarn god mmLol

pnpm for doing stupid shit that TypeScript doesn't support and then proceeding not to provide TypeScript patches

Ben•2y ago

It pnpm is gonna cause this issue then without a good fix, I'll switch to yarn. Any particular version of yarn to use? I dont know to much about it since I havent used it that much

Favna•2y ago

3 1 and 2 are deprecated

Spinel•2y ago

Yarn v3 is new version of Yarn that we recommend switching to as Yarn v1 has been deprecated.

"But I don't see any update on [source]?"

That is correct. Yarn v3 is installed through Yarn itself. Your global toolchain is and will always remain to be Yarn v1, however, you configure Yarn v3 on a per-project basis. How? Simply write:

yarn set version berry

yarn set version berry

This will download the new Yarn v3 binary and put in .yarn/releases, you should push this to your Git repository. It will also create a .yarnrc.yml file which configures the path which you should also commit. Next you probably also want to run the following 2 commands:

yarn config set enableGlobalCache true
yarn config set nodeLinker node-modules

yarn config set enableGlobalCache true
yarn config set nodeLinker node-modules

This will add to your .yarnrc file:

enableGlobalCache: true
nodeLinker: node-modules

enableGlobalCache: true
nodeLinker: node-modules

Which ensures that you just have a Yarn v1-like experience with node_modules and a global cache. Next step is to nuke your node_modules and yarn.lock and run yarn install Then some final adjustments. Put this in you .gitignore:

# Yarn files
.yarn/install-state.gz
.yarn/build-state.yml

# Yarn files
.yarn/install-state.gz
.yarn/build-state.yml

And anywhere in your scripts in package.json where you use * you should wrap it in extra " For example:

{
    "format": "prettier --write \"src/**/*.ts\""
}

{
    "format": "prettier --write \"src/**/*.ts\""
}

Mind you this last thing is good add regardless of script runner / package bundler because it ensures the glob is performed by the library and not by your shell, which may differ when people develop on different operating systems. In short the command to set everything up you can run:

yarn set version berry && yarn config set enableGlobalCache true && yarn config set nodeLinker node-modules && echo "" >> .gitignore && echo "# Yarn files" >> .gitignore && echo ".yarn/install-state.gz" >> .gitignore && echo ".yarn/build-state.yml" >> .gitignore

yarn set version berry && yarn config set enableGlobalCache true && yarn config set nodeLinker node-modules && echo "" >> .gitignore && echo "# Yarn files" >> .gitignore && echo ".yarn/install-state.gz" >> .gitignore && echo ".yarn/build-state.yml" >> .gitignore

Ben•2y ago

Thanks

Solution

Ben•2y ago

Gaming

Programming

interactionHandler parse showing TS '...cannot be named without reference to...' error