can‘t load twin.macro in MDX files

[ajmalafif]

Hi,

I can‘t seem to figure out why import 'twin.macro' isn‘t working when importing: https://raw.githubusercontent.com/ajmalafif/afif.dev/twinmacro-as-shortcodes-for-mdx-afif-521/web/src/content/projects/fare-alert.mdx

I‘ve tried few other ways like importing as shortcodes like via Layout or GlobalStyles: https://github.com/ajmalafif/afif.dev/blob/9a1ac57b6cd461fe1e004f063c849d5ca6487026/web/src/templates/project-post.js#L19

const shortcodes = { Link, Hidden, Preview, Layout, pre: CodeBlock } 

Nothing seems to work. Any pointer or advice?

edit: reckon it has something to do with this? https://www.gatsbyjs.com/docs/using-client-side-only-packages/

[amantiwari1]

try it

/** @jsxImportSource @emotion/react */
// eslint-disable-next-line
import tw from 'twin.macro'

[ajmalafif]

/** @jsxImportSource @emotion/react */
// eslint-disable-next-line
import tw from 'twin.macro'

hey @amantiwari1 appreciate the help, I am getting this error instead:

./src/templates/project-post.js
Syntax error: /web/src/templates/project-post.js: importSource cannot be set when runtime is classic.
> 1 | /** @jsxImportSource @emotion/react */
    | ^
  2 | // eslint-disable-next-line
  3 | import React from 'react'
  4 | import Helmet from 'react-helmet'

[amantiwari1]

sorry i thought you used emotion library, any way I don't know

[bumi001]

Not sure why you would want to import tw in a mdx file. However, I am able to import a jsx component in a mdx file where the jsx component uses tw. I am using the following in my webpack.config.js:
{
test: /.mdx?$/i,
use: [{
loader: '@mdx-js/loader',
options: {
jsxImportSource: '@emotion/react'
}
}],
},

See also: https://giters.com/ben-rogerson/twin.macro/issues/589