Running new install from Quickstart guide compiles with errors #340

charlieswing · 2022-07-13T17:00:42Z

I am running the Quickstart instructions for the first time. I have added the required packages via Yarn. I am getting the following errors when running yarn start:

WARNING in ./node_modules/nth-check/lib/esm/compile.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/charlieswing/Documents/source/quiet-collection-cms/node_modules/nth-check/lib/esm/https:/raw.githubusercontent.com/fb55/nth-check/639fd2a4000b69f82350aad8c34cb43f77e483ba/src/compile.ts' file: Error: ENOENT: no such file or directory, open '/Users/charlieswing/Documents/source/quiet-collection-cms/node_modules/nth-check/lib/esm/https:/raw.githubusercontent.com/fb55/nth-check/639fd2a4000b69f82350aad8c34cb43f77e483ba/src/compile.ts'

WARNING in ./node_modules/nth-check/lib/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/charlieswing/Documents/source/quiet-collection-cms/node_modules/nth-check/lib/esm/https:/raw.githubusercontent.com/fb55/nth-check/639fd2a4000b69f82350aad8c34cb43f77e483ba/src/index.ts' file: Error: ENOENT: no such file or directory, open '/Users/charlieswing/Documents/source/quiet-collection-cms/node_modules/nth-check/lib/esm/https:/raw.githubusercontent.com/fb55/nth-check/639fd2a4000b69f82350aad8c34cb43f77e483ba/src/index.ts'

WARNING in ./node_modules/nth-check/lib/esm/parse.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/charlieswing/Documents/source/quiet-collection-cms/node_modules/nth-check/lib/esm/https:/raw.githubusercontent.com/fb55/nth-check/639fd2a4000b69f82350aad8c34cb43f77e483ba/src/parse.ts' file: Error: ENOENT: no such file or directory, open '/Users/charlieswing/Documents/source/quiet-collection-cms/node_modules/nth-check/lib/esm/https:/raw.githubusercontent.com/fb55/nth-check/639fd2a4000b69f82350aad8c34cb43f77e483ba/src/parse.ts'

The text was updated successfully, but these errors were encountered:

bare-metal-gpu · 2022-07-16T12:21:48Z

problem is real

fgatti675 · 2022-07-16T16:45:44Z

Looking into it

…

On Sat, Jul 16, 2022 at 2:21 PM Niklas von Haxthausen < ***@***.***> wrote: problem is real — Reply to this email directly, view it on GitHub <#340 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABHCCD4KAIR74LFCJALQQ5DVUKSONANCNFSM53PNDZNQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

-- Camberi - Madrid, Munich, Milan

fgatti675 · 2022-07-17T11:06:06Z

Some dependency must have introduced a bug, but I am not able to find it, nor it seems to happen to anyone else.
It seems that setting these dependencies works:

    "@camberi/firecms": "1.0.2",
    "@emotion/react": "11.9.3",
    "@emotion/styled": "11.9.3",
    "@mui/icons-material": "5.5.1",
    "@mui/lab": "5.0.0-alpha.45",
    "@mui/material": "5.5.3",
    "@mui/styles": "5.5.3",
    "react-router": "^6",
    "react-router-dom": "^6",
    "firebase": "^9",

