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
Related
I tried to enter yarn run build in boilerplate.
but it shows warning/error
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
ERROR in main
Module not found: Error: Can't resolve './src' in 'C:\Users\0110\Documents\boilerplate-mern-stack-master'
resolve './src' in 'C:\Users\0110\Documents\boilerplate-mern-stack-master'
using description file: C:\Users\0110\Documents\boilerplate-mern-stack-master\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: C:\Users\0110\Documents\boilerplate-mern-stack-master\package.json (relative path: ./src)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\0110\Documents\boilerplate-mern-stack-master\src doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\0110\Documents\boilerplate-mern-stack-master\src.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
C:\Users\0110\Documents\boilerplate-mern-stack-master\src.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
C:\Users\0110\Documents\boilerplate-mern-stack-master\src.wasm doesn't exist
as directory
C:\Users\0110\Documents\boilerplate-mern-stack-master\src doesn't exist
webpack 5.74.0 compiled with 1 error and 1 warning in 494 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
There is an error in ./src, but I don't know what this means.
This is my package.json
{
"name": "react-boiler-plate",
"version": "1.0.0",
"description": "react boiler plate",
"main": "index.js",
"engine": {
"node": "10.16.0",
"npm": "6.9.0"
},
"scripts": {
"start": "node server/index.js",
"build": "webpack",
"backend": "nodemon server/index.js",
"frontend": "npm run start --prefix client",
"dev": "concurrently \"npm run backend\" \"npm run start --prefix client\"",
"predeploy": "yarn build",
"deploy": "gh-pages -d build"
},
"dependencies": {
"async": "^3.2.0",
"bcrypt": "^5.0.1",
"body-parser": "^1.18.3",
"cookie-parser": "^1.4.3",
"cors": "^2.8.5",
"debug": "^4.1.1",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"moment": "^2.24.0",
"mongoose": "^5.4.20",
"multer": "^1.4.2",
"react-redux": "^5.0.7",
"saslprep": "^1.0.3",
"supports-color": "^7.1.0",
"webpack": "^5.74.0"
},
"devDependencies": {
"concurrently": "^4.1.0",
"gh-pages": "^4.0.0",
"nodemon": "^1.19.1",
"webpack-cli": "^4.10.0"
}
}
I used both yarn and npm but it still didn't work
I don't know why I can't run build only for this project.
This is my first time using boilerplate.
I have spent three hours trying to debug this Gatsby build error.
It says to use a non-minified command, but gatsby develop doesn't throw any error so I'm a bit unsure on how to debug this.
Looking online reveals very little for the /styles/ folder.
My Netlify server also throws the same error as well as failing locally on Mac.
Any suggestions on where to start?
ERROR
Page data from page-data.json for the failed page "/styles/": {
"componentChunkName": "component---src-pages-styles-js",
"path": "/styles/",
"result": {
"pageContext": {}
},
"staticQueryHashes": []
}
failed Building static HTML for pages - 2.025s
ERROR #95313
Building static HTML failed for path "/styles/"
See our docs page for more info on this error: https://gatsby.dev/debug-html
1 | /*!
> 2 | * Font Awesome Free 5.15.4 by #fontawesome - https://fontawesome.com
| ^
3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4 | */
5 | function _typeof(obj) {
WebpackError: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bname%2C%20styles%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
- index.es.js:2
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:2:1
- index.es.js:2
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:2:1
- index.es.js:4
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:4:1
- index.es.js:27
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:27:1
- index.es.js:26
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:26:37
- index.es.js:37
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:37:1
- static-entry.js:294
play-landing/.cache/static-entry.js:294:22
- index.es.js:147
[play-landing]/[#fortawesome]/fontawesome-svg-core/index.es.js:147:1
Here is my package JSON
{
"name": "play-landing",
"description": "-",
"version": "1.1.3",
"author": "Luke Brown",
"dependencies": {
"#emotion/react": "^11.7.1",
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/pro-light-svg-icons": "^5.15.4",
"#fortawesome/react-fontawesome": "^0.1.17",
"#mui/material": "^5.3.1",
"bulma": "^0.9.0",
"dotenv": "^14.3.2",
"gatsby": "^4.0.0",
"gatsby-plugin-emotion": "^7.6.0",
"gatsby-plugin-image": "^2.0.0",
"gatsby-plugin-netlify": "^3.14.0",
"gatsby-plugin-netlify-cms": "^6.0.0",
"gatsby-plugin-purgecss": "^6.0.0",
"gatsby-plugin-react-helmet": "^5.0.0",
"gatsby-plugin-react-svg": "^3.1.0",
"gatsby-plugin-sass": "^5.0.0",
"gatsby-plugin-sharp": "^4.0.0",
"gatsby-plugin-web-font-loader": "^1.0.4",
"gatsby-remark-copy-linked-files": "^5.0.0",
"gatsby-remark-images": "^6.0.0",
"gatsby-remark-relative-images": "^0.3.0",
"gatsby-source-filesystem": "^4.0.0",
"gatsby-transformer-remark": "^5.0.0",
"gatsby-transformer-sharp": "^4.0.0",
"lodash": "^4.17.15",
"lodash-webpack-plugin": "^0.11.4",
"lottie-react": "^2.2.1",
"netlify-cms-app": "^2.15.65",
"netlify-cms-media-library-cloudinary": "^1.3.10",
"netlify-cms-media-library-uploadcare": "^0.5.10",
"prop-types": "^15.6.0",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react-helmet": "^6.0.0",
"sass": "^1.43.2",
"uuid": "^8.0.0"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"main": "n/a",
"scripts": {
"clean": "gatsby clean",
"start": "npm run develop",
"build": "npm run clean && gatsby build",
"develop": "npm run clean && gatsby develop",
"serve": "gatsby serve",
"format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"prettier": "^2.0.5"
},
"engines": {
"node": ">= 14.15.0"
}
}
After having access to the repo (which runs on Gatsby) I found that /styles/ folder when searched was inside the /public/ folder which is generated by gatsby, this pointed me to the same error that referenced the chunk error "componentChunkName": "component---src-pages-styles-js", I then searched for this file which existed in the .cache, this file showed me the error was coming from #emotion trying to compile the src/pages/styles.js file that is used by index-old.js.
It seemed that Gatsby was interpreting /src/pages/styles.js as a normal static page to build, but because it is returning a function that returned emotion JSX it couldn't build properly as Gatsby expects all .js files to return React JSX code.
It turned out in this project, these files wasn't actually used anymore so simply deleting them fixed the issue. If it was used though, simply having styles.js somewhere other than the /src/pages folder would fix this. I'd recommend having a views folder where you store all pages and styling relative to it to avoid Gatsby trying to compile pages from styling.
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 get a "500 Server Error" when I deploy my Nuxt application.
Below are my configuration files:
package.json
{
"name": "my-app-name",
"version": "1.0.0",
"description": "An App",
"author": "Me",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "NODE_ENV=production nuxt",
"deploy": "npm run build && gcloud app deploy",
"generate": "nuxt generate",
"postinstall": "nuxt build"
},
"dependencies": {
"#nuxtjs/axios": "^5.0.0",
"#firebase/firestore": "^0.6.0",
"#firebase/storage": "^0.2.3",
"firebase": "^5.3.0",
"nuxt": "^1.0.0",
"nuxt-buefy": "^0.0.4"
},
"devDependencies": {
"cross-env": "^5.0.1",
"node-sass": "^4.9.2",
"nuxt-sass-resources-loader": "^2.0.3",
"sass-loader": "^7.0.3"
}
}
Previously my start was nuxt start and i do not have deploy
https://github.com/kamatte-me/nuxt-gae-se/blob/master/package.json
But still get the same error.
app.yaml
runtime: nodejs8
env : standard
I also referred and attempted to try out the suggestions here and here but doesn't work. Note that my application does not have a server.js or app.js, so i cannot use those.
Update
I did a workaround using the below approach (so can ignore everything above unless you need it as additional reference).
I added a server.js (exactly same as theirs) following https://github.com/kamatte-me/nuxt-gae-se and updated my package.json to such:
{
"name": "my-app-name",
"version": "1.0.0",
"description": "A App",
"author": "Me",
"private": true,
"scripts": {
"dev": "node server.js",
"build": "nuxt build",
"start": "NODE_ENV=production node server.js",
"deploy": "npm run build && gcloud app deploy",
"generate": "nuxt generate",
"postinstall": "nuxt build"
},
"dependencies": {
"#nuxtjs/axios": "^5.0.0",
"#firebase/firestore": "^0.6.0",
"#firebase/storage": "^0.2.3",
"express": "^4.16.3", //<-added this as suggested by kamette
"firebase": "^5.3.0",
"nuxt": "^1.0.0",
"nuxt-buefy": "^0.0.4"
},
"devDependencies": {
"cross-env": "^5.0.1",
"node-sass": "^4.9.2",
"nuxt-sass-resources-loader": "^2.0.3",
"sass-loader": "^7.0.3"
}
}
Now my error is this:
Any idea?
I have this in my Navigation.vue:
<nuxt-link to="/" exact>Dashboard</nuxt-link>
In addition, the error logs I saw:
After adding "nuxt-sass-resources-loader": "^2.0.3" to the dependencies as advised by kamatte, I am seeing back the "500 Server Error" again, logs doesn't show anything useful (I have clicked "Load newer logs" many times already, this is the latest...)
Express.js and nuxt-sass-resources-loader must be included in package.json.
.e.g.)
package.json
"dependencies": {
"express": "^4.16.3",
"nuxt-sass-resources-loader": "^2.0.3"
},
Otherwise, Express.js will not be installed on the GAE.
It seems that it worked because you already installed Express.js in your local environment.
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