Static assets with basePath on Next Config

[dapper halo]

Other problem I have is with Next Image (see the image in attachment)

Static assets with basePath on Next Config

@everyone anyone please?

[subtle lagoon]

Hi there!

As a reminder, this is a community forum. Most people here are using Storybook for their full-time jobs and cannot answer every question right away. Especially not within 10 minutes.

Which version of Storybook are you using? If you're on v7, there's an official framework for Next.js: https://storybook.js.org/blog/integrate-nextjs-and-storybook-automatically/

If you're on v6, then I see a couple things that could be causing these issues:

1. Given that first error message, I believe you want to set staticDirs: ['../public']. Then, when you reference a file like /admin/images/login-bg.webp, it'll look it up relative to the public directory.

2. That sort of error occurs when TypeScript can't read your file correctly, because of the extension. You're using JSX, so you need to name it preview.tsx. (Note: Mocking of next/image is handled for you by that Next.js framework I mentioned.)

[dapper halo]

I have generated a new config, already with typescript, but how to handle the tsconfig paths?

One of the erros I have now with only the example files is: Field 'browser' doesn't contain a valid alias configuration

[dapper halo]

Already add this on my main.ts inside of webpackFinal: async (config) =>:

return {
      ...config,
      resolve: {
        ...config.resolve,
        fallback: {
          ...config.resolve?.fallback,
          util: false,
        },
        modules: [
          ...(config.resolve?.modules ?? []),
          path.resolve(__dirname, '../')
        ],
        // plugins: [
        //   ...(config.resolve?.plugins ?? []),
        //   new TsconfigPathsPlugin({
        //     configFile: path.resolve(__dirname, '../tsconfig.json'),
        //     extensions: config.resolve?.extensions,
        //   }),
        // ],
        alias: {
          ...config.resolve?.alias,
          '@api': path.resolve(__dirname, '../api'),
          '@components': path.resolve(__dirname, '../components'),
          '@constants': path.resolve(__dirname, '../constants'),
          '@enums': path.resolve(__dirname, '../data/enums'),
          '@hooks': path.resolve(__dirname, '../hooks'),
          '@pages': path.resolve(__dirname, '../pages'),
          '@utils': path.resolve(__dirname, '../utils'),
          '@/fixtures': path.resolve(__dirname, '../__fixtures__'),
          '@/mocks': path.resolve(__dirname, '../__mocks__'),
          '@/tests': path.resolve(__dirname, '../__tests__'),
          '@': path.resolve(__dirname, '../'),
        },
        roots: [
          ...(config.resolve?.roots ?? []),
          path.resolve(__dirname, '../public'),
          'node_modules',
        ],
      },
    };

but not working (ModuleNotFoundError: Module not found: Error: Resolving to directories is not possible with the exports field (request was ./))

Any help?

Already found the problem for this.
Thanks

[dapper halo]

Only Next Image isn't working.
Any way to do it in typescript?

[dapper halo]

Guys anyone can help me?

Basically my Next have as basePath the admin, so I set my static dirs to: staticDirs: ['../public:/admin'],

but not working. @everyone anyone with this problem?