Installing problem

[mhanuel26]

I am getting an error while running add kmenu using yarn

yarn add v1.22.19
[1/5] Validating package.json...
[2/5] Resolving packages...
warning Lockfile has incorrect entry for "microbundle-crl@^0.15.1". Ignoring it.
Couldn't find any versions for "microbundle-crl" that matches "^0.15.1"
? Please choose a version of "microbundle-crl" from this list: 0.13.11
warning microbundle-crl > rollup-plugin-babel@4.4.0: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.
[3/5] Fetching packages...
[4/5] Linking dependencies...
warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
warning " > kmenu@1.0.9-beta" has incorrect peer dependency "react@^16.0.0".
[5/5] Building fresh packages...
success Saved lockfile.
success Saved 21 new dependencies.
info Direct dependencies
├─ kmenu@1.0.9-beta
├─ microbundle-crl@0.13.11
└─ typescript@3.9.10
info All dependencies
├─ @babel/plugin-proposal-decorators@7.18.10
├─ @babel/plugin-transform-react-constant-elements@7.18.12
├─ @babel/preset-env@7.18.10
├─ @babel/preset-react@7.18.6
├─ @rollup/plugin-alias@3.1.9
├─ @rollup/plugin-commonjs@11.1.0
├─ @rollup/plugin-json@4.1.0
├─ @svgr/rollup@5.5.0
├─ deepmerge@4.2.2
├─ filesize@6.4.0
├─ kmenu@1.0.9-beta
├─ microbundle-crl@0.13.11
├─ mime@2.6.0
├─ rollup-plugin-babel@4.4.0
├─ rollup-plugin-postcss@2.9.0
├─ rollup-plugin-smart-asset@2.1.2
├─ rollup-plugin-terser@5.3.1
├─ rollup@1.32.1
├─ sade@1.8.1
├─ svg-parser@2.0.4
└─ typescript@3.9.10
$ run-s build
yarn run v1.22.19
$ microbundle-crl --no-compress --format modern,cjs --css-modules false
(rpt2 plugin) Error: /home/mhanuel/devel/React/kmenu/src/CommandMenu.tsx(219,6): semantic error TS2559: Type '{ children: false | Element; }' has no properties in common with type 'IntrinsicAttributes & AnimatePresenceProps'.
Error: /home/mhanuel/devel/React/kmenu/src/CommandMenu.tsx(219,6): semantic error TS2559: Type '{ children: false | Element; }' has no properties in common with type 'IntrinsicAttributes & AnimatePresenceProps'.
    at error (/home/mhanuel/devel/React/kmenu/node_modules/rollup/dist/shared/node-entry.js:5400:30)
    at throwPluginError (/home/mhanuel/devel/React/kmenu/node_modules/rollup/dist/shared/node-entry.js:11878:12)
    at Object.error (/home/mhanuel/devel/React/kmenu/node_modules/rollup/dist/shared/node-entry.js:12912:24)
    at Object.error (/home/mhanuel/devel/React/kmenu/node_modules/rollup/dist/shared/node-entry.js:12081:38)
    at RollupContext.error (/home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:17194:30)
    at /home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:24958:23
    at arrayEach (/home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:534:11)
    at forEach (/home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:9360:14)
    at printDiagnostics (/home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:24931:5)
    at Object.transform (/home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:27374:17)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "build" exited with 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

I do have node 18 .

Can you advice please?

[haaarshsingh]

Hey, @mhanuel26 which version of React are you using?

[mhanuel26]

Hi @harshhhdev ,

thanks for your quick response,

In fact I think I handle to install it but I am not 100% sure if I did the correct way or if I even remember what I did lol,

I cloned this repo, then I did yarn add kmenu on the example folder, then yarn install followed by yarn start.

