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
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 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
I'm trying to use Jest to aid Puppeteer testing in WebStorm.
It is my first time using Jest and it looks just the framework I need to help with testing, assertions, setup and teardown etc...
Trouble is, WebStorm won't recognise the keywords e.g. beforeAll, describe, afterAll. Here's a snippet:
My package.json file looks like this:
{
"name": "ui-tests",
"version": "1.0.0",
"description": "End-to-end UI tests",
"author": "John Doe",
"license": "MIT",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.0.17"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"debug": "NODE_ENV=debug npm test",
"eject": "react-scripts eject"
},
"jest": {
"testURL": "http://localhost"
},
"devDependencies": {
"faker": "^4.1.0",
"jest-cli": "^22.0.4",
"jest": "^22.0.4",
"puppeteer": "^1.9.0"
}
}
I have the following plugins installed:
Any ideas?
Thanks
I installed "jest" library as it described here:
In Preferences | Languages & Frameworks | JavaScript | Libraries,
press Download..., select 'jest' from the list of available stubs,
press Download and Install
https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000357324-Get-rid-of-Unresolved-function-method-variable-warning-in-Jest-test-files
That helped me with most definitions. Though I still have the same issue with "jest-puppeteer".
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