I'm using "gatsby-plugin-sitemap": "^2.4.2" tho, it doesn't work after install "gatsby-plugin-intl": "^0.3.3" on Amplify even tho it works on Local env well.
This is the URL, but automatically it's moved to https://www.babylook.mom/.
https://www.babylook.mom/sitemap.xml
Below is the gatsby-config.js
{
resolve: `gatsby-plugin-sitemap`,
options: {
output: `/sitemap.xml`,
}
},
{
resolve: `gatsby-plugin-intl`,
options: {
path: `${__dirname}/src/intl`,
languages: [`en`, `es`, `zh`],
defaultLanguage: `en`,
redirect: false,
},
},
The plugin's order is important in Gatsby, try putting the gatsby-plugin-intl above since it's the one in charge of prefix all the URLs with the provided locales:
{
resolve: `gatsby-plugin-intl`,
options: {
path: `${__dirname}/src/intl`,
languages: [`en`, `es`, `zh`],
defaultLanguage: `en`,
redirect: false,
},
},
{
resolve: `gatsby-plugin-sitemap`,
options: {
output: `/sitemap.xml`,
}
},
In addition, you may want to explore all the query options that the gatsby-plugin-sitemap provides.
Related
So I'm using vite to build my Vue 3 application for a legacy website which still uses jQuery and a few other JS frameworks.
I'm using the esm bundler as I would still like to boot it up and use it with slotted components.
<div id="app">
<vue-component-name></vue-component-name>
</div>
And it works perfectly. But when jQuery is used on the page, no where near my components it seems the esm bundled version of Vue has set a global variable named $ which breaks jQuery.
Has anyone had this issue or know of a way to fix it?
import { defineConfig } from 'vite';
import type { UserConfig as VitestUserConfigInterface } from 'vitest/config';
import svgLoader from 'vite-svg-loader';
import vue from '#vitejs/plugin-vue';
import path from 'path';
const vitestConfig : VitestUserConfigInterface = {
test: {
globals: true,
include: ['./tests/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
},
};
export default defineConfig({
test: vitestConfig.test,
plugins: [vue(), svgLoader()],
base: '/',
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
'#': path.resolve(__dirname, '/src'),
},
},
build: {
outDir: '../wwwroot/dist',
emptyOutDir: true,
manifest: true,
rollupOptions: {
input: {
main: './src/main.ts',
},
output: {
entryFileNames: 'assets/js/[name].js',
chunkFileNames: 'assets/js/[name].js',
assetFileNames: ({ name }) => {
if (/\.(gif|jpe?g|png|svg)$/.test(name ?? '')) {
return 'assets/images/[name][extname]';
}
if ((name ?? '').endsWith('.css')) {
return 'assets/css/[name][extname]';
}
return 'assets/[name][extname]';
},
globals: {
vue: 'Vue',
},
},
},
},
server: {
hmr: {
protocol: 'ws',
},
},
});
EDIT:
More information, I've tracked this down to using
#input="handleInput($event.target, index)"
This right here breaks existing jQuery. Still no idea how to get around it
For anyone interested, How to wrap Vite build in IIFE and still have all the dependencies bundled into a single file?
I'm getting this build error with vite and sveltekit using adapter-node
I'm not sure why it won't build since it relies on node to server the client.
dev works fine
'Buffer' is not exported by __vite-browser-external:buffer
I tried polyfills but they don't work.
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: 'globalThis'
},
// Enable esbuild polyfill plugins
plugins: [
NodeGlobalsPolyfillPlugin({
process: true,
buffer: true,
webworkers: true,
}),
NodeModulesPolyfillPlugin()
]
}
},
build: {
minify: true,
rollupOptions: {
plugins: [
// Enable rollup polyfills plugin
// used during production bundling
rollupNodePolyFill()
]
}
}
I solved it by adding the right aliases (including buffer and process) to config.vite.ts. That's how mine looks like:
import { defineConfig } from "vite";
import react from "#vitejs/plugin-react";
import tsconfigPaths from 'vite-tsconfig-paths'
import { NodeGlobalsPolyfillPlugin } from '#esbuild-plugins/node-globals-polyfill'
import { NodeModulesPolyfillPlugin } from '#esbuild-plugins/node-modules-polyfill'
import rollupNodePolyFill from 'rollup-plugin-node-polyfills'
export default defineConfig({
plugins: [react(), tsconfigPaths()],
server: {
port: 3001,
open: true
},
resolve: {
alias: {
// This Rollup aliases are extracted from #esbuild-plugins/node-modules-polyfill,
// see https://github.com/remorses/esbuild-plugins/blob/master/node-modules-polyfill/src/polyfills.ts
util: 'rollup-plugin-node-polyfills/polyfills/util',
sys: 'util',
events: 'rollup-plugin-node-polyfills/polyfills/events',
stream: 'rollup-plugin-node-polyfills/polyfills/stream',
path: 'rollup-plugin-node-polyfills/polyfills/path',
querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
punycode: 'rollup-plugin-node-polyfills/polyfills/punycode',
url: 'rollup-plugin-node-polyfills/polyfills/url',
string_decoder:
'rollup-plugin-node-polyfills/polyfills/string-decoder',
http: 'rollup-plugin-node-polyfills/polyfills/http',
https: 'rollup-plugin-node-polyfills/polyfills/http',
os: 'rollup-plugin-node-polyfills/polyfills/os',
assert: 'rollup-plugin-node-polyfills/polyfills/assert',
constants: 'rollup-plugin-node-polyfills/polyfills/constants',
_stream_duplex:
'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
_stream_passthrough:
'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
_stream_readable:
'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
_stream_writable:
'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
_stream_transform:
'rollup-plugin-node-polyfills/polyfills/readable-stream/transform',
timers: 'rollup-plugin-node-polyfills/polyfills/timers',
console: 'rollup-plugin-node-polyfills/polyfills/console',
vm: 'rollup-plugin-node-polyfills/polyfills/vm',
zlib: 'rollup-plugin-node-polyfills/polyfills/zlib',
tty: 'rollup-plugin-node-polyfills/polyfills/tty',
domain: 'rollup-plugin-node-polyfills/polyfills/domain',
buffer: 'rollup-plugin-node-polyfills/polyfills/buffer-es6',
process: 'rollup-plugin-node-polyfills/polyfills/process-es6'
}
},
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: 'globalThis'
},
// Enable esbuild polyfill plugins
plugins: [
NodeGlobalsPolyfillPlugin({
process: true,
buffer: true
}),
NodeModulesPolyfillPlugin()
]
}
},
build: {
rollupOptions: {
plugins: [
// Enable rollup polyfills plugin
// used during production bundling
// #ts-ignore
rollupNodePolyFill(),
]
}
}
})
build: {
rollupOptions: {
plugins: [inject({ Buffer: ['Buffer', 'Buffer'] })],
},
},
This works with npm i -D buffer
there's some way to make fluid an image imported in a .mdx file?
I have a Gatsby site base on mdx file post, I install gatsby-remark-image-attributes and gatsby-remark-images.
{
resolve: `gatsby-plugin-mdx`,
options: {
defaultLayouts: {
posts: require.resolve("./src/templates/blog-post.js"),
default: require.resolve("./src/components/layout.js"),
},
extensions: [`.mdx`, `.md`],
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 966,
withWebp: true,
},
},
{
resolve: `gatsby-remark-image-attributes`,
options: {
styleAttributes: true,
dataAttributes: false
},
},
{
resolve: `gatsby-remark-highlight-code`,
},
]
},
The style seems to work, but the images I pass in my mdx files aren't fluid at all.
Anyone knows if it is possible to have fluid images in mdx file?
What about adding something like:
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 800,
wrapperStyle: fluidResult => `flex:${_.round(fluidResult.aspectRatio, 2)};`,
},
}
Credits: gatsby-remark-images docs
Disclaimer: _ stands for lodash dependency. As you can see in the package.json (line 15) it's a dependency of the gatsby-remark-images. I would not recommend installing a huge library as lodash is only for this utility since it will increase your bundle size. You can achieve the same result as _.round using some vanilla JavaScript approach but as testing purposes may be interesting to try lodash to know if with this approach you are able to create a fluid wrapper.
I am getting the error reported on this issue: https://github.com/gatsbyjs/gatsby/issues/25920
But the people from Gatsby seems to be too busy to answer so maybe someone else here knows about this problem.
Have in mind that I am not using the StaticQuery component at all on my code.
I am getting this exact same issue.
I noticed some other devs before having it: https://github.com/gatsbyjs/gatsby/issues/6350
I saw that some devs recommend removing the export from the query variable, so this:
const query = graphql`...`
Instead of this:
export const query = graphql`...`
But this is not my case. Everything was working good until some hours ago.
I have all of my pages with queries like this:
// this is my component
const CollectionProduct = ({ data }) => {...}
// and outside the component is the query
export const query = graphql`
query($handle: String!) {
shopifyCollection(handle: { eq: $handle }) {
products {
id
title
handle
createdAt
}
}
}
}
`
In that component I am using export on const query, all of my pages are defined the same way and before there were no problems. I already upgrade and downgrade the version of Gatsby and yet the same issue.
My issues comes exactly after I added a .eslintrc.js config file to the project; is this an option that my project build fails on the live site due to ESLint?
Locally it works, I can build the project and see it on my localhost with no problems. But when I see the live site, it throws that Loading(StaticQuery) white screen. And I am not even using StaticQuery component anywhere. Only the useStaticQuery hook on non page nor templates components.
This is my ESLint config:
module.exports = {
globals: {
__PATH_PREFIX__: true,
},
'parser': 'babel-eslint',
parserOptions: {
extraFileExtensions: ['.js'],
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
useJSXTextNode: true,
include: ['**/*js'],
},
env: {
es6: true,
node: true,
jest: true,
browser: true,
commonjs: true,
serviceworker: true,
},
extends: ['eslint:recommended', 'plugin:react/recommended', 'semistandard', 'plugin:import/react'],
plugins: ['react'],
rules: {
semi: 'off',
'strict': 0,
curly: [1, 'all'],
'no-console': 'error',
"react/prop-types": 0,
camelcase: ['off', {}],
'react/jsx-uses-vars': 1,
'react/jsx-uses-react': 1,
'react/jsx-boolean-value': 2,
"react/display-name": 'warn',
'react/react-in-jsx-scope': 1,
'brace-style': ['error', '1tbs'],
'comma-dangle': ['error', 'never'],
'linebreak-style': ['error', 'unix'],
'react-hooks/exhaustive-deps': 'off',
'standard/no-callback-literal': [0, []],
'padding-line-between-statements': [
'error',
{ blankLine: 'always', prev: '*', next: 'return' },
{ blankLine: 'always', prev: '*', next: 'multiline-const' },
{ blankLine: 'always', prev: 'multiline-const', next: '*' },
{ blankLine: 'always', prev: '*', next: 'block-like' },
{ blankLine: 'always', prev: 'block-like', next: '*' },
],
'react/jsx-curly-brace-presence': [
'error',
{ props: 'never', children: 'never' },
],
},
};
Any ideas?
Delete cache storage from the browser and reload the page. Or Hard Reload the page and see, This resolved the issue for me.
I had a similar issue which happened all of a sudden. Someone on https://github.com/gatsbyjs/gatsby/issues/24890 suggested to try to clean your project.
For me deleting both node_modules and yarn.lock to then regenerate them did the trick!
EDIT: This seems to have been fixed with gatsby 2.24.11
Updating the cli withnpm i -g gatsby-cli solved this problem for me
my problem is as following; I'm using grunt-include-source (https://www.npmjs.com/package/grunt-include-source) to include my scripts and css to my index.html, this is working fine but I can only specify one basepath, and i would like to setup this plugin for both dev and production. (im using the same folder structure so nothing will change in my index.html, the only difference is that in concatenate in my production)
includeSource: {
options: {
basePath: 'dev'
},
myTarget: {
files: {
'dev/index.html': 'app/index.html'
}
}
},
Code above is working fine, now i want to have 2 different configuration, but something like this doesn't work when running the task includeSource:dev:
includeSource: {
dev: {
options: {
basePath: 'dev'
},
myTarget: {
files: {
'dev/index.html': 'app/index.html'
}
}
},
prod: {
options: {
basePath: 'prod'
},
myTarget: {
files: {
'prod/index.html': 'app/index.html'
}
}
}
},
index.html:
<!-- include: "type": "js", "files": "scripts/*.js" -->
Anyone could help me out how I would able to achieve this?
edit: Just to be a bit more clear, im running this script after my builds for either production or development is done, for both my prod/dev all scripts are stored in scripts/
Kind regards,
G
Just configure your task like this instead:
includeSource: {
options: {
basePath: 'dev/'
},
dev: {
files: {
'dev/index.html': 'app/index.html'
}
},
prod: {
options: {
basePath: 'dist/'
},
files: {
'dist/index.html': 'app/index.html'
}
}
},