How to include path in compilierOptions in tsconfig

[paulm17]

I'm trying to replicate using @/panda/css in my codebase.

Here's what I have:

"compilerOptions": {
   "paths": {
      "@/panda/css": ["../../styled-system/css"],
      "@/panda/jsx": ["../../styled-system/jsx"],
   }
}

But when I launch storybook, I keep on getting:

ModuleNotFoundError: Module not found: Error: Can't resolve '@/panda/jsx'

Any ideas? Thanks

[segunadebayo]

This is mainly related to the tsconfig path not being detected correctly. Two things you can do:

• Make sure the baseUrl is set in your project
• If you're running into this in Storybook, then you might need some extra configuration like the one below

import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'

const config = {
  // ...
  webpackFinal: (config) => {
    config.resolve ??= {}
    config.resolve.plugins ??= []
    config.resolve.plugins.push(
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions,
      }),
    )

    return config
  },
}
export default config

[paulm17]

I spent the morning on this and can't get any progress.

My storybook main.js

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin').default;
const path = require('path');

module.exports = {
  stories: ['../src/**/*.story.@(js|jsx|ts|tsx)'],
  addons: [
    'storybook-dark-mode',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5',
  },
  webpackFinal: async (config) => {
    config.resolve = {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        '@/panda/css': path.resolve(__dirname, '../styled-system/css'),
        '@/panda/jsx': path.resolve(__dirname, '../styled-system/jsx'),
      },
      plugins: [
        ...(config.resolve.plugins || []),
        new TsconfigPathsPlugin({
          extensions: ['.ts', '.tsx', '.js'],
          configFile: path.join(__dirname, '../tsconfig.json'),
        }),
      ],
    };

    // Turn off docgen plugin as it breaks bundle with displayName
    config.plugins.pop();

    return config;
  },
};

The tsconfig.json for the package:

{
  "extends": "../../tsconfig.base.json",
  "include": ["./src", "../../configuration/types"],
  "exclude": ["./src/project-core/lib/*.d.ts"],
  "compilerOptions": {
    "rootDir": "src",
    "baseUrl": ".",
    "outDir": "lib",
    "declaration": true,
    "declarationDir": "lib",
    "composite": true,
    "strict": true,
    "importHelpers": true,
    // "moduleResolution": "Node",
    "paths": {
      "@/panda/css": ["../../styled-system/css"],
      "@/panda/jsx": ["../../styled-system/jsx"],
    }
  },
  "references": [],
}

And yet, I still get an error:

src/project-core/src/core/Box/Box.tsx:1:23:
      1 │ import { styled } from '@/panda/jsx'

Not sure how to resolve this. So hoping fresh eyes can help...

[Markus1220]

Hello

[paulm17]

Closing this as I reached an impasse with this. Even the guys over at the SB discord couldn't help. It's probably due to my use case being in a yarn workspace.

[paulm17]

With 0.5.0 this is a non issue now.