search

contentful / create-contentful-app

Bootstrap a Contentful App
https://contentful.com/developers/docs/extensibility/app-framework/create-contentful-app/
MIT License
107 stars 24 forks source link

Dependencies seem to be conflicting from the contentful-create-app script #1683

Closed AnomalyAces closed 10 months ago

AnomalyAces commented 1 year ago

So i noticed these errors when trying to install react hook form. It seems that the version of constate that is pulled in expects react 17 but the contentful-create-app script uses react 18. I resolved the issue by manually installing constate 3.3.2 but, I think all the dependencies of the forma components needs to be updated to target react 18 instead of 17. 

$ npm install react-hook-form
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: constate@3.2.0
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   peer react@">=16.8" from @contentful/f36-accordion@4.52.0
npm WARN   node_modules/@contentful/f36-accordion
npm WARN     @contentful/f36-accordion@"^4.52.0" from @contentful/f36-components@4.52.0
npm WARN     node_modules/@contentful/f36-components
npm WARN   96 more (@contentful/f36-asset, @contentful/f36-autocomplete, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0" from constate@3.2.0
npm WARN node_modules/@contentful/field-editor-reference/node_modules/constate
npm WARN   constate@"3.2.0" from @contentful/field-editor-reference@5.16.1
npm WARN   node_modules/@contentful/field-editor-reference
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0" from constate@3.2.0
npm WARN   node_modules/@contentful/field-editor-reference/node_modules/constate
npm WARN     constate@"3.2.0" from @contentful/field-editor-reference@5.16.1
npm WARN     node_modules/@contentful/field-editor-reference
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-dom@17.0.2
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   peer react@">=16.8" from @contentful/f36-accordion@4.52.0
npm WARN   node_modules/@contentful/f36-accordion
npm WARN     @contentful/f36-accordion@"^4.52.0" from @contentful/f36-components@4.52.0
npm WARN     node_modules/@contentful/f36-components
npm WARN   96 more (@contentful/f36-asset, @contentful/f36-autocomplete, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/@contentful/field-editor-reference/node_modules/react-dom
npm WARN   peer react-dom@"^16.3.0 || ^17.0.0" from react-sortable-hoc@2.0.0
npm WARN   node_modules/@contentful/field-editor-reference/node_modules/react-sortable-hoc
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"17.0.2" from react-dom@17.0.2
npm WARN   node_modules/@contentful/field-editor-reference/node_modules/react-dom
npm WARN     peer react-dom@"^16.3.0 || ^17.0.0" from react-sortable-hoc@2.0.0
npm WARN     node_modules/@contentful/field-editor-reference/node_modules/react-sortable-hoc
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-sortable-hoc@2.0.0
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   peer react@">=16.8" from @contentful/f36-accordion@4.52.0
npm WARN   node_modules/@contentful/f36-accordion
npm WARN     @contentful/f36-accordion@"^4.52.0" from @contentful/f36-components@4.52.0
npm WARN     node_modules/@contentful/f36-components
npm WARN   96 more (@contentful/f36-asset, @contentful/f36-autocomplete, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.3.0 || ^17.0.0" from react-sortable-hoc@2.0.0
npm WARN node_modules/@contentful/field-editor-reference/node_modules/react-sortable-hoc
npm WARN   react-sortable-hoc@"^2.0.0" from @contentful/field-editor-reference@5.16.1
npm WARN   node_modules/@contentful/field-editor-reference
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.3.0 || ^17.0.0" from react-sortable-hoc@2.0.0
npm WARN   node_modules/@contentful/field-editor-reference/node_modules/react-sortable-hoc
npm WARN     react-sortable-hoc@"^2.0.0" from @contentful/field-editor-reference@5.16.1
npm WARN     node_modules/@contentful/field-editor-reference

If i did not update that version of constate manually i get the error from the second set of bash output below

$ npm run start

> ffa-client-page-app@0.1.0 start
> cross-env BROWSER=none react-scripts start

(node:29172) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:29172) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...

One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.

Failed to compile.

Module not found: Error: Can't resolve 'constate' in 'C:\Users\Jerek\Documents\First Financial Associates\first-financial-client-web-page\Contentful\CustomFields\ffa-client-page-app\node_modules\@contentful\field-editor-rich-text\dist\cjs'
WARNING in [eslint]
src\hooks\useClientPageEditor.ts
  Line 1:8:    'React' is defined but never used                                                                                                                 @typescript-eslint/no-unused-vars
  Line 4:25:   'UseFormSetError' is defined but never used                                                                                                       @typescript-eslint/no-unused-vars
  Line 4:42:   'useForm' is defined but never used                                                                                                               @typescript-eslint/no-unused-vars
  Line 47:51:  Expected '===' and instead saw '=='                                                                                                               eqeqeq
  Line 53:10:  React Hook useEffect has missing dependencies: 'newClient', 'sdk.cma.asset', and 'sdk.field'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

src\locations\Field.tsx
  Line 1:28:   'useReducer' is defined but never used        @typescript-eslint/no-unused-vars
  Line 4:3:    'AccordionHeader' is defined but never used   @typescript-eslint/no-unused-vars
  Line 6:3:    'DisplayText' is defined but never used       @typescript-eslint/no-unused-vars
  Line 8:3:    'Textarea' is defined but never used          @typescript-eslint/no-unused-vars
  Line 21:19:  'useWatch' is defined but never used          @typescript-eslint/no-unused-vars
  Line 22:10:  'AssetProps' is defined but never used        @typescript-eslint/no-unused-vars
  Line 30:33:  'control' is assigned a value but never used  @typescript-eslint/no-unused-vars
  Line 87:67:  Expected '===' and instead saw '=='           eqeqeq

ERROR in ./node_modules/@contentful/field-editor-rich-text/dist/cjs/SdkProvider.js 21:43-62
Module not found: Error: Can't resolve 'constate' in 'C:\Users\Jerek\Documents\First Financial Associates\first-financial-client-web-page\Contentful\CustomFields\ffa-client-page-app\node_modules\@contentful\field-editor-rich-text\dist\cjs'

webpack compiled with 1 error and 1 warning
jjolton-contentful commented 10 months ago

Hey @AnomalyAces I just gave this a shot with create-contentful-app@latest and it appears to be resolved. The forma deps reached full react 18 compatibility as of https://github.com/contentful/forma-36/pull/2315. Thanks very much for reporting this and please feel free to reopen if you are still having any trouble.