i have problem with next js app in server side.
When i build and export my app in production in first i can see dom element and after 2 second i can see my styles. Its look really weird.
I read about problem with css in jsx in next after update framework.
In dev mode all work fine but after build in server side its look weird.
i will show you my page:
http://podnosniki-michalski.pl
and package.json
{
"name": "project_name",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"prod": "next export"
},
"dependencies": {
"next": "9.4.4",
"next-images": "^1.4.0",
"prop-types": "^15.7.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-multi-carousel": "^2.5.5",
"react-reveal": "^1.2.2",
"styled-components": "^5.1.1"
},
"devDependencies": {
"#babel/core": "^7.10.2",
"babel-loader": "^8.1.0",
"babel-plugin-styled-components": "^1.10.7"
}
}
I checked your site, the styles are not rendered on the server side. Because you are using styled-components, follow their guide to generate styles on server-side.
https://styled-components.com/docs/advanced#server-side-rendering
Related
I have taken over a project small Vue. The package.json I have the completeness below with listed. As soon as I save in a change several files are automatically updated. My question is do I need to commit these files as well? I can't estimate what the files do due to my little experience with the project and similar frontend projects. The following files are automatically updated:
.docker/data/node/.config/configstore
.docker/data/node/.config/configstore/update-notifier-#gridsome/cli.json
.docker/data/node/.npm/anonymous-cli-metrics.json
.docker/data/node/-npm/index-v5/34/8e/20cshdsagadfsg....
The changes in most cases are just a new unix-timestamp being replaced. Thanks for your help.
package.json
{
"name": "project-name",
"private": true,
"scripts": {
"build": "gridsome build",
"develop": "gridsome develop",
"explore": "gridsome explore"
},
"dependencies": {
"#gridsome/plugin-google-analytics": "^0.1.0",
"debounce": "^1.2.0",
"gridsome": "^0.7.0",
"mutationobserver-shim": "^0.3.7",
"vee-validate": "^3.3.0",
"vue-mutation-observer": "^0.1.2"
},
"devDependencies": {
"eslint": "^6.8.0",
"eslint-config-airbnb-base": "^14.1.0",
"eslint-plugin-gridsome": "^1.4.11",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-vue": "^6.2.2",
"gridsome-plugin-tailwindcss": "^2.2.48",
"mutation-observer": "^1.0.3",
"vue-eslint-parser": "^7.1.0"
}
}
I need to import some assets from public folder. I can do it easily in html; it wont give an error.
However, I can not do it with css url() method.
I need to do this since react encodes images that are smaller than 10Kb to base 64 and uses that encoded text instead of image path.
As I've read in some articles, this does not benefit performance since css is a render blocking resource and adding to its text, makes parsing it longer.
Here's my folder structure:
My .scss file is inside src/components and this is how i've tried importing the image:
background-image: url("/media_assets/img/footer-xsm.png");
And my package.json:
{
"name": "roomeet",
"version": "0.1.0",
"private": true,
"dependencies": {
"#glidejs/glide": "^3.4.1",
"#loadable/component": "^5.14.1",
"#testing-library/jest-dom": "^5.11.5",
"#testing-library/react": "^11.1.2",
"#testing-library/user-event": "^12.2.2",
"bootstrap": "^4.5.3",
"js-cookie": "^2.2.1",
"node-sass": "^4.14.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-lazyload": "^3.1.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"source-map-explorer": "^2.5.2",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"analyze": "source-map-explorer 'build/static/js/*.js'",
"bundle-report": "webpack-bundle-analyzer --port 4200 dist/stats.json"
},
}
Edit:
This is the error that it's giving:
Error: Can't resolve '../media_assets/img/footer-xsm.png' in 'C:\VSCode Projects\rmt_cln\src\components'
i'm currently unable to comment so i'll have to write it as an answer, can you pleas try
background-image: url("./media_assets/img/footer-xsm.png");
if it didn't work just flag it as unuseful and go check this you'll find a solution there
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
UPDATE It seems the problem is I can't update/edit my post. Every time I create a new post, then it enter dead loop. Please help me T-T
Recently I started a program using keystoneJS as my CMS.
Everything goes fine but this Post problem.
I have found if I install keystone-demo via yo keystone(using the KeystoneJS generator made with Yeoman) then publishing post can work, but if I install keystone manually, the problem comes...
In Google Inspect Console, there is a error-
"TypeError: undefined is not an object (evaluating 'refList.expandColumns')"
I guess it is the keystone version problem.
This is my package.json file
{
"name": "keystone-demo",
"version": "1.0.1",
"private": true,
"repository": {
"type": "git",
"url": "https://github.com/JedWatson/keystone-demo.git"
},
"dependencies": {
"keystone": "https://github.com/keystonejs/keystone.git",
"async": "^1.5.0",
"lodash": "^3.10.1",
"csv": "^0.4.6",
"gulp": "^3.9.1",
"gulp-less": "^3.1.0",
"gulp-shell": "^0.5.2",
"gulp-watch": "^4.3.5",
"pug": "^2.0.0-alpha6"
},
"scripts": {
"start": "node keystone.js"
}
}
And this is the package.json file in that can work normally version
{
"name": "keystone",
"version": "0.0.0",
"private": true,
"dependencies": {
"keystone": "^0.3.16",
"async": "^1.5.0",
"underscore": "^1.8.3",
"node-sass": "^3.3.2",
"node-sass-middleware": "^0.9.7",
"dotenv": "^1.1.0"
},
"devDependencies": {
"gulp": "^3.7.0",
"gulp-jshint": "^1.9.0",
"jshint-stylish": "^0.1.3",
"gulp-shell": "^0.5.0",
"gulp-watch": "^4.3.5",
"gulp-sass": "^2.0.4"
},
"engines": {
"node": ">=0.10.22",
"npm": ">=1.3.14"
},
"scripts": {
"start": "node keystone.js"
},
"main": "keystone.js"
}
You're loading the latest keystone version from github, which is not always stable. This is probably the reason for the error you're seeing.
I recommend using the latest version published to npm (0.3.22 at time of writing) instead.
Update the first line in your dependencies to this, and it will work:
"keystone": "^0.3.22",
To add keystone to a new project you can also type npm install --save keystone