Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Installing problem #16

Open
mhanuel26 opened this issue Aug 25, 2022 · 12 comments
Open

Installing problem #16

mhanuel26 opened this issue Aug 25, 2022 · 12 comments
Labels
bug Something isn't working

Comments

@mhanuel26
Copy link

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 > [email protected]: 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/[email protected]" has unmet peer dependency "@testing-library/dom@>=5".
warning " > [email protected]" has incorrect peer dependency "react@^16.0.0".
[5/5] Building fresh packages...
success Saved lockfile.
success Saved 21 new dependencies.
info Direct dependencies
├─ [email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @rollup/[email protected]
├─ @rollup/[email protected]
├─ @rollup/[email protected]
├─ @svgr/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
$ 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?

@mhanuel26 mhanuel26 added the bug Something isn't working label Aug 25, 2022
@haaarshsingh
Copy link
Owner

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

@mhanuel26
Copy link
Author

mhanuel26 commented Aug 25, 2022

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
Copy link
Owner

haaarshsingh commented Aug 25, 2022

@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
Copy link
Author

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

kmenu_2

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

kmenu_1

Could you please enlight me?

Thanks in advance,

@haaarshsingh
Copy link
Owner

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
Copy link
Author

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/[email protected]" 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
Copy link
Owner

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
Copy link
Owner

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

@mhanuel26
Copy link
Author

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
Copy link
Owner

haaarshsingh commented Aug 25, 2022

@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
Copy link
Author

@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 > [email protected]: 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/[email protected]" 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.

kmenu_3

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

kmenu_4

Please give me your comments?

@haaarshsingh
Copy link
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants