I am migrating from the unmaintained react-contentful and trying to use @contentful/react-apps-toolkit instead.

So I am wondering how to use the authentication for useFieldValue is set up.

I can't log in. I just can't. Please, fix this thing.....

The session expired
Please authenticate again.

Please, fix this thing.....
I accidentally publish my API key( .env file ) to the public. --I have to change my API key.

Hi - I am following your instructions for creating a contentful app but I am failing at the first step. Here is the error I'm getting - what is going wrong here?

erikparr@erikbook contentful-app-test % npx @contentful/create-contentful-app init my-first-app
npm ERR! code ENOENT
npm ERR! syscall chmod
npm ERR! path /Users/erikparr/.npm/_npx/42756/lib/node_modules/@contentful/create-contentful-app/lib/index.js
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, chmod '/Users/erikparr/.npm/_npx/42756/lib/node_modules/@contentful/create-contentful-app/lib/index.js'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

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: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   peer react@">=16.8" from @contentful/[email protected]
npm WARN   node_modules/@contentful/f36-accordion
npm WARN     @contentful/f36-accordion@"^4.52.0" from @contentful/[email protected]
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 [email protected]
npm WARN node_modules/@contentful/field-editor-reference/node_modules/constate
npm WARN   constate@"3.2.0" from @contentful/[email protected]
npm WARN   node_modules/@contentful/field-editor-reference
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0" from [email protected]
npm WARN   node_modules/@contentful/field-editor-reference/node_modules/constate
npm WARN     constate@"3.2.0" from @contentful/[email protected]
npm WARN     node_modules/@contentful/field-editor-reference
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   peer react@">=16.8" from @contentful/[email protected]
npm WARN   node_modules/@contentful/f36-accordion
npm WARN     @contentful/f36-accordion@"^4.52.0" from @contentful/[email protected]
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 [email protected]
npm WARN node_modules/@contentful/field-editor-reference/node_modules/react-dom
npm WARN   peer react-dom@"^16.3.0 || ^17.0.0" from [email protected]
npm WARN   node_modules/@contentful/field-editor-reference/node_modules/react-sortable-hoc
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"17.0.2" from [email protected]
npm WARN   node_modules/@contentful/field-editor-reference/node_modules/react-dom
npm WARN     peer react-dom@"^16.3.0 || ^17.0.0" from [email protected]
npm WARN     node_modules/@contentful/field-editor-reference/node_modules/react-sortable-hoc
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   peer react@">=16.8" from @contentful/[email protected]
npm WARN   node_modules/@contentful/f36-accordion
npm WARN     @contentful/f36-accordion@"^4.52.0" from @contentful/[email protected]
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 [email protected]
npm WARN node_modules/@contentful/field-editor-reference/node_modules/react-sortable-hoc
npm WARN   react-sortable-hoc@"^2.0.0" from @contentful/[email protected]
npm WARN   node_modules/@contentful/field-editor-reference
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^16.3.0 || ^17.0.0" from [email protected]
npm WARN   node_modules/@contentful/field-editor-reference/node_modules/react-sortable-hoc
npm WARN     react-sortable-hoc@"^2.0.0" from @contentful/[email protected]
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

> [email protected] 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

I expect to retrieve all data linked to this entry. I used the following code:

const sdk = useSDK();
const entryId = sdk.entry.getSys().id;

sdk.cma.entry.references({ entryId: entryId, include: 10 }).then(a=>{
    console.log(a, 3343434)
})

But it seems that the returned data is the entry itself, rather than the data that references this entry. What did I miss?

Trying to create a new contentful app on the console via "npx @contentful/create-contentful-app init my-first-app" fails since around Christmas time 2020 with the following error:

`Creating a Contentful app in ~/my-first-app.

Creating a new React app in /home/w6/my-first-app.

Installing packages. This might take a couple of minutes.

Installing react, react-dom, and react-scripts with @contentful/cra-template-create-contentful-app...

npm

ERR! code ERESOLVE

npm ERR!

ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: [email protected]
npm ERR! node_modules/type-fest
npm ERR! type-fest@"0.20.2" from [email protected]
npm ERR! node_modules/contentful-management
npm ERR! contentful-management@"^7.5.1" from @contentful/[email protected]
npm ERR! node_modules/@contentful/cra-template-create-contentful-app
npm ERR! @contentful/cra-template-create-contentful-app@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm

ERR! peerOptional type-fest@"^0.13.1" from @pmmmwh/[email protected]
npm ERR! node_modules/@pmmmwh/react-refresh-webpack-plugin
npm ERR! @pmmmwh/react-refresh-webpack-plugin@"0.4.2" from [email protected]
npm ERR! node_modules/react-scripts
npm ERR! react-scripts@"*" 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
`

node version is 14 LTS.

Please fix this asap, we depend on the contentful app framework, since you declared extensions as deprecated.

When I run an npm install, I get the following error:

npm ERR! code ETARGET
npm ERR! notarget No matching version found for @contentful/f36-core@^4.58.0.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

Looks like the latest version of this package is 4.57, but there is a dependency looking for 4.58 which is preventing package install

After creating a definition for a contentful app, you have instructions for how to start developing, including a deep link to view your development app. You get the impression you'll be able to follow along with the instructions, so you think, "let me npm start and then open that url in my browser" but then you start and all that helpful information is gone.

I don't know what the solution is to this but this is not a fun experience. I don't know where that url was going to take me and I have no idea how to find it. Why do we have to clear the console on npm start, anyway?

voltooien

Hello, I've encountered something odd: I cannot get a new Contentful app bootstrap to build.

Steps to reproduce

1. npx @contentful/create-contentful-app init my-first-app
2. give permission for npx to continue

Expected behavior

create-contentful-app to build a bootstrapped directory called 'my-first-app'

Actual behavior

Build fails with the following warning:

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/

The suggested fix does not work because I do not have create-react-app installed globally.

Following the instructions from the provided link, running npx create-react-app my-app works just fine.

Versions

node: 16.13.1
npm: 8.1.2
macOS: 12.1

Please let me know, if there is any other information that is needed. Thank you.

You are running 'create-react-app' 4.0.3, which is behind the latest release (5.0.0).
We no longer support global installation of Create React App.

I receive the above message and Im told to uninstall globals. Ive done this several times and no matter what create-contentful-app does not run. The react version (create-react-app) works flawlessly. This project worked yesterday, and began failing today, which is why I deleted the project and attempted to start from scratch. Any help would be greatly appreciated.

SDPTVTX @

Hey team,

It seems like most of the .spec.tsx files form a template do not pass a mock sdk to the actual component. This results in TypeScript errors because sdk is a required prop.

it seems like only ConfigScreen.spec.tsx is defining and passing a mock. Should we also add this to other test templates?

Do I need to create a separate app definition for prod, staging, and local dev?

when trying to use the cli per the construction in the Readme file, I am getting the following error:

You are running `create-react-app` 4.0.1, which is behind the latest release (4.0.3).

Hi folks, I'm receiving the following error trying to initialize a new app:

➜ npx @contentful/create-contentful-app init my-new-app
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @contentful/cra-template-create-contentful-app@^0.13.8.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget 
npm ERR! notarget It was specified as a dependency of '@contentful/create-contentful-app'
npm ERR! notarget 

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/chris/.npm/_logs/2021-10-11T11_14_01_879Z-debug.log
Install for [ '@contentful/create-contentful-app@latest' ] failed with code 1

Looks like the referenced version of the template lib possibly hasn't been published - I checked the issue history and this seems to have happened a couple of times before.

To work around, I'll pin @contentful/create-contentful-app to a previous release for now 👍

