firecmsco
Running new install from Quickstart guide compiles with errors
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'
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 https://github.com/Camberi/firecms/issues/340#issuecomment-1186170922, 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
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"
},
Version 2.0 seems to have the compilation error, but the app works correctly: https://firecms.co/docs/2.0.0/quickstart
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.
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?
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.
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
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: https://github.com/yarnpkg/yarn/issues/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 | }
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
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.
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.
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"
},
This is an issue with CRA, see this discussion and this pull request.
Here's a temporary solution using Craco.
