karlhorky
commented
3 years ago Gatsby's migration guide from v3 to v4: https://v4.gatsbyjs.com/docs/reference/release-notes/migrating-from-v3-to-v4/
Closed karlhorky closed 2 years ago
karlhorky
commented
3 years ago Gatsby's migration guide from v3 to v4: https://v4.gatsbyjs.com/docs/reference/release-notes/migrating-from-v3-to-v4/
akabekobeko
commented
3 years ago @karlhorky gatsby-remark-copy-relative-linked-files v1.4.0 does not support GatsbyJS v4. However, I also use GatsbyJS and this plugin, so I will consider support by referring to the migration guide.
It will be supported as gatsby-remark-copy-relative-linked-files v1.5.0.
karlhorky
commented
3 years ago Great, thanks!
akabekobeko
commented
3 years ago This issue seems to be due to GatsbyJS v4 now ignoring the main entry in package.json.
When moved node_modules/gatsby-remark-copy-relative-linked-files/dist/index.js and pluguin.js to the parent of dist/, that is, the root of the plugin npm, it loaded successfully.
The main entry in package.json is officially set as npm. It also worked with GatsbyJS v3. But in v4 it seems to be ignored.
This is an obvious bug and will probably be fixed as GatsbyJS v4. The only way to deal with it without waiting for a fix would be to put index.js in the root.
karlhorky
commented
3 years ago Nice, great research @akabekobeko ! Then let's see if the Gatsby team answers this issue soon?
akabekobeko
commented
3 years ago @karlhorky
Yes. However, if this is a specification or is not answered for a long time (several weeks), dist/index.js may be changed to index.js.
karlhorky
commented
3 years ago Nice, sounds good.
I guess for now, one workaround would be to patch the package using something like patch-package to add an index.js file... maybe I'll try this out to see if anything else breaks with Gatsby v4.
karlhorky
commented
3 years ago Seems like they have fixed this! https://github.com/gatsbyjs/gatsby/pull/33900
I asked whether it will be a part of gatsby@4.1.2 https://github.com/gatsbyjs/gatsby/pull/33900#issuecomment-963993348
Edit: They confirmed this will be in 4.1.2 🙌
Edit 2: 4.1.2 has been released, testing now...
karlhorky
commented
3 years ago I no longer receive the same error with gatsby@4.1.2, closing this issue! 🙌
karlhorky
commented
2 years ago Hm, seems like I spoke too soon!
The following Markdown content no longer works under gatsby@4.4.0:
<video
src="array-map.mp4"
controls
style={{
minWidth: 480,
maxWidth: '70%',
margin: '0 auto 1.45em',
display: 'block',
}}
/>It doesn't change the path now:
karlhorky
commented
2 years ago The relevant parts of my Gatsby config (using gatsby-plugin-mdx):
module.exports = {
flags: {
DEV_SSR: true,
},
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
// We need to hook up `src/pages` to `gatsby-source-filesystem` so that
// `gatsby-remark-images` can process the MDX files and copy files.
resolve: 'gatsby-source-filesystem',
options: {
name: 'pages',
path: `${__dirname}/src/pages`,
},
},
{
resolve: `gatsby-plugin-mdx`,
options: {
defaultLayouts: {
pages: require.resolve('./src/components/Layout.tsx'),
},
remarkPlugins: [
require('remark-external-links').default,
],
rehypePlugins: [
require('rehype-slug').default,
[require('rehype-autolink-headings').default, { behavior: 'wrap' }],
],
// Work around mdx-remark plugin compat issue
// https://github.com/gatsbyjs/gatsby/issues/15486
plugins: [
`gatsby-remark-images`,
`gatsby-remark-images-medium-zoom`,
],
gatsbyRemarkPlugins: [
{
resolve: 'gatsby-remark-images',
options: {
maxWidth: 921,
linkImagesToOriginal: false,
},
},
{
resolve: `gatsby-remark-images-medium-zoom`,
options: {},
},
{
resolve: 'gatsby-remark-copy-relative-linked-files',
options: {
filename: ({ name, hash, extension }) =>
`${name}-${hash}.${extension}`,
},
},
],
},
},
],
};Wonder if it has to do with this point from the migration guide:
Before v4 you could do something like this, and it was working:
exports.sourceNodes = ({ actions }) => { const node = { /* */ } actions.createNode(node) // somewhere else: node.image___NODE = `uuid-of-some-other-node` }Gatsby provides several actions available in sourceNodes and onCreateNode APIs to use instead:
- createNode
- deleteNode
- createNodeField
Specifically, this mutation that's going on with the nodes:
karlhorky
commented
2 years ago Seems like this was caused by #29, since TypeScript compiles export default to exports.default =, instead of module.exports =, which Gatsby needs.
Opened #37 to fix this.
BeomKiNa
commented
2 years ago Hello. I think I have the same problem. I also use MDX. It worked fine on Gatsby v3, but after updating to v4 I noticed that the image was missing in the build output. I am wondering how I can solve this problem. Is there anything I've missed? Here is the relevant part of my gatsby-config.js file. (It worked for Gatsby v3.)
module.exports = {
// ...
plugins: [
// ...
{
resolve: "gatsby-transformer-remark",
options: {
plugins: [
{
resolve: `gatsby-remark-autolink-headers`,
options: {
offsetY: `100`,
icon: `<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>`,
},
},
],
},
},
{
resolve: "gatsby-plugin-mdx",
options: {
extensions: [`.mdx`, `.md`],
gatsbyRemarkPlugins: [
`gatsby-remark-autolink-headers`,
{
resolve: "gatsby-remark-copy-relative-linked-files",
options: {
ignoreFileExtensions: [".md", ".pdf", ".d.ts"],
filename: ({ hash, name, extension }) =>
`${name}-${hash}.${extension}`,
},
},
],
},
},
{
resolve: "gatsby-source-filesystem",
options: {
name: "images",
path: "./src/images/",
},
__key: "images",
},
{
resolve: "gatsby-source-filesystem",
options: {
name: "pages",
path: "./src/pages/",
},
__key: "pages",
},
{
resolve: "gatsby-source-filesystem",
options: {
name: "posts",
path: "./src/contents/",
},
__key: "posts",
},
// ...
],
};I'm not an English speaker, so I used a translator. I hope my words are not strange. XD
karlhorky
commented
2 years ago @NaBeomKi take a look at the following PR, I fixed it here: https://github.com/akabekobeko/npm-gatsby-remark-copy-relative-linked-files/pull/37
If you want to apply this fix to your project without waiting for this PR to be merged, then you can use patch-package:
npm install patch-packagenode_modules/gatsby-remark-copy-relative-linked-files/dist/index.js as follows:
-exports.default = plugin
+module.exports = pluginnpx patch-package gatsby-remark-copy-relative-linked-filespackage.json, so that patch-package runs every time you run npm install
"scripts": {
+ "postinstall": "patch-package"
}@karlhorky WOW! I found patch-package thanks to you. Thank you so much for the detailed explanation. I'll try this soon. Thanks again for the kind and detailed explanation!
karlhorky
commented
2 years ago Glad to help! I realize that I had a small error above, it's now fixed. Best of luck getting it working!
Hi @akabekobeko ! 👋 Hope you are well.
If I try upgrading to Gatsby v4, it seems like it cannot find the plugin:
Do you have plans to support Gatsby v4?