I am following the Working with images in markdown posts and pages tutorial for gatsby and installed the following plugins
gatsby-image
gatsby-transformer-sharp
gatsby-plugin-sharp
My images are in the same directory as my Markdown files in src/content. But my posts are still without images. I suspect I have to change something in my src/templates/blog-post.js to show the images but am unsure of the next step. Can someone tell me what changes I need to make?
Github
In order to embed images in markdown you also need gatsby-remark-images. Run yarn add gatsby-remark-images or npm install --save gatsby-remark-images.
Add this to your gatsby-config.js:
"gatsby-plugin-sharp",
"gatsby-transformer-sharp",
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 590,
},
},
],
},
},
Related
I've got a React monorepo (build in TypeScript) and I've recently been switching over from Webpack to Vite. However I'm having real difficult in getting HMR working correctly within Vite (I believe because we separately build our packages).
I'm open to options to get this working (although I think I still need to be able to build my packages, for Jest/ESLint performance).
Project Structure
\apps
\main
\packages
\domainA
\foo
\package.json
\build
\src
At the moment each package gets build using tsc "tsc --project tsconfig.lib.json" into the build directory. The package.json defines the following:
"name": "#ig/foo",
"main": "./build/index.js",
"types": "./build/index.d.ts",
"files": [
"/build"
],
I can spin up the main application and if I make a change in /packages/domainA/foo/src/index.ts then it'll build (currently using a watcher) and I get a full page reload.
I'd like to eliminate the page reload and instead use HMR. I don't think changing the entry point to "main": "./src/index.ts" will work for my use-case due to the slowness in the other tools unfortunately. However I'm happy to try and bypass this and re-point Vite to the source files if necessary.
I've tried all sorts of permutations, having looked at a few sample repos. But not managed to get anything working, e.g.
resolve: {
alias: [{
find: '#ig/foo',
replacement: '../packages/domainA/foo/src/index.ts',
},
}
Here is my current Vite config:
import react from '#vitejs/plugin-react';
import fs from 'fs';
import path, { resolve } from 'path';
import { defineConfig } from 'vite';
import mkcert from 'vite-plugin-mkcert';
import svgrPlugin from 'vite-plugin-svgr';
export default defineConfig({
// optimizeDeps: {
// include: ['#infogrid/solution-views-occupancy'],
// },
build: {
outDir: 'build/public',
sourcemap: true,
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
base: resolve(__dirname, 'index_base.html'),
},
}
},
server: {
port: Number(process.env.PORT),
// setting to true allows external ip
host: true,
},
plugins: [
react({ fastRefresh: true }), // Primarily used for HMR
svgrPlugin({ svgrOptions: { icon: true } }), // Turns svgs into react components
mkcert(), // Allows for HTTPS during local development
]
}
My project use craco to start/build, I wish to integrate tailwind postcss.
I have follow this tutorial https://dev.to/ryandunn/how-to-use-tailwind-with-create-react-app-and-postcss-with-no-hassle-2i09
But as a result, I am suffering with this error:
My config files looks like below:
craco.config.js (this one looks like where problem lies, as I feel like the style may overriding craco style underneath, so it caused above error, but not 100% sure how to resolve this puzzl.)
module.exports = {
style: {
postcss: {
plugins: [
require("tailwindcss")("./tailwind.config.js"),
require("postcss-nested"),
require("autoprefixer"),
],
},
},
postcss.config.js
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss('./tailwind.js'),
require('autoprefixer')
],
};
tailwind.config.js
module.exports = {
purge: ["./src/**/*.html", "./src/**/*.jsx", "./src/**/*.js", "./src/**/*.tx", "./src/**/*.tsx"],
theme: {
extend: {
screens: {
xs: { max: "400px" },
},
},
},
};
I am running the app from
docker-compose up
Any suggestions to fix the error and config?
Please advise with some code example
Thanks in advance
You need to uninstall tailwindcss postcss and autoprefixer. Then re install them with these specific versions
npm install tailwindcss#npm:#tailwindcss/postcss7-compat postcss#^7 autoprefixer#^9
I had the same issue! There is more info in this link. https://tailwindcss.com/docs/installation#post-css-7-compatibility-build
So I am using Next.js API for the backend of my project and Mongodb for the database.
I have to serve images which have been uploaded by users on the runtine. As these files weren't available yet during the build time, they are not recognized as static files which can be stored in public directory.
I have tried next-images, added some configurations in the next.config.js and in my code: <img src={require(../../../images/${picture.src})} alt={picture.legend} />.
But still I have this error:.
I also tried with file-loader but still got no luck.
What did I miss?
Thanks for any reply!
This configuration has worked for me in the past when running into these issues with loading images and/or fonts:
npm install url-loader --save-dev
next.config.js
module.exports = {
webpack: function (config) {
config.module.rules.push({
test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
name: '[name].[ext]',
},
},
});
return config;
},
}
some component like button and panel is working right but some other like rating and fielset not showing completely
i think it's because of missing font-awsome
you can see some rectangle insted of star icon:
npm install primeng --save
npm install primeicons --save
npm install #angular/animations --save
already added BrowserAnimationsModule to app.module
and this lines of code to angular.json
"styles": [
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css",
//...
],
added to import section of target page module:
import {PanelModule} from 'primeng/panel';
finlay in page.html:
<p-rating [(ngModel)]="val"></p-rating>
finlay i found the problem
first stop running ionic project. and then add primeng css after variable.scss and global.scss block like this:
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
},
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css"
],
I added this to the production config:
babelQuery: {
plugins: [["import", { libraryName: "antd", style: true }]],
},
but I'm still getting errors like ReferenceError: Menu is not defined. Am I missing something? Everything works fine locally when I add the same to the dev config so I'm a little confused.
I'm currently having the exact same problem. So I'll add the extra info here.
I too the information from the following page to setup the ant-design kit:
https://ant.design/docs/react/use-with-create-react-app
The webpack.dev.babel contains the following babelQuery and is working fine:
babelQuery: {
presets: ['babel-preset-react-hmre'].map(require.resolve),
plugins: [['import', { libraryName: 'antd', style: true }]],
},
The development environment runs fine.
But, when adding the same plugins configuration to the webpack.prod.babel like this:
babelQuery: {
plugins: [['import', { libraryName: 'antd', style: true }]],
},
I'm getting the error like #userinev when loading the page after running the production build.
Uncaught ReferenceError: Menu is not defined
It's having issues with loading the first component that gets loaded from the antd library.
When removing the plugins configuration from the prod-config, the app is loading, but the styling is missing.
UPDATE:
The dot (.) in Menu.Item is the problem in the production-build.
The workaround is to create an 'alias', like
const Item = Menu.Item;
See: https://github.com/ant-design/ant-design/issues/5060#issuecomment-283339199
Alternatively, you can remove the boilerplate's including on package.json of the babel plugin that causes error:
Delete this:
"plugins": [
"transform-react-inline-elements"
]