In the template file (https://github.com/contentful/create-contentful-app/blob/master/template.json) it's making all the created project dependencies full dependencies (including say typescript, react-scripts, and testing-library that would normally be devDependencies).

Is there a reason for that?

Hey friends! 👋

The field editors include a new component to render the Contentful default experience depending on the field type.

<FieldWrapper sdk={fieldExtensionSdk} name={fieldName} getEntryURL={(entry) => ''}>
    <Field sdk={fieldExtensionSdk} widgetId={widgetId} />
</FieldWrapper>

Would it make sense to include this component in https://github.com/contentful/create-contentful-app/blob/master/template/src/components/Field.tsx paired with a quick explanation?

Thanks! 🙇

Please reopen issue #213.

Details of the Issue itself:

I can't log in.

The session expired
Please authenticate again.

For reproducing it: Just watch those videos.

First Video

Second One

Third One

why this is happening? Just Let me know.
By the way, the authentication route is not secure (http://app.contentful.com/)
Just guessing, It maybe blocks my IP address or something that I can't log in and can't even signup for it.

I recently finished building a config-screen and field in a create-contentful-app. It works great, everything looks good on contentful.com after I bundled it and pushed it up.

My next task is to build another field to use on Contentful. Is it possible to have 2 separate field widgets in one create-contentful-app?

My reason for including them in the same app is that there are a variety of helpers/hooks that I would use in both. So optimally I could be both in the same repo/app.

Hey friends, I just created a new contentful app and am running into a warning which blocks my netlify deploy.

What I did:

$ npx create-contentful-app init
$ yarn start

When the build process starts I'm seeing the following warning:

Compiled with warnings.

./node_modules/contentful-ui-extensions-sdk/dist/cf-extension-api.js
Critical dependency: the request of a dependency is an expression

I didn't bother to much about it. But now when I want to deploy to Netlify my deploys won't succeed.

12:50:40 PM: $ npm run build
12:50:40 PM: > [email protected] build /opt/build/repo
12:50:40 PM: > react-scripts build
12:50:42 PM: Creating an optimized production build...
12:52:26 PM: 
12:52:26 PM: Treating warnings as errors because process.env.CI = true.
12:52:26 PM: Most CI servers set it automatically.
12:52:26 PM: 
12:52:26 PM: Failed to compile.
12:52:26 PM: 
12:52:26 PM: ./node_modules/contentful-ui-extensions-sdk/dist/cf-extension-api.js
12:52:26 PM: Critical dependency: the request of a dependency is an expression
12:52:26 PM: npm ERR! code ELIFECYCLE
12:52:26 PM: npm ERR! errno 1
12:52:26 PM: npm ERR! [email protected] build: `react-scripts build`
12:52:26 PM: npm ERR! Exit status 1
12:52:26 PM: npm ERR!
12:52:26 PM: npm ERR! Failed at the [email protected] build script.
12:52:26 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
12:52:26 PM: npm ERR! A complete log of this run can be found in:
12:52:26 PM: npm ERR!     /opt/buildhome/.npm/_logs/2020-08-13T10_52_26_167Z-debug.log
12:52:26 PM:   
12:52:26 PM:   If the build failed with a warning about "process.env.CI = true", this is due to "create-react-app" treating warnings as errors when in CI. In order to fix this problem, please either:
12:52:26 PM:     - Fix the issues highlighted by the warnings above.
12:52:26 PM:     - Or modify the "scripts.build" command in your "package.json" from "react-scripts build" to "CI= react-scripts build"
12:52:26 PM:   More information can be found at https://docs.netlify.com/configure-builds/troubleshooting-tips/#build-fails-on-warning-message
12:52:26 PM: ​
12:52:26 PM: ┌─────────────────────────────┐
12:52:26 PM: │   "build.command" failed    │
12:52:26 PM: └─────────────────────────────┘

Any advice on what I could do to resolve this warning! thanks in advance! 🙇‍♂️

Hi,

I have just gone through the tutorial to setup the create-contentful-app and the installation went fine with no issues. When it told me to run npm start it just returns me the following error:

> [email protected] start /mnt/c/Users/Thomas Britton/Documents/code/contentful-visual-ordering
> BROWSER=none react-scripts start

/mnt/c/Users/Thomas Britton/Documents/code/contentful-visual-ordering/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
      appTsConfig.compilerOptions[option] = value;
                                          ^

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'
    at verifyTypeScriptSetup (/mnt/c/Users/Thomas Britton/Documents/code/contentful-visual-ordering/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
    at Object.<anonymous> (/mnt/c/Users/Thomas Britton/Documents/code/contentful-visual-ordering/node_modules/react-scripts/scripts/start.js:31:1)
    at Module._compile (internal/modules/cjs/loader.js:1015:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `BROWSER=none react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/thomasbritton/.npm/_logs/2020-11-21T00_39_03_373Z-debug.log

Please note I have not changed any code in the generated project.

I am on Windows 10 using WSL2 and my node version is 12.19.0

Any ideas as to why this is failing?

Thanks
Thomas

after running npx @contentful/create-contentful-app init my-first-app , I get the following:

npm ERR! Found: [email protected]
npm ERR! node_modules/type-fest
npm ERR! type-fest@"0.20.2" from [email protected]
npm ERR! node_modules/contentful-management
npm ERR! contentful-management@"^7.5.1" from @contentful/[email protected]
npm ERR!

 node_modules/@contentful/cra-template-create-contentful-app

npm ERR! @contentful/cra-template-create-contentful-app@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional type-fest@"^0.13.1" from @pmmmwh/[email protected]
npm ERR! node_modules/@pmmmwh/react-refresh-webpack-plugin
npm ERR! @pmmmwh/react-refresh-webpack-plugin@"0.4.2" from [email protected]
npm

ERR! node_modules/react-scripts
npm ERR! react-scripts@"*" 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!

Hi,

I'm running npx @contentful/create-contentful-app init my-first-app, but getting the following error:

No matching version found for @contentful/[email protected].

I'm running into this error when trying to run npx create-contentful-app test-app

Error: Cannot find module 'validate-npm-package-name'
Require stack:
- /Users/bretteast/.npm/_npx/a25b92dfae1d563c/node_modules/contentful--create-contentful-app/lib/index.js

Is there an additional step that needs to occur?

Node: v18.8.0
npm: 8.18.0

# npm audit report

nth-check  <2.0.1
Severity: high
Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr
fix available via `npm audit fix --force`
Will install [email protected], which is a breaking change
node_modules/svgo/node_modules/nth-check
  css-select  <=3.1.0
  Depends on vulnerable versions of nth-check
  node_modules/svgo/node_modules/css-select
    svgo  1.0.0 - 1.3.2
    Depends on vulnerable versions of css-select
    node_modules/svgo
      @svgr/plugin-svgo  <=5.5.0
      Depends on vulnerable versions of svgo
      node_modules/@svgr/plugin-svgo
        @svgr/webpack  4.0.0 - 5.5.0
        Depends on vulnerable versions of @svgr/plugin-svgo
        node_modules/@svgr/webpack
          react-scripts  >=2.1.4
          Depends on vulnerable versions of @svgr/webpack
          node_modules/react-scripts

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

I try to install boilerplate app and I run into this error during install. I am quite positive it worked still on last Thursday.

Using node v16.15.0 (npm v8.5.5).

Steps:
npx create-contentful-app my-first-app

Console:
Creating a Contentful app in /.../my-first-app.
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @swc/helpers@^0.3.8.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:
npm ERR! /.../.npm/_logs/2022-05-23T06_24_03_389Z-debug-0.log
Error: Failed to create my-first-app

C:\Users\abcd\Desktop>npx create-contentful-app content-migrator
Creating a Contentful app in ~\Desktop\content-migrator.
? Do you want to start with a blank template or use one of our examples? Template
? Pick a template JavaScript

---- Cloning the javascript template...

Error: Failed to create content-migrator

ZlibError: zlib: unexpected end of file
at Unzip.write (C:\Users\abcd\AppData\Local\npm-cache_npx\a25b92dfae1d563c\node_modules\degit\dist\index-688c5d50.js:1322:22)
at Unzip.flush (C:\Users\abcd\AppData\Local\npm-cache_npx\a25b92dfae1d563c\node_modules\degit\dist\index-688c5d50.js:1273:10)
at Unzip.end (C:\Users\abcd\AppData\Local\npm-cache_npx\a25b92dfae1d563c\node_modules\degit\dist\index-688c5d50.js:1279:10)
at Unpack.end (C:\Users\abcd\AppData\Local\npm-cache_npx\a25b92dfae1d563c\node_modules\degit\dist\index-688c5d50.js:3989:21)
at Yallist. (C:\Users\abcd\AppData\Local\npm-cache_npx\a25b92dfae1d563c\node_modules\degit\dist\index-688c5d50.js:903:18)
at Yallist.forEach (C:\Users\abcd\AppData\Local\npm-cache_npx\a25b92dfae1d563c\node_modules\degit\dist\index-688c5d50.js:240:8)
at ReadStream.emit (C:\Users\abcd\AppData\Local\npm-cache_npx\a25b92dfae1d563c\node_modules\degit\dist\index-688c5d50.js:900:18)
at ReadStream.emit (C:\Users\abcd\AppData\Local\npm-cache_npx\a25b92dfae1d563c\node_modules\degit\dist\index-688c5d50.js:3262:22)
at ReadStream.[maybeEmitEnd] (C:\Users\abcd\AppData\Local\npm-cache_npx\a25b92dfae1d563c\node_modules\degit\dist\index-688c5d50.js:864:12)
at ReadStream.end (C:\Users\abcd\AppData\Local\npm-cache_npx\a25b92dfae1d563c\node_modules\degit\dist\index-688c5d50.js:744:27) {
code: 'Z_BUF_ERROR',
errno: -5,
recoverable: false,
file: 'C:\Users\abcd\.degit\github\contentful\apps/a8813aeff43c41e410ac11a0b25c914b57b4c9d2.tar.gz',
cwd: 'C:\Users\abcd\Desktop\content-migrator',
tarCode: 'TAR_ABORT'
}

Hi,

I'm getting an error when trying to build.

Here's what I did:
npx @contentful/create-contentful-app init my-first-app
npm run build

The error I'm getting:

> react-scripts build

Creating an optimized production build...
Failed to compile.

./node_modules/@contentful/forma-36-react-components/dist/styles.css
ParserError: Syntax Error at line: 1, column 23

Bonus issue:

When running npm run start on Windows I get:

$ BROWSER=none react-scripts start
'BROWSER' is not recognized as an internal or external command,
operable program or batch file.

This is because setting environment variables on Windows normally need a package like cross-env to work.

I currently have a problem that I have no way to monitor file upload when using sdk.cma.upload The only available methods are these

upload: {
    get(params: OptionalDefaults<GetSpaceParams & {
        uploadId: string;
    }>): Promise<any>;
    create(params: OptionalDefaults<GetSpaceParams>, data: {
        file: string | ArrayBuffer | Stream;
    }): Promise<any>;
    delete(params: OptionalDefaults<GetSpaceParams & {
        uploadId: string;
    }>): Promise<any>;
};

When first creating an app with the cli, the import for Forma 36 tokens is missing. I ran into an issue with the Select control not styling properly. Once I realized that the Custom properties(CSS variables) were missing, I added
import '@contentful/forma-36-tokens/dist/css/index.css';
to the Index.tsx file and everything styled correctly.

I believe that file should be included by default

Hey team, I've recently begun the process of porting legacy extensions to apps (the extension sdk didn't seem to support pnp module either presumably due to some parcel errors under the hood: note: I haven't attempted to update those extensions, so if that's an option I'm open to that too).

After I initialised the contentful app with the cli, I ran yarn to switch it over to using pnp modules (we are in a big private workspace so I can't opt out of yarn) and installed + ran the app with yarn start I get the following error:

undefined
TypeScript error in undefined(undefined,undefined):
Cannot find type definition file for 'node'.  TS2688

I was originally getting the error with jest modules but it switched to this error when i removed the testing library stuff.

Hey friends, I justcreated a fresh app using npx create-contentful-app init contentful-markdown-display. When I now run npm start I see the following. 👇

It looks like some typings are incompatible after the UI extension update that happened yday?

Thanks a bunch for looking into this! 🙇‍♂️

Update

I can confirm that backporting of the extensions sdk from 3.23.1 to 3.23.0 in the package.son ("contentful-ui-extensions-sdk": "3.23.0",) fixes the typing error. :)

I am sure it has to do with the config the contentful app is extending

{
  "extends": "@tsconfig/create-react-app/tsconfig.json",
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"]
  },
  "include": ["src"]
}

Hi! I am trying to create a new app using the command: npx create-contentful-app my-app

The output of the command:

Creating a Contentful app in ~/Work/OP/contentful-apps/my-app.
Error: Failed to create my-app

ZlibError: zlib: unexpected end of file
    at Unzip.write (/Users/mykhailopryn/.npm/_npx/a25b92dfae1d563c/node_modules/degit/dist/index-688c5d50.js:1322:22)
    at Unzip.flush (/Users/mykhailopryn/.npm/_npx/a25b92dfae1d563c/node_modules/degit/dist/index-688c5d50.js:1273:10)
    at Unzip.end (/Users/mykhailopryn/.npm/_npx/a25b92dfae1d563c/node_modules/degit/dist/index-688c5d50.js:1279:10)
    at Unpack.end (/Users/mykhailopryn/.npm/_npx/a25b92dfae1d563c/node_modules/degit/dist/index-688c5d50.js:3989:21)
    at Yallist.<anonymous> (/Users/mykhailopryn/.npm/_npx/a25b92dfae1d563c/node_modules/degit/dist/index-688c5d50.js:903:18)
    at Yallist.forEach (/Users/mykhailopryn/.npm/_npx/a25b92dfae1d563c/node_modules/degit/dist/index-688c5d50.js:240:8)
    at ReadStream.emit (/Users/mykhailopryn/.npm/_npx/a25b92dfae1d563c/node_modules/degit/dist/index-688c5d50.js:900:18)
    at ReadStream.emit (/Users/mykhailopryn/.npm/_npx/a25b92dfae1d563c/node_modules/degit/dist/index-688c5d50.js:3262:22)
    at ReadStream.[maybeEmitEnd] (/Users/mykhailopryn/.npm/_npx/a25b92dfae1d563c/node_modules/degit/dist/index-688c5d50.js:864:12)
    at ReadStream.end (/Users/mykhailopryn/.npm/_npx/a25b92dfae1d563c/node_modules/degit/dist/index-688c5d50.js:744:27) {
  code: 'Z_BUF_ERROR',
  errno: -5,
  recoverable: false,
  file: '/Users/mykhailopryn/.degit/github/contentful/apps/8b60cab1522c33ae4f27efb5fe9ab6222065ffb9.tar.gz',
  cwd: '/Users/mykhailopryn/Work/OP/contentful-apps/my-app',
  tarCode: 'TAR_ABORT'
}

Npm version: 8.15.0
Node version: v16.15.1

My best guess is that the command line tool is sending the wrong structure for Entries list { type: "Entries" }, instead of { type: "Array", items: { type: "Link", linkType: "Entry" } }

{
  "status": 422,
  "statusText": "Unprocessable Entity",
  "message": "Validation error",
  "details": {
    "errors": [
      {
        "name": "in",
        "details": "Value must be one of expected values",
        "path": [
          "locations",
          2,
          "fieldTypes",
          0
        ],
        "value": {
          "type": "Entries"
        },
        "expected": [
          {
            "type": "Symbol"
          },
          {
            "type": "Text"
          },
          {
            "type": "RichText"
          },
          {
            "type": "Integer"
          },
          {
            "type": "Number"
          },
          {
            "type": "Date"
          },
          {
            "type": "Boolean"
          },
          {
            "type": "Object"
          },
          {
            "type": "Location"
          },
          {
            "type": "Link",
            "linkType": "Asset"
          },
          {
            "type": "Link",
            "linkType": "Entry"
          },
          {
            "type": "Array",
            "items": {
              "type": "Symbol"
            }
          },
          {
            "type": "Array",
            "items": {
              "type": "Link",
              "linkType": "Entry"
            }
          },
          {
            "type": "Array",
            "items": {
              "type": "Link",
              "linkType": "Asset"
            }
          }
        ]
      },
      {
        "name": "unexpected",
        "details": "The property \"fieldTypes\" is not expected",
        "path": [
          "locations",
          2,
          "fieldTypes"
        ]
      },
      {
        "name": "in",
        "details": "Value must be one of expected values",
        "path": [
          "locations",
          2,
          "location"
        ],
        "value": "entry-field",
        "expected": [
          "page"
        ]
      },
      {
        "name": "in",
        "details": "Value must be one of expected values",
        "path": [
          "locations",
          2
        ],
        "value": {
          "location": "entry-field",
          "fieldTypes": [
            {
              "type": "Entries"
            }
          ]
        },
        "expected": [
          {
            "location": "entry-sidebar"
          },
          {
            "location": "entry-editor"
          },
          {
            "location": "dialog"
          },
          {
            "location": "app-config"
          }
        ]
      },
      {
        "name": "in",
        "details": "Value must be one of expected values",
        "path": [
          "locations",
          2
        ],
        "value": {
          "location": "entry-field",
          "fieldTypes": [
            {
              "type": "Entries"
            }
          ]
        },
        "expected": [
          {
            "$ref": "#/definitions/entryFieldLocation"
          },
          {
            "$ref": "#/definitions/pageLocation"
          },
          {
            "type": "object",
            "enum": [
              {
                "location": "entry-sidebar"
              },
              {
                "location": "entry-editor"
              },
              {
                "location": "dialog"
              },
              {
                "location": "app-config"
              }
            ]
          }
        ]
      }
    ]
  },

Hi folks,

I'm trying to create a new Contentful app, using this package, but I keep receiving the following error:

➟ npx @contentful/create-contentful-app init my-app
npx: installed 140 in 5.031s
Creating a Contentful app in ~/Projects/my-app.

Creating a new React app in ~/Projects/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with @contentful/cra-template-create-contentful-app...

npm ERR! code ETARGET
npm ERR! notarget No matching version found for @contentful/[email protected].
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:
npm ERR!     ~/.npm/_logs/2021-04-21T18_02_59_303Z-debug.log

Seems like it's trying to install @contentful/[email protected] which is not published yet.

NPM tells me the latest available version is 0.8.1.alpha.2

Node LTS v20.10.0

PS C:\Projects\data-generator-app> npm run build

> [email protected] build
> react-scripts build

Creating an optimized production build...
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.

Compiled successfully.

File sizes after gzip:

  149.73 kB  build\static\js\main.bb3d011c.js

The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

When running the upload script, we have noticed that whilst it fails to create the bundle and it prints out the reason (bundle size too large in our case), it doesn't return a non-zero exit code, so it doesn't fail our CI/CD job. Looking into the code, it looks like the request that is made is wrapped in a try/catch and the error is consumed (

Is there a way to check if useFieldValue is fetching data to show a progress animation while loading data from Contentful inside React?

https://www.npmjs.com/package/@contentful/react-apps-toolkit

Hi Contentful-team,

I tried to use this package thru the npx command, but I ended with a non-installed application because of a coa-2.1.3 dependency. Did anyone noticed it as well and is there a fix for this, because this package contains vulnerabilities?

Kind regards,

Jasper

Hello Contentful Team,

I am receiving the below error while creating contentful app using npx create-contentful-app [app-name]

npx: installed 98 in 27.23s
Creating a Contentful app in ~\Documents\GitHub\contentful-apps\test-app.
node:events:504
throw er; // Unhandled 'error' event
^

Error: spawn npm ENOENT
at Process.ChildProcess._handle.onexit (node:internal/child_process:283:19)
at onErrorNT (node:internal/child_process:478:16)
at processTicksAndRejections (node:internal/process/task_queues:83:21)
Emitted 'error' event on ChildProcess instance at:
at Process.ChildProcess._handle.onexit (node:internal/child_process:289:12)
at onErrorNT (node:internal/child_process:478:16)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
errno: -4058,
code: 'ENOENT',
syscall: 'spawn npm',
path: 'npm',
spawnargs: [ 'install', '--no-audit', '--no-fund' ]
}

Node Version:16.14.2
npm version: 6.14.16

By the way, I can see app got created, but still i want to know what is causing this error and whether it effects my app to publish..