Error: Can't resolve '~rc-collapse/assets/index.css' in '.../node_modules/

[AmelloAster]

What version of Tailwind CSS are you using?

v4.1.3

What build tool (or framework if it abstracts the build tool) are you using?

webpack: 5.94.0

What version of Node.js are you using?

v20.0.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Describe your issue

Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead.

ERROR in ./src/styles/main.scss
  × Module build failed:
  ╰─▶   ×   × Module build failed:
        │   ╰─▶   × Error: Can't resolve '~rc-collapse/assets/index.css'  in '.../node_modules/
 at finishWithoutResolve (.../node_modules/enhanced-resolve/lib/Resolver.js:564:18)

when I use the @import '~external.style.css' and '@tailwindcss/postcss' build with webpack I got this error

this is my postcss-loader options:

[
'@tailwindcss/postcss',
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
},
],
'postcss-normalize',
],

[wongjn]

Is the ~ some kind of Webpack alias? Tailwind doesn't resolve with Webpack aliases so as a work-around, you could:

• Change it to the full path.
• Use subpath imports to create aliases.

[AmelloAster]

Is the ~ some kind of Webpack alias? Tailwind doesn't resolve with Webpack aliases so as a work-around, you could:

• Change it to the full path.
• Use subpath imports to create aliases.

But for the same configuration, I don't have any problem with tailwindcss v3, but with v4, I get this error, even if I use other third-party libraries in my project by importing '~external.style.css' deps. Even if I use other third-party libraries in my project that also import '~external.style.css' via deps, it will also report this error, how can I fix the import css of these other deps in node-modules?

[wongjn]

But for the same configuration, I don't have any problem with tailwindcss v3, but with v4, I get this error

Yes, this is because v4 handles @imports. V3 didn't, and relied on some other process to do that, such as postcss-import.

[AmelloAster]

But for the same configuration, I don't have any problem with tailwindcss v3, but with v4, I get this error

Yes, this is because v4 handles @imports. V3 didn't, and relied on some other process to do that, such as postcss-import.

So I guess that's a conflict? Can't I configure v4 to skip the @import '~external.style.css' code? Because I have a lot of files in my project that use @import '~external.style.css' to bring in the style files of deps in node modules, and @import '~external.style.css' to bring in the style files of third-party deps in other deps used in node modules, so I don't know what to do. I can't change the style of third-party deps.

[philipp-spiess]

@AmelloAster Hey! Hard to say what's going on here without a reproduction that we can run locally. If you use any import aliasing feature I recommend using the full import path instead. Happy to take a look at your setup if you provide a reproduction!

We use enhanced-resolve (same as webpack) for import resolution if that's of any help 😅

[AmelloAster]

@AmelloAster Hey! Hard to say what's going on here without a reproduction that we can run locally. If you use any import aliasing feature I recommend using the full import path instead. Happy to take a look at your setup if you provide a reproduction!

We use enhanced-resolve (same as webpack) for import resolution if that's of any help 😅

I'm using the creat-react-app webpack configuration without the extra alias settings.

resolve: {
    // This allows you to set a fallback for where webpack should look for modules.
    // We placed these paths second because we want `node_modules` to "win"
    // if there are any conflicts. This matches Node resolution mechanism.
    // https://github.com/facebook/create-react-app/issues/253
    modules: ['node_modules', paths.appNodeModules].concat(modules.additionalModulePaths || []),
    // These are the reasonable defaults supported by the Node ecosystem.
    // We also include JSX as a common component filename extension to support
    // some tools, although we do not recommend using it, see:
    // https://github.com/facebook/create-react-app/issues/290
    // `web` extension prefixes have been added for better support
    // for React Native Web.
    extensions: paths.moduleFileExtensions
      .map((ext) => `.${ext}`)
      .filter((ext) => useTypeScript || !ext.includes('ts')),
    alias: {
      // Support React Native Web
      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
      'react-native': 'react-native-web',
      // Allows for better profiling with ReactDevTools
      ...(isEnvProductionProfile && {
        'react-dom$': 'react-dom/profiling',
        'scheduler/tracing': 'scheduler/tracing-profiling',
      }),
      ...(modules.webpackAliases || {}),
    },
  },

and in css file, i import style file like this：

// in css
@import '~slick-carousel/slick/slick';

[philipp-spiess]

@AmelloAster Sorry but I can't help you out without a reproduction that I can run locally. I have no idea where on your file system the ~slick-carousel folder is and why it can't be resolved from within your CSS file. Are you referring to the npm package slick-carousel? If so, why do you need a tilde in front of the package name? I suppose this should work:

@import 'slick-carousel/slick/slick.css';

But again without a reproduction I'm just guessing at this point.

[AmelloAster]

@AmelloAster Sorry but I can't help you out without a reproduction that I can run locally. I have no idea where on your file system the ~slick-carousel folder is and why it can't be resolved from within your CSS file. Are you referring to the npm package slick-carousel? If so, why do you need a tilde in front of the package name? I suppose this should work:

slick-carousel in node modules, changing @import 'slick-carousel/slick/slick.css'; did work, but when I was using tailwindcss v3, I was using @import in the style file under my project's app. '~slick-carousel/slick/slick.css' in the style file under my project's app, I didn't have webpack build issues, but with v4, I can't pass @import '~slick-carousel/slick/slick.css' any more. I can no longer import the style file from node modules, I think this is a breaking change, or there is no way to still allow me to use @ import '~slick-carousel/slick/slick.css' to import the style file in node modules?

[philipp-spiess]

@AmelloAster But ~slick-carousel is not valid JS module resolution syntax, I don't understand how this did work before I'm afraid. I suggest you change the import to something that works more closely to how Node.js resolves imports, that should have worked in v3 as well!

[AmelloAster]

@AmelloAster But ~slick-carousel is not valid JS module resolution syntax, I don't understand how this did work before I'm afraid. I suggest you change the import to something that works more closely to how Node.js resolves imports, that should have worked in v3 as well!

Okay, thank you. I'll try to give it a shot.