andrewbranch/gatsby-remark-vscode

v2 alpha: extension issues

Closed this issue · 10 comments

janosh commented

Hey @andrewbranch, great progress you've been making on v2! Really excited to see this!

Just installed the alpha, tried to convert my extensions to node_modules and attempted gatsby build. I got

  TypeError: Cannot read property 'map' of undefined
  
  - createNodeRegistry.js:55 Object.getAllPossibleThemes
    [gatsby-remark-vscode]/src/createNode    Registry.js:55:40
  
  - index.js:196 textmateHighlight
    /[gatsby-remark-vscode]/src/index.js:1    96:45

Not sure if this is the same bug as #68.

I only "tried to replace my extensions" above because one of them wouldn't install. I use:

  1. MDX
  2. vscode-styled-components

yarn add silvenon/vscode-mdx worked fine. But yarn add styled-components/vscode-styled-components failed with

Error: Cannot find module './node_modules/vscode-styled-components/node_modules/vscode/bin/install'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)
    at Function.Module._load (internal/modules/cjs/loader.js:690:27)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
    at internal/main/run_main_module.js:17:11 {
  code: 'MODULE_NOT_FOUND',

Wasn't able to troubleshoot this so far. In any case, this has nothing to do with GRV but maybe it's a restriction to this way of adding extensions? If so, it might apply to more than one repo in which case it should be noted in the migration guide.

So as a workaround I downloaded the VSIX file for vscode-styled-components and added

{
    resolve: `gatsby-remark-vscode`,
    options: {
      extensions: [
        `mdx`,
        `./src/utils/jpoissonnier.vscode-styled-components-0.0.27.vsix`,
      ],
    },
  },

to my gatsby-config.js. That threw

Error: Invalid option 'extensions': Extension paths must be absolute. Received './src/utils/jpoissonni er.vscode-styled-components-0.0.27.vsix'.

even though the current version of the migration guide says both relative and absolute paths should work.

So I pasted the absolute path and now I'm getting the above mentioned TypeError: Cannot read property 'map' of undefined. Any way to proceed here?

andrewbranch commented

But yarn add styled-components/vscode-styled-components failed

Fixed at styled-components/vscode-styled-components#203 (hopefully someone merges)

even though the current version of the migration guide says both relative and absolute paths should work

Ah yeah, that was my intention, but I actually couldn’t find anything that Gatsby was passing me that would give me the location of the origin gatsby-config.js ☹️. I forgot to update the migration guide after realizing that, but I also want to poke around the Gatsby Discourse or issue tracker to see if anyone knows something I don’t.

So I pasted the absolute path and now I'm getting the above mentioned TypeError: Cannot read property 'map' of undefined. Any way to proceed here?

From that stack I have a guess. I think the issue is probably triggered by processing a markdown document that has no code blocks on it. I just did a YOLO commit, so a new alpha should be published momentarily if you want to try it out.

Thanks for the early feedback! Great catch!

  • 👍1
  • 🎉1
janosh commented

Nice! Everything back to working now! My custom styles were gone but since the migration guide already has a helpful section on this that was a breeze to fix.

Btw, great solution to have extensions installed as node modules rather than manually downloading them. Like you said, it puts your dependencies where they really belong: into node_modules where they are version-locked and CI-friendly.

Also, thanks for opening vscode-styled-components#203! I tried fiddling around with the scripts section in their package.json myself during troubleshooting but didn't really know what I was doing.

One more possible bug. It might be that extensions downloaded as VSIX are not actually used. At least, this is what I'm seeing with the alpha

without-syntax-highlighting

and this is how it's supposed to look

with-syntax-highlighting

So either I'm doing something wrong or the absolute import of vscode-styled-components has no effect.

  {
    resolve: `gatsby-remark-vscode`,
    options: {
      extensions: [
        `mdx`,
        `/Users/janosh/Projects/janosh.io/src/utils/jpoissonnier.vscode-styled-components-0.0.27.vsix`,
      ],
    },
  },

The yarn-installed MDX extension is definitely working.

andrewbranch commented

Interesting. Can you try setting logLevel: "info" and seeing if any clues appear?

janosh commented

Actually, it has nothing to do with the way the extension is imported. Just successfully installed yarn add styled-components/vscode-styled-components and replaced the absolute VSIX import with the node module. Same problem, no styled components highlighting, so the issue is probably a little deeper than the import.

Adding logLevel: "info" to the GRVSC options, I got:

Logs without `vscode-styled-components` 
info Registering grammar 'text.html.markdown.jsx' from
info No language file was loaded for scope 'source.scala'
info No language file was loaded for scope 'source.scala'
info No language file was loaded for scope 'source.scala'
info No language file was loaded for scope 'source.scala'
info No language file was loaded for scope 'source.scala'
info No language file was loaded for scope 'source.scala'
info No language file was loaded for scope 'source.scala'
info No language file was loaded for scope 'source.scala'
info No language file was loaded for scope 'source.dart'
info No language file was loaded for scope 'source.dart'
info No language file was loaded for scope 'source.dart'
info No language file was loaded for scope 'source.dart'
info No language file was loaded for scope 'source.dart'
info No language file was loaded for scope 'source.dart'
info No language file was loaded for scope 'source.dart'
info No language file was loaded for scope 'source.dart'
info No language file was loaded for scope
info No language file was loaded for scope 'source.c++'
info No language file was loaded for scope
info No language file was loaded for scope 'source.asm'
info No language file was loaded for scope 'source.x86'
info No language file was loaded for scope 'source.x86_64'
info No language file was loaded for scope 'source.arm'
info No language file was loaded for scope
info No language file was loaded for scope 'source.sass'
info No language file was loaded for scope 'source.less'
info No language file was loaded for scope 'source.stylus'
info No language file was loaded for scope
info No language file was loaded for scope 'source.c++'
info No language file was loaded for scope
info No language file was loaded for scope 'source.asm'
info No language file was loaded for scope 'source.x86'
info No language file was loaded for scope 'source.x86_64'
info No language file was loaded for scope 'source.arm'
info No language file was loaded for scope
info No language file was loaded for scope 'source.sass'
info No language file was loaded for scope 'source.less'
info No language file was loaded for scope 'source.stylus'
info No language file was loaded for scope
info No language file was loaded for scope 'source.c++'
info No language file was loaded for scope
info No language file was loaded for scope 'source.asm'
info No language file was loaded for scope 'source.x86'
info No language file was loaded for scope 'source.x86_64'
info No language file was loaded for scope 'source.arm'
info No language file was loaded for scope
info No language file was loaded for scope 'source.sass'
info No language file was loaded for scope 'source.less'
info No language file was loaded for scope 'source.stylus'
info No language file was loaded for scope
info No language file was loaded for scope 'source.c++'
info No language file was loaded for scope
info No language file was loaded for scope 'source.asm'
info No language file was loaded for scope 'source.x86'
info No language file was loaded for scope 'source.x86_64'
info No language file was loaded for scope 'source.arm'
info No language file was loaded for scope
info No language file was loaded for scope 'source.sass'
info No language file was loaded for scope 'source.less'
info No language file was loaded for scope 'source.stylus'
info No language file was loaded for scope
info No language file was loaded for scope 'source.c++'
info No language file was loaded for scope
info No language file was loaded for scope 'source.asm'
info No language file was loaded for scope 'source.x86'
info No language file was loaded for scope 'source.x86_64'
info No language file was loaded for scope 'source.arm'
info No language file was loaded for scope
info No language file was loaded for scope 'source.sass'
info No language file was loaded for scope 'source.less'
info No language file was loaded for scope 'source.stylus'
info No language file was loaded for scope
info No language file was loaded for scope 'source.c++'
info No language file was loaded for scope
info No language file was loaded for scope 'source.asm'
info No language file was loaded for scope 'source.x86'
info No language file was loaded for scope 'source.x86_64'
info No language file was loaded for scope 'source.arm'
info No language file was loaded for scope
info No language file was loaded for scope 'source.sass'
info No language file was loaded for scope 'source.less'
info No language file was loaded for scope 'source.stylus'
info No language file was loaded for scope
info No language file was loaded for scope 'source.c++'
info No language file was loaded for scope
info No language file was loaded for scope 'source.asm'
info No language file was loaded for scope 'source.x86'
info No language file was loaded for scope 'source.x86_64'
info No language file was loaded for scope 'source.arm'
info No language file was loaded for scope
info No language file was loaded for scope 'source.sass'
info No language file was loaded for scope 'source.less'
info No language file was loaded for scope 'source.stylus'
info No language file was loaded for scope
info No language file was loaded for scope 'source.c++'
info No language file was loaded for scope
info No language file was loaded for scope 'source.asm'
info No language file was loaded for scope 'source.x86'
info No language file was loaded for scope 'source.x86_64'
info No language file was loaded for scope 'source.arm'
info No language file was loaded for scope
info No language file was loaded for scope 'source.sass'
info No language file was loaded for scope 'source.less'
info No language file was loaded for scope 'source.stylus'
Logs with `vscode-styled-components` 
info Registering grammar 'text.html.markdown.jsx' from package mdx with language names: mdx,markdownreact
info Registering grammar 'source.css.styled' from package vscode-styled-components with language names:
info Registering grammar 'styled' from package vscode-styled-components with language names:
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
info No language file was loaded for scope 'source.scala' (requested by 'source.python').
info No language file was loaded for scope 'source.scala' (requested by 'source.python').
info No language file was loaded for scope 'source.scala' (requested by 'source.python').
info No language file was loaded for scope 'source.scala' (requested by 'source.python').
info No language file was loaded for scope 'source.scala' (requested by 'source.python').
info No language file was loaded for scope 'source.scala' (requested by 'source.python').
info No language file was loaded for scope 'source.scala' (requested by 'source.python').
info No language file was loaded for scope 'source.scala' (requested by 'source.python').
info No language file was loaded for scope 'source.dart' (requested by 'source.python').
info No language file was loaded for scope 'source.dart' (requested by 'source.python').
info No language file was loaded for scope 'source.dart' (requested by 'source.python').
info No language file was loaded for scope 'source.dart' (requested by 'source.python').
info No language file was loaded for scope 'source.dart' (requested by 'source.python').
info No language file was loaded for scope 'source.dart' (requested by 'source.python').
info No language file was loaded for scope 'source.dart' (requested by 'source.python').
info No language file was loaded for scope 'source.dart' (requested by 'source.python').
info No language file was loaded for scope 'source.postscript' (requested by 'source.python').
info No language file was loaded for scope 'source.c++' (requested by 'source.python').
info No language file was loaded for scope 'source.js.jquery' (requested by 'source.python').
info No language file was loaded for scope 'source.asm' (requested by 'source.python').
info No language file was loaded for scope 'source.x86' (requested by 'source.python').
info No language file was loaded for scope 'source.x86_64' (requested by 'source.python').
info No language file was loaded for scope 'source.arm' (requested by 'source.python').
info No language file was loaded for scope 'text.html.javadoc' (requested by 'source.python').
info No language file was loaded for scope 'source.sass' (requested by 'source.python').
info No language file was loaded for scope 'source.less' (requested by 'source.python').
info No language file was loaded for scope 'source.stylus' (requested by 'source.python').
info No language file was loaded for scope 'source.postscript' (requested by 'source.python').
info No language file was loaded for scope 'source.c++' (requested by 'source.python').
info No language file was loaded for scope 'source.js.jquery' (requested by 'source.python').
info No language file was loaded for scope 'source.asm' (requested by 'source.python').
info No language file was loaded for scope 'source.x86' (requested by 'source.python').
info No language file was loaded for scope 'source.x86_64' (requested by 'source.python').
info No language file was loaded for scope 'source.arm' (requested by 'source.python').
info No language file was loaded for scope 'text.html.javadoc' (requested by 'source.python').
info No language file was loaded for scope 'source.sass' (requested by 'source.python').
info No language file was loaded for scope 'source.less' (requested by 'source.python').
info No language file was loaded for scope 'source.stylus' (requested by 'source.python').
info No language file was loaded for scope 'source.postscript' (requested by 'source.python').
info No language file was loaded for scope 'source.c++' (requested by 'source.python').
info No language file was loaded for scope 'source.js.jquery' (requested by 'source.python').
info No language file was loaded for scope 'source.asm' (requested by 'source.python').
info No language file was loaded for scope 'source.x86' (requested by 'source.python').
info No language file was loaded for scope 'source.x86_64' (requested by 'source.python').
info No language file was loaded for scope 'source.arm' (requested by 'source.python').
info No language file was loaded for scope 'text.html.javadoc' (requested by 'source.python').
info No language file was loaded for scope 'source.sass' (requested by 'source.python').
info No language file was loaded for scope 'source.less' (requested by 'source.python').
info No language file was loaded for scope 'source.stylus' (requested by 'source.python').
info No language file was loaded for scope 'source.postscript' (requested by 'source.python').
info No language file was loaded for scope 'source.c++' (requested by 'source.python').
info No language file was loaded for scope 'source.js.jquery' (requested by 'source.python').
info No language file was loaded for scope 'source.asm' (requested by 'source.python').
info No language file was loaded for scope 'source.x86' (requested by 'source.python').
info No language file was loaded for scope 'source.x86_64' (requested by 'source.python').
info No language file was loaded for scope 'source.arm' (requested by 'source.python').
info No language file was loaded for scope 'text.html.javadoc' (requested by 'source.python').
info No language file was loaded for scope 'source.sass' (requested by 'source.python').
info No language file was loaded for scope 'source.less' (requested by 'source.python').
info No language file was loaded for scope 'source.stylus' (requested by 'source.python').
info No language file was loaded for scope 'source.postscript' (requested by 'source.python').
info No language file was loaded for scope 'source.c++' (requested by 'source.python').
info No language file was loaded for scope 'source.js.jquery' (requested by 'source.python').
info No language file was loaded for scope 'source.asm' (requested by 'source.python').
info No language file was loaded for scope 'source.x86' (requested by 'source.python').
info No language file was loaded for scope 'source.x86_64' (requested by 'source.python').
info No language file was loaded for scope 'source.arm' (requested by 'source.python').
info No language file was loaded for scope 'text.html.javadoc' (requested by 'source.python').
info No language file was loaded for scope 'source.sass' (requested by 'source.python').
info No language file was loaded for scope 'source.less' (requested by 'source.python').
info No language file was loaded for scope 'source.stylus' (requested by 'source.python').
info No language file was loaded for scope 'source.postscript' (requested by 'source.python').
info No language file was loaded for scope 'source.c++' (requested by 'source.python').
info No language file was loaded for scope 'source.js.jquery' (requested by 'source.python').
info No language file was loaded for scope 'source.asm' (requested by 'source.python').
info No language file was loaded for scope 'source.x86' (requested by 'source.python').
info No language file was loaded for scope 'source.x86_64' (requested by 'source.python').
info No language file was loaded for scope 'source.arm' (requested by 'source.python').
info No language file was loaded for scope 'text.html.javadoc' (requested by 'source.python').
info No language file was loaded for scope 'source.sass' (requested by 'source.python').
info No language file was loaded for scope 'source.less' (requested by 'source.python').
info No language file was loaded for scope 'source.stylus' (requested by 'source.python').
info No language file was loaded for scope 'source.postscript' (requested by 'source.python').
info No language file was loaded for scope 'source.c++' (requested by 'source.python').
info No language file was loaded for scope 'source.js.jquery' (requested by 'source.python').
info No language file was loaded for scope 'source.asm' (requested by 'source.python').
info No language file was loaded for scope 'source.x86' (requested by 'source.python').
info No language file was loaded for scope 'source.x86_64' (requested by 'source.python').
info No language file was loaded for scope 'source.arm' (requested by 'source.python').
info No language file was loaded for scope 'text.html.javadoc' (requested by 'source.python').
info No language file was loaded for scope 'source.sass' (requested by 'source.python').
info No language file was loaded for scope 'source.less' (requested by 'source.python').
info No language file was loaded for scope 'source.stylus' (requested by 'source.python').
info No language file was loaded for scope 'source.postscript' (requested by 'source.python').
info No language file was loaded for scope 'source.c++' (requested by 'source.python').
info No language file was loaded for scope 'source.js.jquery' (requested by 'source.python').
info No language file was loaded for scope 'source.asm' (requested by 'source.python').
info No language file was loaded for scope 'source.x86' (requested by 'source.python').
info No language file was loaded for scope 'source.x86_64' (requested by 'source.python').
info No language file was loaded for scope 'source.arm' (requested by 'source.python').
info No language file was loaded for scope 'text.html.javadoc' (requested by 'source.python').
info No language file was loaded for scope 'source.sass' (requested by 'source.python').
info No language file was loaded for scope 'source.less' (requested by 'source.python').
info No language file was loaded for scope 'source.stylus' (requested by 'source.python').

warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin

(Second run with a full-screen terminal because the lines don't wrap.)

Is GRVSC somehow not recognizing/marking the code blocks defining styled components such that they are not assigned to vscode-styled-components?

andrewbranch commented

I’m not sure what’s happening. I see the log where it finds the extension’s grammar registration, so it seems like it should be working. Will have to dig into it before launching v2. It’s also odd that I see it registering the MDX grammar under the language name mdx, but later it says it doesn’t know what mdx is. But your MDX code blocks are working ok?

janosh commented

Hmmm... that's odd. MDX highlighting isn't working when the config is

{
  resolve: `gatsby-remark-vscode`,
  options: { extensions: [`mdx`, `vscode-styled-components`] },
},

but when it's just

  {
    resolve: `gatsby-remark-vscode`,
    options: { extensions: [`mdx`] },
  },

it does work. I just checked again and it was also working with the absolute import from above. So apparently there is a slight difference in behavior depending on the import method. Seems weird but in a way this is still progress. At least the node module import does have an effect in that it breaks something. 😄

Just pushed a new branch with the update to the latest alpha in case you want to check it out.

  • 👀1
andrewbranch commented

@janosh I had a couple race condition bugs that only turned up when you have multiple extensions in the array 😱

New alpha is published now.

  • 👍1
janosh commented

Works perfectly now! 🎉

You can drop the alpha status now as far as I'm concerned. 😄

Just deployed it to production on my site. No issues as far as I can tell.

andrewbranch commented

Awesome! Thanks again for trying it out and giving detailed feedback. Never would have found some of these bugs in tests!