I have a problem when I try to run ng deploy on a recently created Angular project. The version I'm using is 9.1.6 (I just upgraded from 9.1.5, where I got the same error). ng serve works probably.
(base) paul#Pauls-MacBook-Pro must-have % ng deploy
📦 Building "must-have"
Another process, with id 4426, is currently running ngcc.
Waiting up to 250s for it to finish.
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
chunk {0} runtime-es2015.1eba213af0b233498d9d.js (runtime) 1.45 kB [entry] [rendered]
chunk {0} runtime-es5.1eba213af0b233498d9d.js (runtime) 1.45 kB [entry] [rendered]
chunk {2} polyfills-es2015.690002c25ea8557bb4b0.js (polyfills) 36.1 kB [initial] [rendered]
chunk {3} polyfills-es5.9e286f6d9247438cbb02.js (polyfills-es5) 129 kB [initial] [rendered]
chunk {1} main-es2015.658a3e52de1922463b54.js (main) 467 kB [initial] [rendered]
chunk {1} main-es5.658a3e52de1922463b54.js (main) 545 kB [initial] [rendered]
chunk {4} styles.c86817c326e37bf011e3.css (styles) 62 kB [initial] [rendered]
Date: 2020-05-16T16:06:16.041Z - Hash: a4ca944a427d0323601e - Time: 68781ms
Cannot read property 'printf' of undefined
(base) paul#Pauls-MacBook-Pro must-have %
My versions:
Package Version
-----------------------------------------------------------
#angular-devkit/architect 0.900.7
#angular-devkit/build-angular 0.901.6
#angular-devkit/build-optimizer 0.901.6
#angular-devkit/build-webpack 0.901.6
#angular-devkit/core 9.1.6
#angular-devkit/schematics 9.1.6
#angular/cdk 9.2.3
#angular/cli 9.1.6
#angular/fire 6.0.0
#angular/material 9.2.3
#ngtools/webpack 9.1.6
#schematics/angular 9.1.6
#schematics/update 0.901.6
rxjs 6.5.5
typescript 3.8.3
webpack 4.42.0
The fix is available in version 6.0.0-rc.2 of #angular/fire. Upgrade to 6.0.0-rc.2 by
ng add #angular/fire#next
I had this problem and every ng add #angular/fire#next did not help.
I am using angular8, angular fire and firebase hosting. So, I build the project using ng build, and then deployed on firebase hosting using firebase deploy.
Related
The full stack trace here:
https://pastebin.com/4sPgfuee
But a couple snippets:
TypeError: Cannot read properties of null (reading 'useContext')
at Object.exports.useContext (/tmp/build_758b0112/frontend/node_modules/react/cjs/react.production.min.js:24:118)
at Head (/tmp/build_758b0112/frontend/node_modules/next/dist/shared/lib/head.js:202:34)
at Wc (/tmp/build_758b0112/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useContext')
at Object.exports.useContext (/tmp/build_758b0112/frontend/node_modules/react/cjs/react.production.min.js:24:118)
at Head (/tmp/build_758b0112/frontend/node_modules/next/dist/shared/lib/head.js:202:34)
Does anyone know what this error means? I don't use useContext anywhere in my code. I was told it was an issue with the Image and Head tags in Next JS, and so I swapped them for and tags in my code respectively and got the same errors. I removed react-dom as one of my dependencies and it still gives this error. The project works on my local machine no problem. How do I get rid of this error?
Thinking about it a bit more, admittedly, the frontend folder I want to deploy to github isn't in the root of my project. But I found a work around where I have a copy of node_modules/ and my package.json file in the root where the package.json file is identical to the one in my front end except for this small feature:
EDIT: adjusted for full package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"engines": {
"node": "17.x",
"npm": "8.x"
},
"scripts": {
"dev": "next dev",
"build": "cd frontend ; next build",
"start": "next start",
"lint": "next lint"
},
"devDependencies": {
"bulma": "^0.9.4",
"eslint": "8.15.0",
"eslint-config-next": "12.1.6",
"ethers": "^5.6.9",
"fs": "^0.0.1-security",
"next": "^12.2.3",
"react": "^18.2.0",
"solc": "^0.8.15",
"web3": "^1.7.4",
"web3-utils": "^1.7.4"
}
}
Within my scripts section, I inserted the cd frontend command to get to the frontend folder to build the project. Could this have backfired on me?
EDIT: When I run npm run build on my machine from the frontend folder, I get
:frontend$ npm run build
> frontend#0.1.0 build
> next build
info - Loaded env from ~/Project/frontend/.env.local
./pages/ResplendentCard.js
39:22 Warning: Do not use <img>. Use Image from 'next/image' instead. See: https://nextjs.org/docs/messages/no-img-element #next/next/no-img-element
39:22 Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text
info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
info - Linting and checking validity of types
(node:33657) [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (5/5)
info - Finalizing page optimization
Page Size First Load JS
┌ ○ / 5.76 kB 83.3 kB
├ └ css/149b18973e5508c7.css 655 B
├ /_app 0 B 77.6 kB
├ ○ /404 195 B 77.8 kB
├ λ /api/hello 0 B 77.6 kB
├ ○ /resplendent (480 ms) 4.59 kB 875 kB
├ ├ css/0de6f3d7089795f1.css 27.4 kB
├ └ css/0a7d2580efac90af.css 202 B
└ ○ /ResplendentCard (436 ms) 217 B 870 kB
+ First Load JS shared by all 77.6 kB
├ chunks/framework-45405dbdcddf505d.js 45.3 kB
├ chunks/main-43f32a18558cfd50.js 30.9 kB
├ chunks/pages/_app-8027895d08fe9881.js 510 B
├ chunks/webpack-f9a9a24bf6cd9a1b.js 897 B
└ css/179c343107565a9c.css 478 B
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
I assume this means it works. Yet when I run the build command from my root folder:
> frontend#0.1.0 build
> cd frontend ; next build
info - Loaded env from ~Project/frontend/.env.local
./pages/ResplendentCard.js
39:22 Warning: Do not use <img>. Use Image from 'next/image' instead. See: https://nextjs.org/docs/messages/no-img-element #next/next/no-img-element
39:22 Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text
info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
info - Linting and checking validity of types
(node:33746) [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data ...node:internal/process/promises:246
triggerUncaughtException(err, true /* fromPromise */);
^
Error: Cannot find module '../frontend/node_modules/next/dist/shared/lib/constants.js'
Require stack:
- ~Project/frontend/.next/server/pages/_document.js
- ~Project/node_modules/next/dist/server/require.js
- ~Project/node_modules/next/dist/server/load-components.js
- ~Project/node_modules/next/dist/build/utils.js
- ~Project/node_modules/next/dist/build/worker.js
- ~Project/node_modules/next/dist/compiled/jest-worker/processChild.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:999:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.221 (~Project/frontend/.next/server/pages/_document.js:32:18)
at __webpack_require__ (~Project/frontend/.next/server/webpack-runtime.js:25:42)
at Object.105 (~Project/frontend/.next/server/chunks/105.js:375:18)
at __webpack_require__ (~Project/frontend/.next/server/webpack-runtime.js:25:42)
at __webpack_exec__ (~Project/frontend/.next/server/pages/_document.js:70:39)
at ~~Project/frontend/.next/server/pages/_document.js:71:70 {
type: 'Error',
code: 'MODULE_NOT_FOUND',
requireStack: [
'~Project/frontend/.next/server/pages/_document.js',
'~Project/node_modules/next/dist/server/require.js',
'~Project/node_modules/next/dist/server/load-components.js',
'~Project/node_modules/next/dist/build/utils.js',
'~Project/node_modules/next/dist/build/worker.js',
'~Project/node_modules/next/dist/compiled/jest-worker/processChild.js'
]
}
Node.js v17.2.0
I have an issue I'm having trouble to investigate: I have a production compiled server at https://preprod.weally.org/ (through nginx)
I opened the port 3000 to access directly the next server (http://preprod.weally.org:3000/)
My issue is that when I log in, I'm supposed to see a different content than a non logged user. Also editing an article should show the updated article immediately to all other users.
I noticed the returned page is correct only for its first display, it then always returns the same for any browser session: (refresh occurs only when I restart the server).
After incriminating nginx of caching for hours, I realized it was Next.js that was not calling the endpoint /api/graphql, but getting its content from cache.
My next.config.js is supposed to avoid caching (you can see the build output saying /api/graphql is server side rendered)
Note: when I run the server in dev mode (yarn dev), everything works as expected
const { i18n } = require('./next-i18next.config');
module.exports = {
i18n,
generateEtags: false,
compress: false,
};
My question is: "what is the next step in my investigation?". I'm not feeling comfortable to debug the build process of next.js
Here's the "yarn build" output:
Page Size First Load JS
┌ λ / 3.46 kB 288 kB
├ /_app 0 B 167 kB
├ ○ /404 195 B 167 kB
├ ○ /about (1049 ms) 1.69 kB 169 kB
├ λ /api/auth/[...nextauth] 0 B 167 kB
├ λ /api/auth/callback/ignore-facebook 0 B 167 kB
├ λ /api/graphql 0 B 167 kB
├ λ /api/rest/[...restEndpoint] 0 B 167 kB
├ λ /business/[businessId]/detail 10.2 kB 295 kB
├ ○ /legal/data_deletion (2485 ms) 2.06 kB 169 kB
├ ○ /legal/privacy_policy (2510 ms) 8.6 kB 176 kB
├ ○ /legal/terms (2478 ms) 14.8 kB 182 kB
├ λ /request/[issueId]/detail 608 B 285 kB
├ λ /request/[issueId]/edit 46.5 kB 284 kB
├ ○ /signin (1143 ms) 1.94 kB 172 kB
├ ○ /signout (1111 ms) 2.46 kB 169 kB
└ ○ /signup (1094 ms) 1.73 kB 172 kB
+ First Load JS shared by all 167 kB
├ chunks/framework.3af989.js 42.6 kB
├ chunks/main.fa7488.js 24.5 kB
├ chunks/pages/_app.f19732.js 98.1 kB
├ chunks/webpack.32a7fa.js 1.72 kB
└ css/5d6d9ddf7d6a4cfee084.css 1.56 kB
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
(ISR) incremental static regeneration (uses revalidate in getStaticProps)
I'm trying to get the automatic tree-shaking functionality provided by the Nuxt.js / Vuetify module working. In my nuxt.config.js I have:
buildModules: [
['#nuxtjs/vuetify', {treeShake: true}]
],
However, I'm only using one or two components at the moment, but I'm still getting a very large vendor.app (adding the treeshake option had no effect on size)
Hash: 9ab07d7e13cc875194be
Version: webpack 4.41.2
Time: 18845ms
Built at: 12/10/2019 11:04:48 AM
Asset Size Chunks Chunk Names
../server/client.manifest.json 12.2 KiB [emitted]
5384010d9cdd9c2188ab.js 155 KiB 1 [emitted] [immutable] commons.app
706a50a7b04fc7741c9f.js 2.35 KiB 4 [emitted] [immutable] runtime
8d5a3837a62a2930b94f.js 34.7 KiB 0 [emitted] [immutable] app
9d5a4d22f4d1df95d7a7.js 1.95 KiB 3 [emitted] [immutable] pages/login
LICENSES 389 bytes [emitted]
a0699603e56c5e67b811.js 170 KiB 6 [emitted] [immutable] vendors.pages/login
b1019b7a0578a5af9559.js 265 KiB 5 [emitted] [immutable] [big] vendors.app
b327d22dbda68a34a081.js 3.04 KiB 2 [emitted] [immutable] pages/index
+ 1 hidden asset
Entrypoint app = 706a50a7b04fc7741c9f.js 5384010d9cdd9c2188ab.js b1019b7a0578a5af9559.js 8d5a3837a62a2930b94f.js
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
b1019b7a0578a5af9559.js (265 KiB)
ℹ Generating pages 11:04:48
✔ Generated / 11:04:48
✔ Generated /login
Notice the line indicating the large vendors.app
Notice: b1019b7a0578a5af9559.js 265 KiB 5 [emitted] [immutable] [big] vendors.app
Can you please advise?
My mistake, the above configuration is working correctly. The real issue is the file size of the CSS being included (for all components) included in the build.
For people suffering from the same problem, adding build: {analyze:true} to nuxt.config.js shows where the problem files are (automatically opens in a browser window when running npm run build).
Clearly main.sass is the issue here. I will ask the question of how to get Nuxt/Webpack to only use CSS modules for relevant components in another question. The article here only shows how to do it with the CLI, not Nuxt.
Edit: I've now added the extractCSS:true property to my Nuxt config and the file size is reduced to a few kb..
build: {
analyze:true,
extractCSS: true
}
I am trying to build/deploy an angular app everytime I push my code to github. The travis CI build passes but it doesn't deploy to Surge for some reason. I added SURGE_LOGIN and SURGE_TOKEN environment variables to the repository settings but it still doesn't work. Should it not mention that deployment failed in the build log? Any idea what is going wrong here/how I can fix this? Also I don't get emails when a build passes/fails even though this is set in the config file and my email address i added to the SURGE_LOGIN environment variable
the end of my travis build log:
42.29s$ ng build -prod
1439
Date: 2017-11-02T11:04:25.130Z
1440
Hash: 5dadab3e49327d48aac1
1441
Time: 38060ms
1442
chunk {0} polyfills.d8d3d78a4deb2ab66856.bundle.js (polyfills) 66.1 kB {4} [initial] [rendered]
1443
chunk {1} styles.4d93494871bdc47b353f.bundle.css (styles) 115 kB {4} [initial] [rendered]
1444
chunk {2} main.725afabe80d80f10fd14.bundle.js (main) 8.08 kB {3} [initial] [rendered]
1445
chunk {3} vendor.4400ceca3ce00f041a26.bundle.js (vendor) 434 kB [initial] [rendered]
1446
chunk {4} inline.fe3295955bbd9314430c.bundle.js (inline) 1.45 kB [entry] [rendered]
1447
1448
1449
The command "ng build -prod" exited with 0.
1450
1451
Done. Your build exited with 0.
my .travis.yml code:
#travis CI build configuration
#build language
language: node_js
#node_js versions
node_js:
- "6.11.2"
#before running the build
before-script:
- npm install #install all dependencies
- npm install -g surge #global surge install
#actual build step
script:
- ng build -prod
#build only on push not on pull requests.
deploy:
provider: surge
skip_cleanup: true
project: ./dist/ #build output path
domain: gaping-feeling.surge.sh #surge domain
#notifications
notifications:
email:
on_success: change #default: change
on_failure: change #default: change
Your issue is the yaml indentation. Yaml is indentation specific. So
a:
b:
and
a:
b:
They both have different meaning. In first a and b are top level attributes which in later case b is a child attribute of a. Your yaml should be
#travis CI build configuration
#build language
language: node_js
#node_js versions
node_js:
- "6.11.2"
#before running the build
before-script:
- npm install #install all dependencies
- npm install -g surge #global surge install
#actual build step
script:
- ng build -prod
#build only on push not on pull requests.
deploy:
provider: surge
skip_cleanup: true
project: ./dist/ #build output path
domain: gaping-feeling.surge.sh #surge domain
notifications:
email:
on_success: change
on_failure: change
If you still face issues let me know. But this should fix the problem
I have the following setup:
Joomla! 3.2.2, Bootstrap 3.1 with LESS.
I tested my page loading time and got a bad result, mainly because of LESS.
The loading time overall was 7.96s. The waiting for bootstrap/LESS variables was 5.3s!!!
It loads all the bootstrap variables:
template.less ~.com/templates/c~/less/ 9.1 kB
bootstrap.less 1.3 kB
variables.less 19.6 kB
mixins.less 24.2 kB
normalize.less 7.4 kB
print.less 1.9 kB
scaffolding.less 2.1 kB
type.less 5.3 kB
code.less 1.3 kB
grid.less 2. kB
tables.less 4.5 kB
forms.less 9.2 kB
buttons.less 3.7 kB
component-animations.less 786 B
glyphicons.less 14.8 kB
dropdowns.less 4. kB
button-groups.less 5.1 kB
input-groups.less 3.5 kB
navs.less 5.1 kB
navbar.less 13.8 kB
breadcrumbs.less 817 B
pagination.less 2.1 kB
pager.less 1.1 kB
labels.less 1.3 kB
badges.less 1.3 kB
jumbotron.less 1.2 kB
thumbnails.less 1. kB
alerts.less 1.7 kB
progress-bars.less 1.8 kB
media.less 1.1 kB
list-group.less 2.1 kB
panels.less 4.2 kB
wells.less 812 B
close.less 96 B
modals.less 3.3 kB
tooltip.less 2.8 kB
popovers.less 3.5 kB
carousel.less 4.8 kB
utilities.less 1. kB
responsive-utilities.less 5. kB
That's fine by me. I won't even comment out many to perform better, becasue I need most of them.
But is there a way to raise the speed of page load in any kind of way?
It's basically not the rendering of the styles but the waiting time for server actions for loading the variables that let it take long. pingdom.com: "The web browser is waiting for data from the server".
If you are concerned about performance, you want to compile the less files and upload the resulting CSS to the server. Compiling on the server is convenient for development but not such a great idea in production.