Next.js - `npm run build` failed - javascript

Trying to build my app with target: 'serverless' in next.config.js (In-order to deploy on AWS Lambda).
When running npm run build I'm getting the following output:
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled
info - Using external babel configuration from C:\Users\User\Desktop\mysite\.babelrc
info - Creating an optimized production build
warn - Compiled with warnings
./node_modules/require_optional/index.js
Critical dependency: the request of a dependency is an expression
./node_modules/node-pre-gyp/lib/pre-binding.js
Critical dependency: the request of a dependency is an expression
./node_modules/node-pre-gyp/lib/util/versioning.js
Critical dependency: the request of a dependency is an expression
./node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in 'C:\Users\User\Desktop\mysite\node_modules\node-fetch\lib'
./node_modules/mongodb/lib/operations/connect.js
Module not found: Can't resolve 'mongodb-client-encryption' in 'C:\Users\User\Desktop\mysite\node_modules\mongodb\lib\operations'
./node_modules/node-pre-gyp/lib/util/compile.js
Module not found: Can't resolve 'node-gyp' in 'C:\Users\User\Desktop\mysite\node_modules\node-pre-gyp\lib\util'
./node_modules/node-pre-gyp/lib/util/compile.js
Module not found: Can't resolve 'npm' in 'C:\Users\User\Desktop\mysite\node_modules\node-pre-gyp\lib\util'
./node_modules/node-pre-gyp/lib/util/nw-pre-gyp/index.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <!doctype html>
| <html>
| <head>
> Build error occurred
Error: package.json does not exist at C:\package.json
at Object.module.exports.wr/F.exports.find (C:\Users\User\Desktop\mysite\.next\serverless\pages\_error.js:188263:15)
at Object.<anonymous> (C:\Users\User\Desktop\mysite\.next\serverless\pages\_error.js:154078:28)
at Object.paWE (C:\Users\User\Desktop\mysite\.next\serverless\pages\_error.js:154141:30)
at __webpack_require__ (C:\Users\User\Desktop\mysite\.next\serverless\pages\_error.js:23:31)
at Object.xDbK (C:\Users\User\Desktop\mysite\.next\serverless\pages\_error.js:189175:64)
at __webpack_require__ (C:\Users\User\Desktop\mysite\.next\serverless\pages\_error.js:23:31)
at Object.gL7F (C:\Users\User\Desktop\mysite\.next\serverless\pages\_error.js:123042:67)
at __webpack_require__ (C:\Users\User\Desktop\mysite\.next\serverless\pages\_error.js:23:31)
at Module.IlR1 (C:\Users\User\Desktop\mysite\.next\serverless\pages\_error.js:53618:12)
at __webpack_require__ (C:\Users\User\Desktop\mysite\.next\serverless\pages\_error.js:23:31)
at Module.ScIc (C:\Users\User\Desktop\mysite\.next\serverless\pages\_error.js:81256:17)
at __webpack_require__ (C:\Users\User\Desktop\mysite\.next\serverless\pages\_error.js:23:31)
at C:\Users\User\Desktop\mysite\.next\serverless\pages\_error.js:91:18
at Object.<anonymous> (C:\Users\User\Desktop\mysite\.next\serverless\pages\_error.js:94:10)
at Module._compile (internal/modules/cjs/loader.js:1133:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
info - Collecting page data .npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client#0.1.0 build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\User\AppData\Roaming\npm-cache\_logs\2020-09-12T19_38_11_418Z-debug.log
What is the meaning of this error?
Error: package.json does not exist at C:\package.json
And what about all the Module not found: Can't resolve errors?
EDIT:
I have package.json in project folder.
when I run npm run dev it works just fine.
I don't know why he is complaining about C:\package.json
(the project is not under C:\, but C:\Users\User\Desktop\mysite)

When you npm run it will run whatever it is inside the script section of package.json in the directory but for some reason, it is invoked in here. I think there are 2 possibilities.
1/Either your current package.json somehow looks for C:\package.json and the error occurs
2/Your npm cache is including the C:\package.json for some reason try npm cache clean or npm cache clean --force

I think when you read this:
npm ERR! This is probably not a problem with npm.
Probably don`t depend from Npm or nodejs. I supppose some modules are missing in this folder:
./node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in
'C:\Users\User\Desktop\mysite\node_modules\node-fetch\lib'
./node_modules/mongodb/lib/operations/connect.js
Module not found: Can't resolve 'mongodb-client-encryption' in
'C:\Users\User\Desktop\mysite\node_modules\mongodb\lib\operations'
./node_modules/node-pre-gyp/lib/util/compile.js
Module not found: Can't resolve 'node-gyp' in
'C:\Users\User\Desktop\mysite\node_modules\node-pre-gyp\lib\util'
./node_modules/node-pre-gyp/lib/util/compile.js
Module not found: Can't resolve 'npm' in
'C:\Users\User\Desktop\mysite\node_modules\node-pre-gyp\lib\util'
I suggest to write in console:
npm install encoding -g
npm install mongodb-client-encryption -g
npm install node-gyp -g
npm install npm#latest -g
and change folder into "C:\Users\User\Desktop\mysite" then type:
npm install encoding --save
npm install mongodb-client-encryption --save
npm install node-gyp --save
npm install npm#latest --save
And another thing, did you do "npm init"? To initialize your folder then edit it.

I was this error, my solution was:
First, in the packege.json file, in the section scripts, we must modify the property “build”: "next build && next export", and a new property "export": "next export"
Second, we must establish the component and data folders in the root of the project
Third: use the command: npm dev build
Tha give to you and folder with the name "out"
package.json
out folder

Related

How can I find rollup 3.1.0 update error?

i want to install rollup-plugin-visualizer but its need to update rollup.
updated rollup from 1.8.0 to 3.1.0
got error
[!] RollupError: Node tried to load your configuration file as CommonJS even though it is likely an ES module. To resolve this, change the extension of your configuration to ".mjs", set "type": "module" in your package.json file or pass the "--bundleConfigAsCjs" flag.
delete node-modules folder and package-lock.json and install again npm i
got error
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: #bet-core/ui#2.4.0
npm ERR! Found: rollup#3.1.0
npm ERR! node_modules/rollup
npm ERR! dev rollup#"^3.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer rollup#">=0.60.0 <3" from rollup-plugin-babel#4.4.0
npm ERR! node_modules/rollup-plugin-babel
npm ERR! dev rollup-plugin-babel#"^4.3.2" from the root project
rollup-plugin-babel npm page says !!!
💡 This package has been deprecated and is no longer maintained. Please use #rollup/plugin-babel.
i have delete rollup-plugin-babel then install #rollup/plugin-babel.
now i got this error
[!] RollupError: Node tried to load your configuration file as CommonJS even though it is likely an ES module. To resolve this, change the extension of your configuration to ".mjs", set "type": "module" in your package.json file or pass the "--bundleConfigAsCjs" flag.
Original error: Cannot use import statement outside a module
can someone tell me where to look for this error solutions?
i have find the solution.
At first changed format from 'esm' to 'cjs' in rollup.config.js
export default {
...
output: [
{
format: 'cjs',
...
},
]
};
then rollup.config.js changed to rollup.config.mjs
Hi man I have the same issue running "npm run rollup"
RollupError: Node tried to load your configuration file as CommonJS even though it is likely an ES module. To resolve this, change the extension of your configuration to ".mjs", set "type": "module" in your package.json file or pass the "--bundleConfigAsCjs" flag.
What I found:
https://github.com/rollup/rollup/issues/4619
https://github.com/rollup/rollup/pull/4621
-You can try out this pull request locally by installing Rollup vi
npm install rollup/rollup#esm-load-config
or load it into the REPL:
https://rollupjs.org/repl/?pr=4621
this might work either: https://github.com/rollup/rollup/blob/master/docs/01-command-line-reference.md
If you're using node v14 upgrade it to v16, this works in my case, especially when you run Rollup in GitHub Action:
name: Release #vueup/vue-quill
on:
push:
branches:
- alpha
- beta
- master
paths:
- 'packages/vue-quill/**'
jobs:
release:
name: Build and release
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v3
- uses: actions/setup-node#v3
with:
node-version: 16
- name: Install root deps
run: npm ci
- name: Install package deps
working-directory: packages/vue-quill
run: npm ci
- name: Release package
working-directory: packages/vue-quill
run: npx ts-node ../../scripts/release.ts vue-quill
env:
GH_TOKEN: ${{ secrets.GH_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

I'm facing a problem with npm run serve ( vue js project )

I am getting an error when trying to run npm run serve.
At fist I tried to work with vue in laravel project and run the "npm run serve command".
After that I uninstalled vue as well as vue/cli and reinstall them again. Then i created new vue project in independent folder. But when I am trying to run server as -> npm run serve at I'm getting the same error as when i tried it in the laravel project.
I used below codes for installation:
npm run serve => the vue and laravel project
npm run dev => the laravel project
This is the error :
$ npm run serve
vue-1#0.1.0 serve P:\codes & projects\vue\Tutorials\vue-1
vue-cli-service serve
'projects\vue\Tutorials\vue-1\node_modules\.bin\' is not recognized as an intern
al or external command,
operable program or batch file.
internal/modules/cjs/loader.js:1032
throw err;
^
Error: Cannot find module 'P:\#vue\cli-service\bin\vue-cli-service.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1029:15)
at Function.Module._load (internal/modules/cjs/loader.js:898:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js
:71:12)
at internal/main/run_main_module.js:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-1#0.1.0 serve: vue-cli-service serve**
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-1#0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ahmad\AppData\Roaming\npm-cache\_logs\2020-09-13T16_12_03_
919Z-debug.log
And This is an image for the error in the bash terminal :
enter image description here

#angular-devkit/build-angular install fails with EINTEGRITY error

I'm pulling an Angular 6 project from our repo to my new laptop. My npm version is 6.9.0. My node version is 12.4.0. The project is an Angular 6.0.7 project. Globally I have Angular 6.0.8 installed, and locally (in my project), I have Angular CLI 6.0.8 but below that where it lists the Angular version, it says Angular: <error>.
ng serve fails with the error Could not find module "#angular-devkit/build-angular" from "my-project-path". Thus I tried to install this via npm install --save-dev #angular-devkit/build-angular. However, this also failed with the error message:
npm ERR! code EINTEGRITY
npm ERR! sha512-spKHSBQIxxS81N/O21WmuXA2F6wppUCsutpzenOeZzOCCJ5gEfcbqJP983IrpLXzYmXnMUa6J03SubcNPdKrlg== integrity checksum failed when using sha512: wanted sha512-spKHSBQIxxS81N/O21WmuXA2F6wppUCsutpzenOeZzOCCJ5gEfcbqJP983IrpLXzYmXnMUa6J03SubcNPdKrlg== but got sha512-2lGfU4gymmhXRUiPLeQlnlkMaSY8azJB9W8e/vFp44AlAOEvzf6XiBUoTHO9NBM4OVlehybxDM9B4SwLBh42mw==. (10271 bytes)
...
npm ERR! code EPROTO
npm ERR! errno EPROTO
npm ERR! request to https://registry.npmjs.org/app-root-path failed, reason: write EPROTO 11628:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:c:\ws\deps\openssl\openssl\ssl\record\ssl3_record.c:332:
npm ERR!
I checked package-lock.json within my project, and in the file-saver object, the integrity key has sha512-spKHSBQIxxS81N/O21WmuXA2F6wppUCsutpzenOeZzOCCJ5gEfcbqJP983IrpLXzYmXnMUa6J03SubcNPdKrlg== which is referenced in the error message as what npm wanted. I don't know why it got the other integrity value.
Any suggestions on how to resolve this EINTEGRITY error?

issue when running npm run serve in vue project

I've got an issue when try running server for vue project
this is the issue
ERROR Error: No valid exports main found for
' PROJECT PATH\node_modules\colorette'
Error: No valid exports main found for
'PROJECT PATH\node_modules\colorette'
at resolveExportsTarget (internal/modules/cjs/loader.js:622:9)
at applyExports (internal/modules/cjs/loader.js:499:14)
at resolveExports (internal/modules/cjs/loader.js:548:12)
at Function.Module._findPath (internal/modules/cjs/loader.js:654:22)
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:953:27)
at Function.Module._load (internal/modules/cjs/loader.js:859:27)
at Module.require (internal/modules/cjs/loader.js:1028:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object. (C:\Users\AlaaMohammed\PhpstormProjects\vue-2\node_modules\autoprefixer\lib\autoprefixer.js:5:17)
at Module._compile (internal/modules/cjs/loader.js:1139:30) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! vue-2#0.1.0 serve:
vue-cli-service serve npm ERR! Exit status 1 npm ERR! npm ERR!
Failed at the vue-2#0.1.0 serve script. npm ERR! This is probably not
a problem with npm. There is likely additional logging output above.
I want some to response to my problem
try to reinstall the colerette plugin version 1.2.0 manually
npm i colorette#1.2.0
Upgrade node to version 14.5 will resolve this issue.
I did the following and it worked:
1)_ First i checked the versions
npm outdated
npm update
npm install
npx npm-check-updates - u
2)_ Once i was 100% sure the problems didn't come from that source, i typed the following:
npm install autoprefixer#9.8.0
and it solved the problem.
Note: try to "npm start" before you connect the scss to the App, just to see if you can visualize something (like: hello world) in the browser, if everything is fine, create the folder scss with the main.scss inside of it, import it and then try the steps.
My node -v: v16.1.0
What worked for me npm ci
Updating the node version can solve your problem.

Unable to call npm run build using vue-cli in production

Expected Behavior
npm run build should create the production dist bundle that I can serve on a given machine
Current Behavior
Despite being able to build locally, whenever I try to run npm run build on an external resource (such as a Digital Ocean VM or Heroku machine), I receive the below error.
Failure Logs
root#nodejs-lazyq-dev:/var/www/html/Vue# npm run build
> vue-material-dashboard-pro#1.0.0 build /var/www/html/Vue
> vue-cli-service build
⠴ Building for production...
ERROR Failed to compile with 1 errors 09:29:00
error in ./src/assets/scss/_material-dashboard.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
#import "md/plugins/fullCalendar";
^
File to import not found or unreadable: md/plugins/fullCalendar.
in /var/www/html/Vue/src/assets/scss/_material-dashboard.scss (line 59, column 1)
at runLoaders (/var/www/html/Vue/node_modules/webpack/lib/NormalModule.js:286:20)
at /var/www/html/Vue/node_modules/loader-runner/lib/LoaderRunner.js:364:11
at /var/www/html/Vue/node_modules/loader-runner/lib/LoaderRunner.js:230:18
at context.callback (/var/www/html/Vue/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.asyncSassJobQueue.push [as callback] (/var/www/html/Vue/node_modules/sass-loader/lib/loader.js:55:13)
at Object.done [as callback] (/var/www/html/Vue/node_modules/neo-async/async.js:7974:18)
at options.error (/var/www/html/Vue/node_modules/node-sass/lib/index.js:294:32)
# ./src/material-dashboard.js 17:0-48
# ./src/main.js
# multi ./src/main.js
ERROR Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-material-dashboard-pro#1.0.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-material-dashboard-pro#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2018-09-03T09_29_01_030Z-debug.log
Additionally, I have tried running npm rebuild node-sass, updated the material-dashboard.css file to include the underscore: _material-dashboard.css, passing --production in npm install --production, but am having no luck.
nodejs version: v8.11.4
npm version: v5.6.0
I've been trying to solve this for a few hours now but am not having any luck. I don't understand why it works locally but not when on another production machine.
This happens because of a spelling mistake (wrong case) in the import statement of this Vue UI library. The file is named "fullcalendar" while the import is called by "fullCalendar" (notice the capital "C"). When you fix this (make the capital "C" simple in the import statement) it will run the "npm run prod" command successfully. It should be noted that, for me, this did not occur in the windows environment for some reason, but only occurs in the Linux environment.

Categories

Resources