Faced this issue when I was using login functionality developed by my teammate in a group project and apparently I am the only one facing this issue.
npm version: 8.19.3
node version: 16.17.0
package.json :-
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "npm run prettify && next dev",
"build": "npm run prettify && next build",
"start": "next start",
"lint": "npm run prettify && next lint",
"prettify": "prettier --write \"**/*.{js, jsx}\""
},
"dependencies": {
"#emotion/react": "11.10.4",
"#emotion/server": "11.10.0",
"#emotion/styled": "11.10.4",
"#mui/icons-material": "5.10.6",
"#mui/material": "5.10.6",
"#mui/x-date-pickers": "^5.0.3",
"cryptr": "^6.0.3",
"dayjs": "^1.11.5",
"intl": "^1.2.5",
"mui-file-dropzone": "^4.0.2",
"next": "12.2.5",
"next-auth": "^4.12.0",
"normalize.css": "^8.0.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-share": "^4.4.1",
"react-toastify": "^9.0.8",
"swr": "^1.3.0",
"universal-cookie": "^4.0.4"
},
"devDependencies": {
"eslint": "8.23.1",
"eslint-config-next": "12.3.1",
"eslint-config-prettier": "8.5.0",
"prettier": "2.7.1"
}
}
Error :-
error - Error: Cannot find module 'next/headers'
I have tried deleting the node_modules and .next folders but I am still facing this issue.
That is when you update Nextjs to version 13 with next-auth, which is intended for next#13 users, in your case using version 12 yet, the root cause the error in v4.12.x with next/headers package from next#12, so it could be to support getting the session in React Server Components for example.
Edit package.json, it should fix your issue:
{
"next-auth": "4.15.1"
}
Related
When I re-installed node_modules, I was suddenly told that ufo and node-fetch were missing. After adding them, I ran npm run dev and opened localhost in a browser and encountered this error.
This error also occurred when I cloned this project on another laptop, and I am at a loss as to how to fix it.
I tried to solve the problem by myself as much as possible, but I couldn't find a solution because the stackframe was somehow Missing stack frames and this error itself is an error in the library. I'm not very familiar with tack overflow questions, so please let me know if you find any problems.
error
Must use import to load ES Module: C:\Users\Cou\Documents\就職関係\job_portfolio\nuxt_main\node_modules\.pnpm\node-fetch#3.2.6\node_modules\node-fetch\src\index.js require() of ES modules is not supported. require() of C:\Users\Cou\Documents\就職関係\job_portfolio\nuxt_main\node_modules\.pnpm\node-fetch#3.2.6\node_modules\node-fetch\src\index.js from C:\Users\Cou\Documents\就職関係\job_portfolio\nuxt_main\node_modules\.pnpm\vue-server-renderer#2.6.14\node_modules\vue-server-renderer\build.dev.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\Cou\Documents\就職関係\job_portfolio\nuxt_main\node_modules\.pnpm\node-fetch#3.2.6\node_modules\node-fetch\package.json.
Stack frames
internal/modules/cjs/loader.js:1089:13
Module._extensions..js
internal/modules/cjs/loader.js:937:32
Module.load
internal/modules/cjs/loader.js:778:12
Module._load
internal/modules/cjs/loader.js:961:19
Module.require
internal/modules/cjs/helpers.js:92:18
require
webpack:/external "node-fetch":1:
Object.node-fetch
webpack/bootstrap:25:
__webpack_require__
.nuxt/server.js:1:
Module../.nuxt/server.js
webpack/bootstrap:25:
__webpack_require__
package.json
{
"name": "nuxt_main",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
"lint:style": "stylelint \"**/*.{css,scss,sass,html,vue}\" --ignore-path .gitignore",
"lint:prettier": "prettier --check .",
"lint": "npm run lint:js && npm run lint:style && npm run lint:prettier",
"lintfix": "prettier --write --list-different . && npm run lint:js -- --fix && npm run lint:style -- --fix",
"prepare": "husky install",
"test": "jest"
},
"lint-staged": {
"*.{js,vue}": "eslint --cache",
"*.{css,scss,sass,html,vue}": "stylelint",
"*.**": "prettier --check --ignore-unknown"
},
"dependencies": {
"#mdi/js": "^6.7.96",
"#nuxtjs/axios": "^5.13.6",
"core-js": "^3.19.3",
"csv-loader": "^3.0.3",
"csv-parse": "^5.2.0",
"fs": "0.0.1-security",
"node-fetch": "^3.2.6",
"nuxt": "^2.15.8",
"pnpm": "^7.4.0",
"ufo": "^0.8.4",
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vuetify": "^2.6.1",
"webpack": "^4.46.0"
},
"devDependencies": {
"#babel/eslint-parser": "^7.16.3",
"#nuxtjs/eslint-config": "^8.0.0",
"#nuxtjs/eslint-module": "^3.0.2",
"#nuxtjs/stylelint-module": "^4.1.0",
"#nuxtjs/vercel-builder": "^0.22.1",
"#nuxtjs/vuetify": "^1.12.3",
"#vue/test-utils": "^1.3.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^27.4.4",
"eslint": "^8.4.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-nuxt": "^3.1.0",
"eslint-plugin-vue": "^8.2.0",
"husky": "^7.0.4",
"jest": "^27.4.4",
"lint-staged": "^12.1.2",
"postcss-html": "^1.3.0",
"prettier": "^2.5.1",
"stylelint": "^14.1.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recommended-vue": "^1.1.0",
"stylelint-config-standard": "^24.0.0",
"vue-jest": "^3.0.4"
}
}
OS: Windows
Node: v14.17.4
Apparently it was due to pnpm not being able to install all the required packages.
Running pnpm install followed by npm install (or yarn install) solved the problem.
I'm facing issues implementing a CI/CD pipeline with CircleCI. I'm not able to execute any 'npm run' commands in the pipeline whereas these commands run on my local system.
I have built an Angular Client and Node/ Express API. And my folder structure is setup in the following way.
- .circleci
-- config.yml
- client
- server
- package.json
In the pipeline 'cd client npm install' works whereas 'cd client npm run build' does not work. My Angular project has 'build' script with the command set to 'ng build'.
But still the log in CircleCI reads 'npm ERR! Missing script: "build"'
The same is the case with my server folder commands. Another interesting thing to note is if I create a script named 'installapp' and use the command 'npm install' as its value, the log will now read 'npm ERR! Missing script: "installapp"'. So 'npm install' works but not 'npm run installapp' even though they both finally execute 'npm install'.
Can someone please help me resolve this issue? I'm sharing my config.yml and all the package.json files for reference to help solve this error.
.circleci/config.yml
version: 2.1
orbs:
node: circleci/node#4.1.0
aws-cli: circleci/aws-cli#1.3.1
jobs:
build:
docker:
- image: "cimg/base:stable"
steps:
- node/install
- checkout
- aws-cli/setup
- run:
name: Front-End Install
command: |
npm run frontend:install
- run:
name: Back-End Install
command: |
npm run backend:install
- run:
name: Front-End Build
command: |
npm run frontend:build
- run:
name: Back-End Build
command: |
npm run backend:build
- run:
name: Deploy App
command: |
npm run frontend:deploy
npm run backend:deploy
Root application's package.json
{
"scripts": {
"frontend:install": "cd client && npm install",
"backend:install": "cd server && npm install",
"frontend:build": "cd client && npm run build",
"backend:build": "cd server && npm run build",
"frontend:deploy": "cd client && npm run deploy",
"backend:deploy": "cd server && npm run deploy"
}
}
client package.json (Angular)
{
"name": "guitar-store-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"lint": "ng lint",
"deploy": "chmod +x ./bin/deploy.sh && ./bin/deploy.sh"
},
"private": true,
"dependencies": {
"#angular/animations": "~12.2.0",
"#angular/common": "~12.2.0",
"#angular/compiler": "~12.2.0",
"#angular/core": "~12.2.0",
"#angular/forms": "~12.2.0",
"#angular/platform-browser": "~12.2.0",
"#angular/platform-browser-dynamic": "~12.2.0",
"#angular/router": "~12.2.0",
"#auth0/angular-jwt": "^5.0.2",
"rxjs": "~6.6.0",
"tslib": "^2.3.0",
"w3-css": "^4.1.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~12.2.1",
"#angular-eslint/builder": "12.3.1",
"#angular-eslint/eslint-plugin": "12.3.1",
"#angular-eslint/eslint-plugin-template": "12.3.1",
"#angular-eslint/schematics": "12.3.1",
"#angular-eslint/template-parser": "12.3.1",
"#angular/cli": "~12.2.1",
"#angular/compiler-cli": "~12.2.0",
"#types/jasmine": "~3.8.0",
"#types/node": "^12.11.1",
"#typescript-eslint/eslint-plugin": "4.28.2",
"#typescript-eslint/parser": "4.28.2",
"eslint": "^7.26.0",
"jasmine-core": "~3.8.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.3.5"
}
}
server package.json (Node/Express)
{
"name": "storefront-backend-api",
"version": "1.0.0",
"description": "An e-commerce API",
"main": "build/server/app.js",
"engines": {
"node": ">=14.17.1",
"npm": ">=6.14.13"
},
"scripts": {
"lint": "eslint src/**/*.ts",
"prettier": "prettier --config .prettierrc src/**/*.ts --write",
"build": "npx tsc",
"jasmine": "jasmine",
"test-local": "set ENV=test&& db-migrate db:create guitar_shop_test && db-migrate --env test up && npm run jasmine && db-migrate db:drop guitar_shop_test",
"start": "node build/server/app.js",
"deploy": "chmod +x ./bin/deploy.sh && ./bin/deploy.sh"
},
"repository": {
"type": "git",
"url": "git+https://github.com/siddube/full-stack-app-server.git"
},
"keywords": [
"Image",
"Resize"
],
"author": "siddube",
"license": "ISC",
"bugs": {
"url": "https://github.com/siddube/full-stack-app-server/issues"
},
"homepage": "https://github.com/siddube/full-stack-app-server#readme",
"devDependencies": {
"#types/bcrypt": "^5.0.0",
"#types/cors": "^2.8.12",
"#types/express": "^4.17.12",
"#types/jasmine": "^3.7.7",
"#types/jsonwebtoken": "^8.5.4",
"#types/node": "^16.0.0",
"#types/pg": "^8.6.1",
"#types/supertest": "^2.0.11",
"#types/underscore": "^1.11.3",
"#typescript-eslint/eslint-plugin": "^4.28.2",
"#typescript-eslint/parser": "^4.28.2",
"db-migrate-pg": "^1.2.2",
"dotenv": "^10.0.0",
"eslint": "^7.30.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"jasmine-ts": "^0.4.0",
"nodemon": "^2.0.13",
"prettier": "^2.3.2",
"ts-node": "^10.0.0",
"typescript": "^4.3.5"
},
"dependencies": {
"bcrypt": "^5.0.1",
"cors": "^2.8.5",
"db-migrate": "^1.0.0-beta.16",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"jasmine": "^3.8.0",
"jasmine-spec-reporter": "^7.0.0",
"jsonwebtoken": "^8.5.1",
"pg": "^8.7.1",
"supertest": "^6.1.5",
"underscore": "^1.13.1"
},
"eslintIgnore": [
"**/*[sS]pec.ts",
"reporter.ts"
]
}
I think the main issue is I am not able to run 'npm run' scripts defined in these files. When the log prompts me to check available npm run commands, all these commands do show up. And 'npm install' works fine.
Would really appreciate some help or suggestions to solve this. Thanks!
I apologise, but this is a real CircleCI rookie mistake. My client and server folders were git repositories themselves and the root app would create empty folders for them while instantiating the pipeline. Solved it by creating two new folders and copying files without the old git repositories and it is working fine.
In my defense this was the first time I'm implementing a CI/CD pipeline.
Whenever I run npm i in my project base directory, the package-lock file is doubled in size. This seems to be happening because there is a "packages" part in the package-lock, which contains all project dependencies stated as "node_modules/somePackageName", but after all 10,000 of these lines there is a "dependencies" part which essentially has all of the same things but without the node_modules prefix part. Whenever anyone in my group runs npm i, nothing new is added but when I run it the 10,000 lines with node_modules/... are added.
I have tried deleting node_modules as well as the package lock, and then doing npm i again, but the same result happens. I understand the functionality of package-lock, but I don't know why it is adding everything twice with a different path.
Here is my package.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios --simulator=\"iPhone 11 Pro Max\"",
"web": "expo start --web",
"eject": "expo eject",
"lint": "eslint --ext .js,.jsx ./components --quiet",
"lint-autofix": "eslint --ext .js,.jsx ./components --quiet --fix"
},
"dependencies": {
"#expo-google-fonts/montserrat": "^0.1.0",
"#expo/vector-icons": "^10.2.1",
"#react-navigation/bottom-tabs": "^5.9.2",
"#react-navigation/native": "^5.7.6",
"expo": "^39.0.3",
"expo-font": "~8.3.0",
"expo-status-bar": "~1.0.2",
"firebase": "7.9.0",
"prop-types": "^15.7.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
"react-native-gesture-handler": "~1.7.0",
"react-native-paper": "^4.2.0",
"react-native-reanimated": "^1.13.1",
"react-native-screens": "~2.10.1",
"react-native-vector-icons": "^7.1.0",
"react-native-web": "~0.13.12",
"react-navigation-stack": "^2.10.1",
"styled-components": "^5.2.0"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"eslint": "^7.11.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.21.4",
"eslint-plugin-react-hooks": "^4.1.2"
},
"private": true
}
For anyone still facing this, I fixed this by downgrading my npm version to 6.14.5. (I was on 7 earlier)
I am trying to install a React Web Application on my Windows system. It was working fine earlier but when I re-installed my Windows then it stopped working. I have already installed Node and Npm.
When I run the command npm install it goes well. But when I run the command npm start it throws the following error:
REACT_APP_ENV is not recognized as an internal or external command
Please see the attached image also:
I have tried a lot to find and fix the issue but nothing worked.
Here is package.json file content:
{
"name": "wm-webapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"gapi-client": "0.0.3",
"libphonenumber-js": "^1.7.7",
"moment": "^2.24.0",
"node-sass": "^4.11.0",
"react": "^16.7.0",
"react-bootstrap": "^0.32.4",
"react-dates": "^18.4.1",
"react-dom": "^16.7.0",
"react-facebook-login": "^4.1.1",
"react-google-login": "^5.0.0",
"react-places-autocomplete": "^7.2.0",
"react-redux": "^5.0.7",
"react-responsive": "^6.1.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^5.0.0-alpha.9",
"react-scripts": "2.1.3",
"react-select": "^1.2.1",
"react-stripe-elements": "^2.0.2",
"react-table": "^6.8.6",
"react-toastify": "^4.5.2",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.7",
"redux-form": "^8.1.0",
"redux-form-input-masks": "^1.3.0",
"redux-logger": "^3.0.6",
"redux-saga": "^1.0.0",
"redux-thunk": "^2.3.0",
"store": "^2.0.12",
"styled-components": "^4.1.3"
},
"scripts": {
"start:env": "env-cmd .env.${REACT_APP_ENV} react-scripts start",
"start": "REACT_APP_ENV=dev npm run start:env",
"start:test": "REACT_APP_ENV=test npm run start:env",
"build:env": "env-cmd .env.${REACT_APP_ENV} react-scripts build",
"build": "REACT_APP_ENV=test npm run build:env",
"build:prod": "REACT_APP_ENV=prod npm run build:env",
"test": "react-scripts test",
"eject": "react-scripts eject",
"deploy": "aws s3 cp build s3://test.washmix.com/ --recursive --profile washmix",
"format": "prettier --write --single-quote --tab-width=2 --print-width=80"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"axios-mock-adapter": "^1.16.0",
"env-cmd": "^8.0.2",
"husky": "^1.3.1",
"prettier": "^1.16.1"
}
}
Already late to answer but for people searching for the answer..
For Windows (cmd.exe) :
'set "REACT_APP_ENV=dev" && npm run start'
For Windows (Powershell) :
'($env:REACT_APP_ENV = "dev") -and (npm start)'
For Linux, macOS (Bash) :
'REACT_APP_ENV=dev npm start'
You can anytime get thing variable with process.env.REACT_APP_ENV
You must change all environment variables in your package.json for:
Set NAME_VARIABLE=VALUE
Ex:
"start": "Set REACT_APP_ENV=dev&& npm run start:env",
If you're running on windows, remember to leave no space between the commands and &&.
So the start script will be :
"start-staging":"set REACT_APP_ENV=staging&&react-scripts start"
In script-> start, write cross-env in starting of the value.
After that
Run: npm install.
And you are ready to go
I recently copied over a React frontend into the assets folder of my Phoenix backend and also added Webpack.
When I run npm start, I get this error, even when I remove node modules folder and package-lock.json file and run npm install, I get the error again when running npm start.
The react-scripts package provided by Create React App requires a dependency:
"webpack": "4.19.1"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:
/Users/danale/Projects/node_modules/webpack (version: 4.29.0)
The error sounds straightforward except that I did a npm ls webpack and I am using the version the error says I should be using:
└─┬ react-scripts#2.0.5
└── webpack#4.19.1
Please point me in the direction I should be looking.
Here is my package.json file:
{
"name": "myproject",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^3.2.1",
"#material-ui/icons": "^3.0.1",
"apollo-boost": "^0.1.23",
"apollo-cache-inmemory": "^1.4.0",
"apollo-link-context": "^1.0.12",
"apollo-link-http": "^1.5.9",
"axios": "^0.18.0",
"classnames": "^2.2.6",
"eslint-config-airbnb": "^17.1.0",
"graphql": "^14.0.2",
"graphql-tag": "^2.10.0",
"jest-dom": "^2.1.0",
"moment": "^2.22.2",
"phoenix": "^1.3.4",
"prop-types": "^15.6.2",
"react": "^16.5.2",
"react-apollo": "^2.3.3",
"react-beautiful-dnd": "^9.0.2",
"react-dom": "^16.5.2",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.0.5",
"react-testing-library": "^5.2.0",
"redux": "^4.0.1",
"redux-saga": "^0.16.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},