After that i was getting some issue related to ssl (sorry I don't have the log output anymore) which I fix by doing:

export NODE_OPTIONS=--openssl-legacy-provider

Now, I am wondering, if I have a working react base project, should I go and merge the package.json of examples with my existing file and do the same sequence to get this working ?

Can you help me pointing me in the right direction please.

Thanks in advance,

[haaarshsingh]

@mhanuel26 OH, you cloned this repository. I got confused and thought you faced this issue while running yarn add kmenu.

The issue with this is in @types/react, and they have an outdated definition which doesn't support the AnimatePresence component. The fix is to go into node_modules/@types/react and go to around line ~520, replace:

interface FunctionComponent<P = {}> {
    (props: P, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}

With:

interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}

This should solve the issue! Please let me know if it does.

[mhanuel26]

Hi @harshhhdev ,

Sorry, I did not follow you entirely,

I understand now that if I run yarn add kmenu I should do it under examples folder , then yarn install followed by yarn start
Is this correct?

I want to understand this process in order to add kmenu to my skeleton project.

Now regarding the issue I am actually seeing, please look at the following

I think the workaround you suggest is not for this but I did anyway

Could you please enlight me?

Thanks in advance,

[haaarshsingh]

Clone the main repository, and just do yarn in the root directory. Then, you'll build the files using yarn build and it'll automatically be built to the examples directory. You don't need to install anything.

[mhanuel26]

Hi @harshhhdev ,

I start over and after doing yarn in the root folder of repo I got

mhanuel@mhanuel-MSI:~/devel/React/kmenu$ yarn
yarn install v1.22.19
warning ../package.json: No license field
[1/5] Validating package.json...
[2/5] Resolving packages...
Couldn't find any versions for "microbundle-crl" that matches "^0.15.1"
? Please choose a version of "microbundle-crl" from this list: 0.13.11
[3/5] Fetching packages...
[4/5] Linking dependencies...
warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
[5/5] Building fresh packages...
success Saved lockfile.
$ run-s build
yarn run v1.22.19
warning ../package.json: No license field
$ microbundle-crl --no-compress --format modern,cjs --css-modules false
(rpt2 plugin) Error: /home/mhanuel/devel/React/kmenu/src/CommandMenu.tsx(219,6): semantic error TS2559: Type '{ children: false | Element; }' has no properties in common with type 'IntrinsicAttributes & AnimatePresenceProps'.
Error: /home/mhanuel/devel/React/kmenu/src/CommandMenu.tsx(219,6): semantic error TS2559: Type '{ children: false | Element; }' has no properties in common with type 'IntrinsicAttributes & AnimatePresenceProps'.
    at error (/home/mhanuel/devel/React/kmenu/node_modules/rollup/dist/shared/node-entry.js:5400:30)
    at throwPluginError (/home/mhanuel/devel/React/kmenu/node_modules/rollup/dist/shared/node-entry.js:11878:12)
    at Object.error (/home/mhanuel/devel/React/kmenu/node_modules/rollup/dist/shared/node-entry.js:12912:24)
    at Object.error (/home/mhanuel/devel/React/kmenu/node_modules/rollup/dist/shared/node-entry.js:12081:38)
    at RollupContext.error (/home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:17194:30)
    at /home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:24958:23
    at arrayEach (/home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:534:11)
    at forEach (/home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:9360:14)
    at printDiagnostics (/home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:24931:5)
    at Object.transform (/home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:27374:17)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "build" exited with 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

What am I missing then?

Thanks,

[haaarshsingh]

This was an issue with @types/react which required me to to edit the file, as I've told you to do before.

@mhanuel26 OH, you cloned this repository. I got confused and thought you faced this issue while running yarn add kmenu.

The issue with this is in @types/react, and they have an outdated definition which doesn't support the AnimatePresence component. The fix is to go into node_modules/@types/react and go to around line ~520, replace:

interface FunctionComponent<P = {}> {
    (props: P, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}

With:

interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}

This should solve the issue! Please let me know if it does.

[haaarshsingh]

Also, the build is failing, not the installation. Everything has installed properly, you just need to edit the type definitions for @types/react 😄.

[mhanuel26]

Hello @harshhhdev ,

The build process does not work for me, the only way I have managed to run the example on my ubuntu 22.04 is:

cd into the example directory and install there

cd example
yarn add kmenu
yarn install
export NODE_OPTIONS=--openssl-legacy-provider
yarn start

[haaarshsingh]

@mhanuel26 you do not need to install kmenu from NPM, I'm telling you this over and over again 😄

I'm assuming the reason your build process isn't working is because you haven't setup the types properly, and I've already told you how to do that above. If there's a different issue, please let me know and be descriptive with your error messages.

[mhanuel26]

@harshhhdev ,

When you first clone the repository, the @types/react does not exist, then I do yarn on root folder, this create the node folder, are we ok to this step? This step will end up in failure.

mhanuel@mhanuel-MSI:~/devel/React/kmenu$ ls
compiled  example  LICENCE.md  package.json  README.md  src  tsconfig.json  tsconfig.test.json  yarn.lock
mhanuel@mhanuel-MSI:~/devel/React/kmenu$ yarn
yarn install v1.22.19
[1/5] Validating package.json...
[2/5] Resolving packages...
Couldn't find any versions for "microbundle-crl" that matches "^0.15.1"
? Please choose a version of "microbundle-crl" from this list: 0.13.7
warning microbundle-crl > rollup-plugin-babel@4.4.0: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.
[3/5] Fetching packages...
[4/5] Linking dependencies...
warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
[5/5] Building fresh packages...
success Saved lockfile.
$ run-s build
yarn run v1.22.19
$ microbundle-crl --no-compress --format modern,cjs --css-modules false
(rpt2 plugin) Error: /home/mhanuel/devel/React/kmenu/src/MenuProvider.tsx(1,8): semantic error TS6133: 'React' is declared but its value is never read.
Error: /home/mhanuel/devel/React/kmenu/src/MenuProvider.tsx(1,8): semantic error TS6133: 'React' is declared but its value is never read.
    at error (/home/mhanuel/devel/React/kmenu/node_modules/rollup/dist/shared/node-entry.js:5400:30)
    at throwPluginError (/home/mhanuel/devel/React/kmenu/node_modules/rollup/dist/shared/node-entry.js:11878:12)
    at Object.error (/home/mhanuel/devel/React/kmenu/node_modules/rollup/dist/shared/node-entry.js:12912:24)
    at Object.error (/home/mhanuel/devel/React/kmenu/node_modules/rollup/dist/shared/node-entry.js:12081:38)
    at RollupContext.error (/home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:17194:30)
    at /home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:24958:23
    at arrayEach (/home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:534:11)
    at forEach (/home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:9360:14)
    at printDiagnostics (/home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:24931:5)
    at Object.transform (/home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:27374:17)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "build" exited with 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
mhanuel@mhanuel-MSI:~/devel/React/kmenu$ ls
compiled  example  LICENCE.md  node_modules  package.json  README.md  src  tsconfig.json  tsconfig.test.json  yarn.lock

Now, after this I can modify the @types/react as you mentioned, then I do yarn build, it fails too.

At this point I do again yarn again, selecting the same installer, error again, if I do select different installer (0.13.11 on image above), my @types/react file get overwritten.

Can you realize that I am modifying the file and execute the commands you point me but still getting the error?
Am I modifying the wrong file ? Please se below screenshot

Please give me your comments?

[haaarshsingh]

Hey @mhanuel26, I'm not sure why it's giving you those errors. The build works just fine for me with React in scope, but since it's not working for you I'd just suggest removing it.