Question T18210
Visible to All Users

Angular and react installs not working for me

created a year ago (modified a year ago)

Ive tried installing https://surveyjs.io/form-library/documentation/get-started-react

and https://surveyjs.io/form-library/documentation/get-started-angular

on a fresh server with fresh update of ubuntu 22.04.4 and neither worked giving many errors.

REACT:

npm install survey-react-ui --save

added 7 packages, and audited 8 packages in 2s

found 0 vulnerabilities
root@ddnz1:~# import 'survey-core/defaultV2.min.css';
import-im6.q16: unable to open X server `' @ error/import.c/ImportImageCommand/346.

After this, https://surveyjs.io/form-library/documentation/get-started-react gives no idea on how to start SurveyJS

ANGULAR

npm install survey-angular-ui --save
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@angular/core@17.3.9',
npm WARN EBADENGINE required: { node: '^18.13.0 || >=20.9.0' },
npm WARN EBADENGINE current: { node: 'v12.22.9', npm: '8.5.1' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@angular/common@17.3.9',
npm WARN EBADENGINE required: { node: '^18.13.0 || >=20.9.0' },
npm WARN EBADENGINE current: { node: 'v12.22.9', npm: '8.5.1' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@angular/forms@17.3.9',
npm WARN EBADENGINE required: { node: '^18.13.0 || >=20.9.0' },
npm WARN EBADENGINE current: { node: 'v12.22.9', npm: '8.5.1' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@angular/platform-browser@17.3.9',
npm WARN EBADENGINE required: { node: '^18.13.0 || >=20.9.0' },
npm WARN EBADENGINE current: { node: 'v12.22.9', npm: '8.5.1' }
npm WARN EBADENGINE }

added 11 packages, and audited 19 packages in 5s

2 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

npm install @angular/cdk@^12.0.0 --save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: @angular/cdk@17.3.9
npm ERR! node_modules/@angular/cdk
npm ERR! peer @angular/cdk@"*" from survey-angular-ui@1.10.4
npm ERR! node_modules/survey-angular-ui
npm ERR! survey-angular-ui@"^1.10.4" from the root project
npm ERR! @angular/cdk@"^12.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @angular/cdk@"^12.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/core@13.4.0
npm ERR! node_modules/@angular/core
npm ERR! peer @angular/core@"^12.0.0 || ^13.0.0-0" from @angular/cdk@12.2.13
npm ERR! node_modules/@angular/cdk
npm ERR! @angular/cdk@"^12.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /root/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2024-05-17T14_01_20_094Z-debug-0.log

It doesnt really bother me which one I use, as long as one works on my new ubuntu server

Show previous comments (3)
M M
MarkThomas a year ago

    Hi it's possible but shouldn't be necessary.

    I did a fresh os install of Ubuntu updated everything.

    Then I visited your page and followed the very easy instructions for both react and angular.

    Neither worked, producing the messages I sent earlier.

    Should be quite easy to replicate that at your end but if you still prefer to work it with me live the let me know and we can set up a time.

    Jane a year ago

      Hi Mark,
      Thank you for your reply.

      Would you please update me with the latest information about the installation routine and errors you got?

      I'm asking because I double-checked the information you shared and it appears that the survey-react-ui package was installed correctly.

      Code
      npm install survey-react-ui --save
added 7 packages, and audited 8 packages in 2s

found 0 vulnerabilities

      However, the console error appears after you try to call the import 'survey-core/defaultV2.min.css'; import statement from the console:

      Code
      root@ddnz1:~# import 'survey-core/defaultV2.min.css';
import-im6.q16: unable to open X server `' @ error/import.c/ImportImageCommand/346.

      Note that the mentioned import statement should be added to your React component rather than being invoked from a console.

      If you follow the get-started-react installation guide, please note that you would require to follow these steps:

      • Create a React application/update an existing one;
      • Install the survey-react-ui package using a preferred package manager;
      • Create a survey React component;
      • Update the component and add required import statements and create a model.

      I look forward to your reply.

      M M
      MarkThomas a year ago

        I'm a First time user to this and have no idea what you mean.

        I'm following the instructions on the react install page that I would expect tells me how to run the application.

        Yes the survey-react-ui install seems to have gone well

        Then the next instructions on the site was to enter that import command.

        That seems to have failed.

        I have no clue how to run the front end and do anything else because there's instructions on any of it.

        What does Create a Survey React Component mean?

        What does update the component mean?

        How do run the front end??

        These all need specific commands until we open the front end and can start to use it and those specific commands (like "import") need to work.

        All I want to do is play with the software on my server to see it's capabilities then see if it's the solution I'm looking for.

        Sign in to comment on this post

        Answers approved by surveyjs Support

        created a year ago

        Hello Mark,
        Thank you for the update.

        I understand that working with new libraries can be challenging, and I appreciate your effort in exploring SurveyJS. The survey-react-ui is a regular JavaScript library designed to help developers run online forms, and our tutorials are here to support you in integrating SurveyJS into your applications.

        If you're looking to integrate the SurveyJS Form Library into a React application, it might be helpful to start with the React documentation to get basic understanding in React and understand how to create the first React application. You can find the React getting started guide here.

        Once you have your React application set up, you can follow our get-started-react installation guide to integrate the SurveyJS Form Library seamlessly into your React project.

        If you have any questions or need further assistance, please don't hesitate to reach out.

        Thanks!

          Show previous comments (1)
          AT AT
          Andrew Telnov a year ago

            Hello Mark,
            We develop and support JavaScript libraries. Our current customers are companies and software developers who are integrating our libraries into their current web applications or create a new one.
            We have some examples with using dockers. However, you need to get some programming understanding. Unfortunately, we don't have on-premises software at the current moment.
            What are you looking for?

            Thank you,
            Andrew
            SurveyJS Team

            M M
            MarkThomas a year ago

              Ok well I believed SurveyJS was a complete survey solution that could be self hosted.

              My mistake.

              AT AT
              Andrew Telnov a year ago

                We will have on-premise solution in the future, but we don't have it in the current moment.
                Our current customers are software developers and we concentrate on them right now.
                Sorry, for not being useful to you.

                Andrew
                SurveyJS Team

                Sign in to comment on this post