I'm following this youtube firebase official tutorial on cloud functions for server-side react rendering.
(I followed the exact directory structure as the video by the way.)
But I'm getting an error whenever I try to serve it:
i functions: Preparing to emulate functions.
⚠ hosting: Port 5000 is not available. Trying another port...
i hosting: Serving hosting files from: dev
✔ hosting: Local server: http://localhost:5004
⚠ functions: Failed to load functions source code. Ensure that you have the latest SDK by running npm i --save firebase-functions inside the functions directory.
⚠ functions: Error from emulator. Error occurred while parsing your function triggers.
TypeError: Cannot read property 'https' of undefined
at Object.<anonymous> (/Users/mac/Documents/React-Projects/React-js/Cards/functions/index.js:35:54)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at /Users/mac/.nvm/versions/node/v6.11.5/lib/node_modules/firebase-tools/lib/triggerParser.js:21:11
at Object.<anonymous> (/Users/mac/.nvm/versions/node/v6.11.5/lib/node_modules/firebase-tools/lib/triggerParser.js:75:3)
I have tried npm i --save firebase-functions as it said but still getting error.
firebase.json:
{
"hosting": {
"public": "dev",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites":[{
"source": "**",
"function": "main"
}]
}
}
index.js in the root of project folder:
import React from 'react';
import { renderToString } from 'react-dom';
import express from 'express';
import Test from './src/components/Test/Test';
import functions from 'firebase-functions';
const app = express();
app.get('**', (req, res) => {
const html = renderToString(<Test />);
res.send(html);
});
export let main = functions.https.onRequest(app);
package.json:
{
"name": "Cards",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"start": "webpack-dev-server --open --hot --mode development",
"build": "webpack -p --config webpack.prod.config.js",
"babel": "babel src -d functions/src && babel index.js -d functions"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#material-ui/core": "^1.3.0",
"#material-ui/icons": "^1.1.0",
"firebase": "^5.2.0",
"react": "^16.4.1",
"react-dom": "^16.4.1"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"firebase-admin": "^5.12.1",
"firebase-functions": "^1.1.0",
"firebase-tools": "^3.19.1",
"webpack": "^4.14.0",
"webpack-dev-server": "^3.1.4"
}
}
By looking at the error, it is pointing at functions.https.onRequest(app); line in the index.js file.
I have also checked in the functions get started guide and it has functions.https.onRequest(...).
So, where is the problem and how can I solve it?
System details:
macOS: 10.13.4
nvm: 0.33.11
node: 6.11.5
npm: 3.10.10
You should do:
import * as functions from 'firebase-functions'
because 'firebase-functions' obviously doesn't seem to have a default export
or you can do:
import { https } from 'firebase-functions'
but remember to add to this impot any other functions that you might use in your code.
Related
I have created an electron project which is working fine but when I try to package an electron app using electron packager and then run it. I am facing an exception
Uncaught Exception:
Error: Cannot find module
Require stack
'E:\app-folder..release-builds\app-win32-ia32\resources\app....\node_sqlite3.node'
click here to see Error
'Here is my package.json'
{
"name": "app",
"version": "1.0.0",
"main": "main.js",
"devDependencies": {
"electron": "^8.2.0",
"electron-builder": "^22.8.0",
"electron-rebuild": "^1.10.1"
},
"scripts": {
"start": "electron .",
"rebuild": "electron-rebuild -f -w sqlite3",
"package-win": "electron-packager . App--overwrite --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"App\"",
"postinstall": "electron-builder install-app-deps"
},
"dependencies": {
"axios": "^0.19.2",
"concat-stream": "^2.0.0",
"datatables.net": "^1.10.20",
"datatables.net-dt": "^1.10.20",
"ejs": "^3.1.5",
"electron-packager": "^15.0.0",
"express-validator": "^6.6.1",
"form-data": "^3.0.0",
"jquery": "^3.5.0",
"nodemailer": "^6.4.11",
"sqlite3": "^5.0.0"
}
}
npm install --save-dev #electron-forge/cli
npm run package
try running these commands you will get an out folder and the application is present in that out folder
I just started using Ember and I have some trouble with the Ember Quickstart tutorial. Currently, I get Parsing error: Unexpected character '#' in line 5 of people-list.js:
import Component from '#glimmer/component';
import { action } from '#ember/object';
export default class PeopleListComponent extends Component {
#action
showPerson(person) {
alert(`The person's name is ${person}!`);
}
}
What's wrong here? The code is copied from the tutorial.
This is the output of ember -v:
ember-cli: 3.18.0
node: 11.13.0
os: darwin x64
This is my package.json. I can run npm install, but yarn install gives me The engine "node" is incompatible with this module. Expected version "10.* || >= 12". Got "11.13.0".
{
"name": "ember-quickstart",
"version": "0.0.0",
"private": true,
"description": "Small description for ember-quickstart goes here",
"repository": "",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"lint:hbs": "ember-template-lint .",
"lint:js": "eslint .",
"start": "ember serve",
"test": "ember test"
},
"devDependencies": {
"#ember/jquery": "^0.5.2",
"#ember/optional-features": "^0.6.3",
"broccoli-asset-rev": "^2.7.0",
"ember-ajax": "^5.0.0",
"ember-cli-app-version": "^3.2.0",
"ember-cli-babel": "^7.1.2",
"ember-cli-dependency-checker": "^3.1.0",
"ember-cli-eslint": "^4.2.3",
"ember-cli-htmlbars": "^3.0.0",
"ember-cli-htmlbars-inline-precompile": "^1.0.3",
"ember-cli-inject-live-reload": "^1.8.2",
"ember-cli-sri": "^2.1.1",
"ember-cli-template-lint": "^1.0.0-beta.1",
"ember-cli-uglify": "^2.1.0",
"ember-data": "~3.9.0",
"ember-export-application-global": "^2.0.0",
"ember-load-initializers": "^1.1.0",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-qunit": "^3.4.1",
"ember-resolver": "^5.0.1",
"ember-source": "~3.9.0",
"ember-welcome-page": "^3.2.0",
"eslint-plugin-ember": "^5.2.0",
"loader.js": "^4.7.0",
"qunit-dom": "^0.8.0"
},
"engines": {
"node": "10.* || >= 12"
},
"dependencies": {
"ember-cli": "^3.18.0",
"#glimmer/component": "^1.0.0"
}
}
Adding some text here as SO won't let me post the question otherwise.
You're ember-source is set to ~3.9.0. I'm pretty sure #action is an Octane feature that was added in 3.14.
Either update ember-source to 3.14 or newer or switch to the 3.9.0 documentation. I'd recommend updating as Octane is awesome.
The output says you currently have ember-cli 3.18, but your app seems to have been generated by an older ember-cli 3.9 as indicated by devDependencies.
As mentioned in the comments, 3.9 does not have access to some of the current features unless you install some polyfills.
If regenerating the app is a possibility, I would suggest doing it.
Run ember --version to make sure 3.18 is being called
Run ember new my-app-name and check that package.json has 3.18 for ember-source.
Go through the quickstart!
Alternatively, you can run npx ember-cli new my-app-name and it should generate an app using the latest ember-cli version available in npm.
If you don't want to lose some work you might have done, you can check out ember-cli-update by running something like npx ember-cli-update. Check the README for more info.
I try to build a small app based upon Webex web SDK, internally requiring regenerator-transform.
Here is my package.json simple file:
{
"scripts": {
"serve": "yarn build",
"build": "parcel index.html --out-dir dist --public-url ./",
"deploy": "git subtree push --prefix dist origin gh-pages",
},
"license": "MIT",
"dependencies": {
"crypto-js": "^4.0.0",
"moment": "^2.24.0",
"urijs": "^1.19.2",
"webex": "^1.80.147"
},
"browserslist": [
"last 2 major versions and >1%"
],
"devDependencies": {
"#babel/core": "^7.8.7",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-stage-0": "^6.24.1"
}
}
Here is my .babelrc file too:
{
presets : [ 'es2015', 'es2016' ]
}
It works perfectly when I use browserslist preset latest Chrome, but with this current query, I have this error:
[...]pkijs/src/SignedCertificateTimestampList.js: unknown Statement of type "ForOfStatement"
Full stack trace:
🚨 /Users/guillaumepotier/Sites/webex-sdk/node_modules/pkijs/src/SignedCertificateTimestampList.js: /Users/guillaumepotier/Sites/webex-sdk/node_modules/pkijs/src/SignedCertificateTimestampList.js: unknown Statement of type "ForOfStatement"
at Emitter.Ep.explodeStatement (/Users/guillaumepotier/.config/yarn/global/node_modules/regenerator-transform/lib/emit.js:587:13)
at /Users/guillaumepotier/.config/yarn/global/node_modules/regenerator-transform/lib/emit.js:323:12
at Array.forEach (<anonymous>)
at Emitter.Ep.explodeStatement (/Users/guillaumepotier/.config/yarn/global/node_modules/regenerator-transform/lib/emit.js:322:22)
at Emitter.Ep.explode (/Users/guillaumepotier/.config/yarn/global/node_modules/regenerator-transform/lib/emit.js:280:40)
at PluginPass.<anonymous> (/Users/guillaumepotier/.config/yarn/global/node_modules/regenerator-transform/lib/visit.js:111:17)
at PluginPass.<anonymous> (/Users/guillaumepotier/.config/yarn/global/node_modules/regenerator-transform/lib/util.js:28:17)
at newFn (/Users/guillaumepotier/.config/yarn/global/node_modules/#babel/traverse/lib/visitors.js:179:21)
at NodePath._call (/Users/guillaumepotier/.config/yarn/global/node_modules/#babel/traverse/lib/path/context.js:55:20)
at NodePath.call (/Users/guillaumepotier/.config/yarn/global/node_modules/#babel/traverse/lib/path/context.js:42:17)
It seems the problem is raised by regenerator-transform and the "ForOfStatement" within a generator, I tried many babel different configs but in vain.
My parcel --version gives me 1.12.4
Do you have any clue for that, how do you ship code with Parcel for IE11?
I started a new react project using create-react-app boilerplate (https://github.com/facebook/create-react-app), and I'm getting the following error when trying to start the app, the reason is that I have created a folder called 'containers' where all the containers go, and I want to create an index file to export all of them from that directory, this way I can just reference the directory in order to import de components.
Like this:
import UserContainer from './containers/UserContainer'; //This work(but ugly)
import { UserContainer } from './containers'; // This does not work
Basically this is the content of my index.js file inside the containers folder:
export UserContainer from './UserContainer';
And I'm getting the error Syntax error: Unexpected token, expected { (1:7),
this is the content of my package.json:
{
"name": "user-management1",
"version": "0.1.0",
"private": true,
"dependencies": {
"install": "^0.11.0",
"npm": "^6.0.0",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-redux": "^4.2.1",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.4",
"react-scripts": "1.1.4",
"redux": "^3.5.2"
},
"scripts": {
"lint": "eslint src",
"lint:fix": "npm run lint -- --fix",
"lint:css": "stylelint \"src/**/*.{css,less,scss,sss}\"",
"start": "npm run lint:fix && react-scripts start & npm run apiserver",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"apiserver": "json-server --watch --port 4000 api/db.json"
},
"devDependencies": {
"bulma": "^0.7.1",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-css-modules": "^2.7.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3",
"json-server": "^0.12.2"
}
}
I start the app using 'react-scripts'. The problem seems related to babel?, do I need to start the app using babel-node?, or add any presets anywhere? I thought using this boilerplate babel was already configured to start coding in ES6.
Please help
You are basically re-exporting a module (that is adding another module’s exports to those of the current module). In order to make the named export UserContainer of module ./UserContainer the default export of current module you should write:
export { default as UserContainer } from './UserContainer'
Check this link for a complete reference
I have a project that consists of server side code (in nodejs) and client side code (with react). I have separate package.json files for those but I was asked to merge them into one. Server file is in the project root dir, client side is in /client folder with the rest of client code. Could you help me to do that? May I just copy client file to server client with some modification? I cannot find anything useful on it.
package.json:
{
"name": "curr-calc",
"version": "1.0.0",
"description": "currency calc using node.js and react.js",
"main": "index.js",
"repository": "",
"author": "",
"license": "MIT",
"scripts": {
"client": "cd client && yarn start",
"server": "nodemon server.js",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"",
"lint": "eslint .",
"babel": "babel --presets es2015 js/server.js -o build/main.bundle.js",
"test": "yarn --cwd client run test",
"heroku-postbuild": "cd client && yarn --production=false && yarn run build"
},
"dependencies": {
"body-parser": "^1.18.2",
"express": "^4.16.2",
"express-session": "^1.15.6",
"node-fetch": "^2.1.2",
"open": "0.0.5",
"path": "^0.12.7",
"prop-types": "^15.6.1",
"react-widgets": "^4.2.6",
"redis": "^2.8.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.3",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"concurrently": "^3.5.0",
"eslint": "^4.19.1",
"eslint-config-standard": "^10.2.1",
"eslint-config-standard-react": "^5.0.0",
"eslint-plugin-import": "^2.6.0",
"eslint-plugin-jest": "^21.3.2",
"eslint-plugin-node": "^5.1.0",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^7.5.1",
"eslint-plugin-standard": "^3.0.1",
"fetch-mock": "^6.3.0",
"node-fetch": "^2.1.2",
"nodemon": "^1.17.2",
"react-test-renderer": "^16.3.0",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1"
}
}
client/package.json:
{
"name": "curr-calc",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1"
},
"devDependencies": {
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"fetch-mock": "^6.3.0",
"react-test-renderer": "^16.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000/"
}
EDIT:
I tried to merge this manually:
1) I copied all dependencies
2) I copied srcipts and renamed those duplicated and add "cd client && " to the beginning of every client script
3) I removed package.json, node_modules and all yarn files from clien folder
Now when I try to run the app by yarn dev I receive:
Listening on port 5000 [1] module.js:549 [1] throw err; [1] ^
[1] [1] Error: Cannot find module
'/home/zaba/code/currCalc_react/curr-calc/client/package.json' [1]
at Function.Module._resolveFilename (module.js:547:15) [1] at
Function.Module._load (module.js:474:25) [1] at Module.require
(module.js:596:17) [1] at require (internal/module.js:11:18) [1]
at getPublicUrl
(/home/zaba/code/currCalc_react/curr-calc/node_modules/react-scripts/config/paths.js:34:19)
[1] at Object.
(/home/zaba/code/currCalc_react/curr-calc/node_modules/react-scripts/config/paths.js:61:14)
[1] at Module._compile (module.js:652:30) [1] at
Object.Module._extensions..js (module.js:663:10) [1] at
Module.load (module.js:565:32) [1] at tryModuleLoad
(module.js:505:12) error An unexpected error occurred: "Command
failed. [1] Exit code: 1 [1] Command: sh [1] Arguments: -c cd client
&& react-scripts start [1] Directory:
/home/zaba/code/currCalc_react/curr-calc [1] Output: [1] ". info If
you think this is a bug, please open a bug report with the information
provided in "/home/zaba/code/currCalc_react/curr-calc/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about
this command. error An unexpected error occurred: "Command failed. [1]
Exit code: 1 [1] Command: sh [1] Arguments: -c yarn start [1]
Directory: /home/zaba/code/currCalc_react/curr-calc [1] Output: [1] ".
info If you think this is a bug, please open a bug report with the
information provided in
"/home/zaba/code/currCalc_react/curr-calc/yarn-error.log". info Visit
https://yarnpkg.com/en/docs/cli/run for documentation about this
command. [1] yarn client exited with code 1
--> Sending SIGTERM to other processes.. [0] yarn server exited with code null error An unexpected error occurred: "Command failed. Exit
code: 1 Command: sh Arguments: -c concurrently --kill-others-on-fail
\"yarn server\" \"yarn client\" Directory:
/home/zaba/code/currCalc_react/curr-calc Output: ". info If you think
this is a bug, please open a bug report with the information provided
in "/home/zaba/code/currCalc_react/curr-calc/yarn-error.log".
Why is it still looking for client/package.json file? Can that be create-react-app setting hidden somewhere?
I would not merge those into one. They are two different applications and have different dependencies. I'd namespace the names though like this: #curr-calc/client and #curr-calc/server.
If you really wanted to merge them, I'd do that manually by just copying over the dependencies, devDependencies and scripts. Remove any duplicates (in case of scripts you'll need to rename those who have duplicate keys).
You have several approaches here, depending on your goals:
Merge it manually, along with the two projects - then you'll have a single project with a single package.json file.
Since json is just a plain JS object, you can use something like lodash's merge to achieve that:
const server = require("../path/to/server/package.json");
const client = require("../path/to/client/package.json");
const merge = require("lodash/fp/merge");
let merged = merge(server, client);
more information about lodash-fp and node can be found here