importing tw in a dynamic route throws module not found error for stitches.config.ts

[prvnbist]

I'm getting following error when importing and using tw in a dynamic route.

./pages/[username]/transactions.tsx
Module not found: Can't resolve '..\..\stitches.config.ts' in 'C:\code\project\pages\[username]'
Did you mean './..\..\stitches.config.ts'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

Found preferRelative in webpack's documentation here. But setting it in next.config.js did not resolve the issue.

[prvnbist]

I resorted to following as a workaround in case anyone else comes across this issue.

import tw from 'twin.macro'
import { styled } from '@stitches/react'

const Styles = {
   PageHeading: styled('h1', {
      ...tw`font-heading text-3xl font-medium text-gray-800`,
   }),
}

[ben-rogerson]

That's a good workaround.
You could also try setting the path via the twin config, but I'm not sure how much use that will be since it looks like the dynamic route is causing the issue?

// babel-plugin-macros.config.js
module.exports = {
  twin: {
    stitchesConfig: 'PATH_FROM_PROJECT_ROOT',
  },
}

// package.json
"babelMacros": {
  "twin": {
    "stitchesConfig": "PATH_FROM_PROJECT_ROOT"
  }
},

[ajmnz]

Maybe related to #606. I can reproduce it on Windows, but not on macOS.
For me, it happens on all components that import styled from twin.macro. Setting preferRelative on next.config did solve the issue, but also broke some other stuff on the app.

module.exports = {
   webpack: (config) => {
     config.resolve.preferRelative = true;
     return config;
   }
}

@ben-rogerson let me know if we can help with anything 👍🏼

[prvnbist]

Setting path to stitches.config.ts in package.json under babelMacros like following:

"babelMacros": {
    "twin": {
        "preset": "stitches",
        "stitchesConfig": "./stitches.config.ts"
    }
}

and then setting preferRelative in next.config.ts like following:

module.exports = {
   webpack: config => {
      config.resolve.preferRelative = true
      return config
   }
}

seems to work, now inlining tw doesnt throw the error anymore nor does importing styled from twin.macro.

[ajmnz]

and then setting preferRelative in next.config.ts like following:

module.exports = {
   webpack: config => {
      config.resolve.preferRelative = true
      return config
   }
}

seems to work, now inlining tw doesnt throw the error anymore nor does importing styled from twin.macro.

Unfortunately, this breaks other imports within the app (at least in my case). I ended up moving stitches.config.ts inside src and manually building twin.macro with "./" prefixed to this returned function.

From what I saw, it only happens on Windows and has to be something related to how webpack tries to resolve the path to stitches provided by twin.macro.