How to install third part library/dependencies

nicobava96 · 17 May 2022 19:09

I am having trouble installing react spring or any dependencies to make the project really interesting. I have decided to make everything with bootstrap but now i need to use horizontal scroling in a gallery and so i need to install a dependency/library to make the work easier.

========

Here down in a default Mars-theme i’ve installed react-spring:

npm i react-spring.

And then, npm frontity dev trying to start de application and so this:

Console message here down below

Nicolas@DESKTOP-0P2F3IG MINGW64 /c/_ DISCO D/CODIGO/_ 2022 codigo/Frontity/npm (master)
$ npx frontity dev
(node:7028) Warning: Closing file descriptor 3 on garbage collection
(Use `node --trace-warnings ...` to show where the warning was created)
(node:7028) [DEP0137] DeprecationWarning: Closing a FileHandle object on garbage collection is deprecated. Please close FileHandle objects explicitly using FileHandle.prototype.close(). In the future, an error will be thrown if a file descriptor is closed during garbage collection.


SERVER STARTED -- Listening @ http://localhost:3000
  - mode: development
  - target: module
  - public-path: /static/



Error: ./node_modules/@frontity/react-easy-state/dist/react-platform.js
Module not found: Error: Can't resolve 'react-dom' in 'C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\@frontity\react-easy-state\dist'
resolve 'react-dom' in 'C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\@frontity\react-easy-state\dist'
  Parsed request is a module
  using description file: C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\@frontity\react-easy-state\package.json (relative path: ./dist)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\@frontity\react-easy-state\dist\node_modules doesn't exist or is not a directory
      C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\@frontity\react-easy-state\node_modules doesn't exist or is not a directory
      C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\@frontity\node_modules doesn't exist or is not a directory
      C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\node_modules doesn't exist or is not a directory
      C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\node_modules doesn't exist or is not a directory
      C:\_ DISCO D\CODIGO\_ 2022 codigo\node_modules doesn't exist or is not a directory
      C:\_ DISCO D\CODIGO\node_modules doesn't exist or is not a directory
      C:\_ DISCO D\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
      looking for modules in C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules
        using description file: C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\package.json (relative path: ./node_modules/react-dom)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\react-dom doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\react-dom.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\react-dom.jsx doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\react-dom.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\react-dom.tsx doesn't exist
            as directory
              C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\react-dom doesn't exist
[C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\@frontity\react-easy-state\dist\node_modules]
[C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\@frontity\react-easy-state\node_modules]
[C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\@frontity\node_modules]
[C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\node_modules]
[C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\node_modules]
[C:\_ DISCO D\CODIGO\_ 2022 codigo\node_modules]
[C:\_ DISCO D\CODIGO\node_modules]
[C:\_ DISCO D\node_modules]
[C:\node_modules]
[C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\react-dom]
[C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\react-dom.js]
[C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\react-dom.jsx]
[C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\react-dom.ts]
[C:\_ DISCO D\CODIGO\_ 2022 codigo\Frontity\npm\node_modules\react-dom.tsx]
 @ ./node_modules/@frontity/react-easy-state/dist/react-platform.js 1:0-23 1:0-23
 @ ./node_modules/@frontity/react-easy-state/dist/bundle.js
 @ ./node_modules/@frontity/connect/src/index.js
 @ ./node_modules/@frontity/core/src/client/index.tsx
 @ ./build/bundling/entry-points/npopm/client.ts
 @ multi webpack-hot-middleware/client ./build/bundling/entry-points/npopm/client.ts

If you need help please visit https://community.frontity.org/.

It seems that I can’t use dependencies in frontity

Thank you,

orballo · 18 May 2022 11:13

Hi @nicobava96 !

To install dependencies on your package, you need to add them manually to the package.json file and then run npm i from the project root folder.

You should not run npm i inside a package, because it can create conflicts between dependencies, and the way Frontity works, all packages dependencies are installed together in the node_modules of the project’s root folder.

nicobava96 · 20 May 2022 17:51

Well, It didn’t work for me.

I will put the repository down below. It’s a default Mars Theme and a dependency called “React Horizontal Scroll” (npm i react-scroll-horizontal).

I did this:

Installed the dependency in the root folder.
paste ’ “react-scroll-horizontal”: “^1.6.6” ’ in the mars theme package.json
run “npm i” in the root folder
npx frontity dev and this is what I’ve got:

imagen1366×768 61.7 KB

I have seen this error before, hope you can help me. I will put this project in a repository if you need it, buy anyway it’s a mars theme default with that dependency.

Here is the project:

orballo · 21 May 2022 11:59

@nicobava96 I think the issue is that the react-scroll-horizontal uses React 16, while Frontity uses React 17. That’s causing the conflict between dependencies, therefore the error. I’d suggest you find another more up to date library.

nicobava96 · 26 May 2022 14:41

Hi Orballo, can you help me with this?

I have to get more than 100 posts from wordpress, how can I do that?

I’ve read that I have to configure another entry point.

I could solve the scroll horizontal thing.

Here you can see the page I’m working on:
https://nicolasbava-memoriafp-default.layer0-limelight.link/

Thank you