#V6 / React: Could not resolve "@/panda/jsx"

14 messages · Page 1 of 1 (latest)

primal seal
#

I'm having a really hard time in trying to get a path to resolve. See the end for the error:

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;
  },
};

My tsconfig.json:

{
  "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": [],
}
#

If I output config:

{
  extensions: [
    '.mjs', '.js',
    '.jsx', '.ts',
    '.tsx', '.json',
    '.cjs'
  ],
  modules: [ 'node_modules' ],
  mainFields: [ 'browser', 'module', 'main' ],
  alias: {
    '@storybook/addons': '/Users/paul/development/src/github/project/node_modules/@storybook/addons',
    '@storybook/api': '/Users/paul/development/src/github/project/node_modules/@storybook/api',
    '@storybook/channels': '/Users/paul/development/src/github/project/node_modules/@storybook/channels',
    '@storybook/channel-postmessage': '/Users/paul/development/src/github/project/node_modules/@storybook/channel-postmessage',
    '@storybook/components': '/Users/paul/development/src/github/project/node_modules/@storybook/components',
    '@storybook/core-events': '/Users/paul/development/src/github/project/node_modules/@storybook/core-events',
    '@storybook/router': '/Users/paul/development/src/github/project/node_modules/@storybook/router',
    '@storybook/theming': '/Users/paul/development/src/github/project/node_modules/@storybook/theming',
    '@storybook/semver': '/Users/paul/development/src/github/project/node_modules/@storybook/semver',
    '@storybook/client-api': '/Users/paul/development/src/github/project/node_modules/@storybook/client-api',
    '@storybook/client-logger': '/Users/paul/development/src/github/project/node_modules/@storybook/client-logger',
    react: '/Users/paul/development/src/github/project/node_modules/react',
    'react-dom': '/Users/paul/development/src/github/project/node_modules/react-dom',
    '@/panda/css': '/Users/paul/development/src/github/project/styled-system/css',
    '@/panda/jsx': '/Users/paul/development/src/github/project/styled-system/jsx'
  },
#

Under alias:

'@/panda/css': '/Users/paul/development/src/github/project/styled-system/css',
    '@/panda/jsx': '/Users/paul/development/src/github/project/styled-system/jsx'

So why can't it be found?

#

Added as an image because Discord wouldn't let me post the rest, for whatever reason.

#

No matter what I try, I get:

Could not resolve "@/panda/jsx"

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

  You can mark the path "@/panda/jsx" as external to exclude it from the bundle, which will remove
  this error.
#

V6: Could not resolve "@/panda/jsx"

#

V6 / React: Could not resolve "@/panda/jsx"

primal seal
#

I'm using this in a Yarn workspace as well. Thought I'd mention that if it matters.

pseudo lake
#

<@&1106625682693439569>

wispy bronze
#

Does it work if you don't use the alias at all and instead use a relative path directly to the module?

primal seal
wispy bronze
primal seal