The error is still there but the app is working.
The error is related to source map generation, which can be disabled by:


  "scripts": {
    "start": "GENERATE_SOURCEMAP=false react-scripts start",
    "build": "GENERATE_SOURCEMAP=false  react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

fgatti675 · 2022-07-18T14:54:00Z

Version 2.0 seems to have the compilation error, but the app works correctly:
https://firecms.co/docs/2.0.0/quickstart

NNskelly · 2022-07-27T14:12:40Z

Seeing exactly this issue on my end as well, with whatever the Quickstart steps pulled down yesterday. Additionally, although not necessarily related, after copy-pasting the provided sample tsx schema into App.tsx, yarn start as directed goes into a "starting server" state and opens a page which spins for minutes before anything is ready, then resolves to a blank white page. yarn run build as directed takes up to 10 minutes, ultimately completing with the above warnings, builds to an independent 'build' directory (meaning the directed yarn run build && firebase deploy --only hosting will deploy a blank page) and... moreover, when I investigate the generated 'build' directory and experimentally hand-copy/hand-deploy it, the index.html is all but empty. Something here is very much less usable than even a coworker encountered just a few months ago.

Addendum: the above fix (GENERATE_SOURCEMAP), now that i actually have a chance to run it, also fails.

D:\NN_D\FireCMS_test\test-cms>yarn build
yarn run v1.22.19
$ GENERATE_SOURCEMAP=false react-scripts build
'GENERATE_SOURCEMAP' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

fgatti675 · 2022-07-28T23:19:57Z

Hi guys, with a clean install and this package.json for version 1.0, seems to work fine.
Can you delete your yarn.lock and node_modules and update your package.json to:

{
  "name": "my-cms",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@camberi/firecms": "1.0.2",
    "@emotion/react": "11.9.3",
    "@emotion/styled": "11.9.3",
    "@mui/icons-material": "5.5.1",
    "@mui/lab": "5.0.0-alpha.45",
    "@mui/material": "5.5.3",
    "@mui/styles": "5.5.3",
    "react-router": "^6",
    "react-router-dom": "^6",
    "firebase": "^9",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

and let me know if it works for you now?

NNskelly · 2022-07-29T19:15:31Z

Bombing things out and simply immediately running yarn run build shows react itself as missing :P

D:\NN_D\FireCMS_test\test-cms>yarn run build
yarn run v1.22.19
$ react-scripts build
'react-scripts' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

re-running yarn add @camberi/firecms firebase@^9 @mui/material@^5 @mui/icons-material@^5 @mui/lab @mui/styles@^5 @emotion/react @emotion/styled react-router@^6 react-router-dom@^6 took 20 minutes. From there, yarn run build took almost 10 mins but completed with the same warnings as before. Built page still looks blank-white.
(I did tweak the package to reference test-cms instead of my-cms since that's the name I initialized the project with)

Additionally, yarn start reports middleware deprecation warnings

D:\NN_D\FireCMS_test\test-cms>yarn start
yarn run v1.22.19
$ react-scripts start
(node:18932) [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:18932) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

fgatti675 · 2022-07-31T12:51:22Z

Hi guys, I have released a version in the pre channel with some material dependency updates.
Can you try running this command and letting me know if it works for you?

yarn add @camberi/[email protected] firebase@^9 @mui/material@^5 @mui/icons-material@^5 @mui/lab @mui/styles@^5 @mui/x-date-pickers@^5.0.0-beta.1 @emotion/react @emotion/styled react-router@^6 react-router-dom@^6

Note that there is an additional material date pickers dependency, besides the main library version update

NNskelly · 2022-08-01T14:36:57Z

Alright. Trying this on a different machine from a fresh, clean start using only npm install -g yarn and the instructions on https://firecms.co/docs/quickstart , substituting the above.
First, this machine's pathing is different, and using yarn immediately ran me into the major unresolved yarn issue on windows: yarnpkg/yarn#6851
After rejiggering my yarn config paths, the project setup went much faster than on my first machine. yarn start, however, threw the same 3 warnings and then outright failed, looks like on a dependency.

$ react-scripts start
(node:4040) [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:4040) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Failed to compile.

Module not found: Error: Can't resolve '@fontsource/ibm-plex-mono' in 'D:\FireCMS_Test\my-cms\src'
WARNING in ./node_modules/nth-check/lib/esm/compile.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\FireCMS_Test\my-cms\node_modules\nth-check\lib\esm\https:\raw.githubusercontent.com\fb55\nth-check\639fd2a4000b69f82350aad8c34cb43f77e483ba\src\compile.ts' file: Error: ENOENT: no such file or directory, open 'D:\FireCMS_Test\my-cms\node_modules\nth-check\lib\esm\https:\raw.githubusercontent.com\fb55\nth-check\639fd2a4000b69f82350aad8c34cb43f77e483ba\src\compile.ts'

WARNING in ./node_modules/nth-check/lib/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\FireCMS_Test\my-cms\node_modules\nth-check\lib\esm\https:\raw.githubusercontent.com\fb55\nth-check\639fd2a4000b69f82350aad8c34cb43f77e483ba\src\index.ts' file: Error: ENOENT: no such file or directory, open 'D:\FireCMS_Test\my-cms\node_modules\nth-check\lib\esm\https:\raw.githubusercontent.com\fb55\nth-check\639fd2a4000b69f82350aad8c34cb43f77e483ba\src\index.ts'

WARNING in ./node_modules/nth-check/lib/esm/parse.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\FireCMS_Test\my-cms\node_modules\nth-check\lib\esm\https:\raw.githubusercontent.com\fb55\nth-check\639fd2a4000b69f82350aad8c34cb43f77e483ba\src\parse.ts' file: Error: ENOENT: no such file or directory, open 'D:\FireCMS_Test\my-cms\node_modules\nth-check\lib\esm\https:\raw.githubusercontent.com\fb55\nth-check\639fd2a4000b69f82350aad8c34cb43f77e483ba\src\parse.ts'

ERROR in ./src/App.tsx 7:0-35
Module not found: Error: Can't resolve '@fontsource/ibm-plex-mono' in 'D:\FireCMS_Test\my-cms\src'

webpack compiled with 1 error and 3 warnings
ERROR in src/App.tsx:55:9
TS2322: Type '{ name: { name: string; validation: { required: true; }; dataType: string; }; selectable: { name: string; description: string; dataType: string; }; video: { name: string; dataType: string; validation: { required: false; }; storage: { ...; }; }; }' is not assignable to type 'string[]'.
  Object literal may only specify known properties, and 'name' does not exist in type 'string[]'.
    53 |     singularName: "Locales",
    54 |     properties: {
  > 55 |         name: {
       |         ^^^^^^^
  > 56 |             name: "Title",
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 57 |             validation: { required: true },
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 58 |             dataType: "string"
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 59 |         },
       | ^^^^^^^^^^
    60 |         selectable: {
    61 |             name: "Selectable",
    62 |             description: "Is this locale selectable",

ERROR in src/App.tsx:91:9
TS2322: Type '{ name: { name: string; validation: { required: true; }; dataType: string; }; price: { name: string; validation: { required: true; requiredMessage: string; min: number; max: number; }; description: string; dataType: string; }; ... 8 more ...; expires_on: { ...; }; }' is not assignable to type 'string[]'.
  Object literal may only specify known properties, and 'name' does not exist in type 'string[]'.
    89 |     ],
    90 |     properties: {
  > 91 |         name: {
       |         ^^^^^^^
  > 92 |             name: "Name",
       | ^^^^^^^^^^^^^^^^^^^^^^^^^
  > 93 |             validation: { required: true },
       | ^^^^^^^^^^^^^^^^^^^^^^^^^
  > 94 |             dataType: "string"
       | ^^^^^^^^^^^^^^^^^^^^^^^^^
  > 95 |         },
       | ^^^^^^^^^^
    96 |         price: {
    97 |             name: "Price",
    98 |             validation: {

ERROR in src/App.tsx:118:23
TS7031: Binding element 'values' implicitly has an 'any' type.
    116 |             }
    117 |         },
  > 118 |         published: ({ values }) => buildProperty({
        |                       ^^^^^^
    119 |             name: "Published",
    120 |             dataType: "boolean",
    121 |             columnWidth: 100,

ERROR in src/App.tsx:224:9
TS2322: Type '{ name: string; authentication: Authenticator<User>; collections: EntityCollection<Product, string, any>[]; firebaseConfig: { apiKey: string; ... 4 more ...; appId: string; }; }' is not assignable to type 'IntrinsicAttributes & FirebaseCMSAppProps'.
  Property 'collections' does not exist on type 'IntrinsicAttributes & FirebaseCMSAppProps'.
    222 |         name={"My Online Shop"}
    223 |         authentication={myAuthenticator}
  > 224 |         collections={[productsCollection]}
        |         ^^^^^^^^^^^
    225 |         firebaseConfig={firebaseConfig}
    226 |     />;
    227 | }

fgatti675 · 2022-08-01T14:39:12Z

I think you have followed the quickstart from version 2.0 but are using version 1.0
Can you try with this quickstart?
https://firecms.co/docs/1.0.0/quickstart

NNskelly · 2022-08-01T14:49:17Z

Same 3 warnings, but this time it looks like it's built a stable instance.
Edit: until I try to upload a file, at which point it spams Bad Request messages. Might be a config issue on my end, but the project does have storage set up and I am otherwise able to log in and navigate the CMS running on local. The error payload itself does not appear to be surfaced to console, so it will take a bit longer to sort out which end this is on.

Upload error FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown)
Bad Request
    FirebaseError errors.ts:85
    StorageError error.ts:39
    unknown error.ts:117
    backoffDone request.ts:158
    triggerCallback backoff.ts:58
    handler backoff.ts:82
    doTheRequest request.ts:130

Ok. Upload works fine from an actual firebase-hosted instance, so the error is probably CORS or similar on the firebase / gcloud side.

NNskelly · 2022-08-01T15:39:49Z

Alright- found an issue with the date picker. I was on the verge of creating a new standalone Issues post, but since datepicker was something you just tweaked experimentally as part of this resolution, I figured I'd run it up the flagpole here first. I'm guessing I won't be able to readily get a vanilla/current 1.0.0 or 2.0.0 instance running without the pending tweak, so I can't actually prove whether or not it's related.

Created a new project/CMS, as above, with the Quickstart sample tsx.
Created a product entry, saved it, verified it
Experimentally, added a new "extra" field to the Product schema (incidentally, is there a difference between ending lines with ; vs , in the definition? I haven't worked much with typescript, and the sample tsx was inconsistent until I standardized it to ;)

type Product = {
    name: string;
    price: number;
    status: string;
    published: boolean;
    related_products: EntityReference[];
    main_image: string;
    tags: string[];
    description: string;
    categories: string[];
    publisher: {
        name: string;
        external_id: string;
    };
    expires_on: Date;
    extra: string;
}

...
        expires_on: {
            title: "Expires on",
            dataType: "timestamp"
        },
        extra: {
            title: "Extra",
            description: "Experiment in data handling",
            longDescription: "Specifically, experiment in how schema field addition and removal affects existing data.",
            dataType: "string",
            validation: { required: true },
        },
...

Rebuilt, redeployed, went to edit the existing product data. Edit was successfully disallowed until I populated the new field. HOWEVER, attempting to submit with only the new field changed threw an error that the Expiration date (as auto-filled from the existing data) was invalid.

interpegasus · 2022-09-03T16:20:46Z

Working package.json
V1: https://firecms.co/docs/1.0.0/quickstart
This is a working version of dependencies for version 1 with $ npm install

"dependencies": {
    "@camberi/firecms": "^1.0.0-beta1",
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@mui/icons-material": "5",
    "@mui/lab": "^5.0.0-alpha.49",
    "@mui/material": "5",
    "@mui/styles": "5",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.24",
    "@types/node": "^12.20.27",
    "@types/react": "^17.0.27",
    "@types/react-dom": "^17.0.9",
    "firebase": "^9",
    "npm": "^7.24.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^6.0.0-beta.5",
    "react-router-dom": "^6.0.0-beta.5",
    "react-scripts": "^4.0.3",
    "typescript": "^4.4.3",
    "web-vitals": "^1.1.2",
    "serve": "^12.0.1"
  },

V2: https://firecms.co/docs/quickstart
This is a working version of dependencies for version 2 with $ npm install

"dependencies": {
    "@camberi/firecms": "^2.0.0-alpha.28",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@mui/icons-material": "^5.10.3",
    "@mui/lab": "^5.0.0-alpha.49",
    "@mui/material": "^5.10.3",
    "@mui/x-date-pickers": "^5.0.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "firebase": "^9.9.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^6.3.0",
    "react-router-dom": "^6.0.0-beta.5",
    "react-scripts": "5.0.1",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0",
    "serve": "^12.0.1"
  },

richardszegh · 2022-09-07T15:38:30Z

This is an issue with CRA, see this discussion and this pull request.

Here's a temporary solution using Craco.

fgatti675 · 2024-03-14T00:35:49Z

This does not apply anymore to the latest version

NNskelly mentioned this issue Jul 27, 2022

Following Quickstart, yarn test fails #349

Closed

fgatti675 closed this as completed Mar 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Running new install from Quickstart guide compiles with errors #340

Running new install from Quickstart guide compiles with errors #340

charlieswing commented Jul 13, 2022

bare-metal-gpu commented Jul 16, 2022

fgatti675 commented Jul 16, 2022 via email

fgatti675 commented Jul 17, 2022

fgatti675 commented Jul 18, 2022

NNskelly commented Jul 27, 2022 •

edited

Loading

fgatti675 commented Jul 28, 2022

NNskelly commented Jul 29, 2022 •

edited

Loading

fgatti675 commented Jul 31, 2022 •

edited

Loading

NNskelly commented Aug 1, 2022

fgatti675 commented Aug 1, 2022

NNskelly commented Aug 1, 2022 •

edited

Loading

NNskelly commented Aug 1, 2022

interpegasus commented Sep 3, 2022 •

edited

Loading

richardszegh commented Sep 7, 2022 •

edited

Loading

fgatti675 commented Mar 14, 2024

Running new install from Quickstart guide compiles with errors #340

Running new install from Quickstart guide compiles with errors #340

Comments

charlieswing commented Jul 13, 2022

bare-metal-gpu commented Jul 16, 2022

fgatti675 commented Jul 16, 2022 via email

fgatti675 commented Jul 17, 2022

fgatti675 commented Jul 18, 2022

NNskelly commented Jul 27, 2022 • edited Loading

fgatti675 commented Jul 28, 2022

NNskelly commented Jul 29, 2022 • edited Loading

fgatti675 commented Jul 31, 2022 • edited Loading

NNskelly commented Aug 1, 2022

fgatti675 commented Aug 1, 2022

NNskelly commented Aug 1, 2022 • edited Loading

NNskelly commented Aug 1, 2022

interpegasus commented Sep 3, 2022 • edited Loading

richardszegh commented Sep 7, 2022 • edited Loading

fgatti675 commented Mar 14, 2024

NNskelly commented Jul 27, 2022 •

edited

Loading

NNskelly commented Jul 29, 2022 •

edited

Loading

fgatti675 commented Jul 31, 2022 •

edited

Loading

NNskelly commented Aug 1, 2022 •

edited

Loading

interpegasus commented Sep 3, 2022 •

edited

Loading

richardszegh commented Sep 7, 2022 •

edited

Loading