Environment
I'm working with two frontend projects under the same GitHub repository. Following the guide provided by Vercel about monorepos and taking as an example Vercel's with-zone example, I've structured my project in the same way as in the example.
with-zones/
--platform //This is the main project (know as home in Vercel's guide)
--tools
Both deploys work fine, this means that I can access platform.vercel.com and platform.vercel.com/tools (these URLs are only examples)
The problem
Images are not loading when the URL is different from platform.vercel.app/tools (/tools is the basePath of the second project. No errors are logged in the terminal/browser so I'm stuck at this point. I just see the alt tag in the window.
In short, for the following urls:
platform.vercel.app/tools -> Images are loaded successfully
platform.vercel.app/tools/page1 -> Images are not loaded
Note.
I'm not having this issue with the main project, platform. I'm using .jpg images
Code
tools/next.config.js
module.exports = {
basePath: '/tools',
webpack: (config, options) => {
config.module.rules.push({
test: /\.csv$/,
loader: 'csv-loader',
options: {
dynamicTyping: true,
header: true,
skipEmptyLines: true,
}
})
return config
},
}
Img tag at any page
<img
src='categories/fluids.svg' // categories is in public folder
className={sizes.imgSmall}
/>
tools/package.json
{
...
"dependencies": {
"next": "10.1.3",
"react": "17.0.2",
..
Thank you in advance for your time and answers!
I don't know if this is the best way to solve this problem (probably not), but including the basePath ( /tools in this case) in the src of any image tag solves the problem.
<img
src='/tools/categories/fluids.svg'
className={sizes.imgSmall}
alt='Fluid mechanics icono' />
It works for any page in the tools project's page folder.
Related
So I was working on Login page using next.js as framework.
I did some simple designs using react for some texts but it is not showing on browser. It may be that it is not imported.
I don't see any error on console so I'm having trouble with finding what the problem is.
I can check on the inspector the classnames for these texts so I'm really puzzled why this is not reflected on the browser.
Does anyone know what the problem is or have had the same experience?
Thank you in advance.
the files looks like this:
It is my belief that the problem lies with your Tailwind installation. Kindly verify that Tailwind is installed correctly. On occasion, issues such as this can arise due to an issue with the Tailwind configuration file (tailwind.config.js). If the content routes are not added correctly, it may work in some components but not others.
content: [
"./components/**/*.{js,ts,jsx,tsx}",
"./widgets/**/*.{js,ts,jsx,tsx}",
"./shared/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./hook/**/*.{js,ts,jsx,tsx}",
],
Configure your template paths
Add the paths to all of your template files in your tailwind.config.js file.
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
i try to load the SASS for my Gatsby Project but if I check the source code of the web there isn't any classes from my sass.
I am a bit confused and I followed the documentation of Gatsby.
Nothing worked so my last chance is SO.
// gatsby-config.js
plugins: [
'gatsby-plugin-react-helmet',
'gatsby-plugin-fontawesome-css',
'gatsby-plugin-sass',
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'assets',
path: `${__dirname}/static/`,
},
},
]
Here I import the style.
/**
* Add browser relation logic.
*/
require('./style/global.js');
import './style/sass/index.scss';
I followed the gatsby-plugin-sass documentation and I should be all set. After restarting the server and show source-code of my app there is now class name from my sass file.
Best Regards
Knome
I didn't integrate in any component. Because if I see the Source code
of chrome then there should be scss be loaded.
Ok, well... The SCSS is loaded as it should but the styles are not applied to any component because you've not set any class name.
Just do:
const IndexPage =()=>{
return <div className="grid-container">I'm your index page</div>
}
Like any other HTML element.
How to show images? It can not be shown correctly below.
In the src/components/Header.js file:
<img src="../images/logo.png" style={{width:"112",height:"28"}} />
Importing Assets Directly Into Files
import React from "react"
import logo from "./logo.png" // Tell Webpack this JS file uses this image
console.log(logo) // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />
}
export default Header
The reason this is best is that it enables optimizations through the Webpack bundling pipeline, e.g. compression, data URLs, cache busting filename hashes, etc.
Using the Static folder
This is mostly useful for files other than images.
You can create a folder named static at the root of your project.
Every file you put into that folder will be copied into the public
folder. E.g. if you add a file named sun.jpg to the static folder,
it’ll be copied to public/sun.jpg
You can reference assets from the static folder in your code without
anything special required:
render() {
// Note: this is an escape hatch and should be used sparingly!
// Normally we recommend using `import` for getting asset URLs
// as described in the “Importing Assets Directly Into Files” page.
return <img src={'logo.png'} alt="Logo" />;
}
Corey's answer quotes the "Add custom webpack config" section of the Gatsby documentation, which is useful but unnecessary to load images.
Create a gatsby-node.js file at the root of your project if you don't already have one and add this:
const path = require("path")
exports.onCreateWebpackConfig = ({ stage, actions }) => {
actions.setWebpackConfig({
resolve: {
modules: [path.resolve(__dirname, "src"), "node_modules"],
alias: { react: path.resolve("./node_modules/react") },
},
})
}
This does two things:
It will make src the base for your imports
It will ensure that you don't run into weird bugs due to multiple versions of React getting loaded (plugins that need to reference React can cause this).
In your Header.js file, you can now do this:
import logo from "images/logo.png"
export const Header =>
<header>
<img src={logo} alt="Logo Alt Text" />
</header>
The rendered result of this will actually be different depending on the file size of your logo. If it's small enough, Gatsby will inline it using base64, reducing the number of HTTP requests required to load your page. If it's larger, it will be given an asset fingerprint and added to the assets available when your site is built and the URL to the file will be used for the src attribute (e.g. /images/logo-123asd.png). This will allow you to use HTTP cache headers that tell the browser it's safe to cache this file for a long time; if it changes, the URL will change and you don't need to worry about invalidating the cached version.
I set up the rule in webpack to load png images:
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
That I found here: cannot load png files with webpack, unexpected character
Webpack seems to be working fine, giving no errors. So, I tried loading the png images paths that are located at app_folder/public/images/pca inside the render method:
importAll = (r) => {
return r.keys().map(r);
}
render() {
const pca_images = this.importAll(require.context('../public/images/pca',
false, /\.(png|jpe?g|svg)$/));
console.log('pca_images')
console.log(pca_images)
...
}
When I launch the app I do not see any errors but the pca_images is an empty array. The component itself is located at app_folder/views/. I tried loading the images also directly like that:
<img src={ require('../public/images/image1.png') } />
But whatever path I specify, it is just not working giving an error. I need to load all images from the folder app_folder/public/images/pca though, not just statically since I do not know the names of the images beforehand. Any suggestions would be greatly appreciated.
The solution that worked for me was to add the rule to the webpack.config.js:
{
test: /\.(jpe?g|gif|png|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 10000
}
}
]
}
This rule I found here: ReactJS and images in public folder
Then I needed to run two commands in terminal:
npm install url-loader --save-dev
npm install file-loader --save-dev
And finally loading from the folder (see the question, render method) started working.
I'm code splitting my JavaScript files with React Router and Webpack 2 like this:
export default {
path: '/',
component: Container,
indexRoute: {
getComponent(location, cb) {
if (isAuthenticated()) {
redirect();
} else {
System.import('../landing-page/LandingPage')
.then(loadRoute(cb))
.catch(errorLoading);
}
},
},
childRoutes: [
{
path: 'login',
getComponent(location, cb) {
System.import('../login/Login')
.then(loadRoute(cb))
.catch(errorLoading);
},
},
{ /* etc */
}
};
Which results on this bundle:
public/
vendor.bundle.js
bundle.js
0.bundle.js
1.bundle.js
2.bundle.js
Which means that the final user is getting only the JavaScript that he/she needs, according to the route that he/she is in.
The thing is: for the css part, I'm not finding any resource to do same thing, which is to split the CSS according the user's needs.
Is there a way to do it with Webpack 2 and React Router?
Yes, this can be done. You'll need CommonsChunkPlugin in addition to ExtractTextPlugin. Also, define multiple entry points
entry: {
A: "./a",
B: "./b",
C: "./c",
},
and configure ExtractTextPlugin to use entry point names as CSS file names
new ExtractTextPlugin({
filename: "[name].css"
}),
See a full example here:
https://github.com/webpack/webpack/tree/master/examples/multiple-entry-points-commons-chunk-css-bundle
While I may not answer your question how to split css files so that only the necessary ones are loaded the way you want the question to be answered (no plugin or that sort of thing), I hope to give you a possible alternative.
styled-components use the new ES6 feature tagged template literal to style the components inside the javascript file. I think using this library would solve your problem of loading only the necessary css files, because there would be no more css files per se.
react-boilerplate chose styled-components over sass, because
styled-components have a more powerful approach: instead of trying
to give a styling language programmatic abilities, it pulls logic and
configuration out into JS these features belong.
So using styled-components would not only solve your problem of loading only the necessary css, but it would further add to the decoupling of your application, makes it easier to test the design and reason about your app.
Here's the live demo where you can experiment with the styled-components and check how it works.