CSS imports from URL not working with experimental.urlImports enabled

[austinhallock]

Verify canary release

• [X] I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #46~20.04.1-Ubuntu SMP Wed Apr 20 13:16:21 UTC 2022
Binaries:
  Node: 18.2.0
  npm: 8.9.0
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.1.7-canary.24
  react: 18.1.0
  react-dom: 18.1.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Importing CSS from a URL doesn't appear to work if experimental.urlImports are enabled. This happens in both CSS (eg @import url(https://...)) and JS (eg import 'https://...')

Potentially related to https://github.com/vercel/next.js/issues/30522

css-loader appears to have some newer code for Webpack's buildHttp which doesn't seem to be in the Next.js version of css-loader: https://github.com/webpack-contrib/css-loader/pull/1389/files

Expected Behavior

CSS imported from a URL w/o erroring

To Reproduce

1) npx create-next-app 2) add experimental: { urlImports: ['https://cdn.jsdelivr.net'] } to next.config.js 3) add @import url('https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css'); to top of globals.css 4) try loading site

Should give error:

error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[2]!./styles/globals.css
Error: Can't resolve 'https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css' in '/home/austin/misc_git/test3/styles'

Removing urlImports: [...] from next.config.js causes it to work again.

Same thing happens when trying to import via JS (eg import 'https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css')

The error for importing from JS might be more helpful:

./https:/cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css:1:0
Module not found: Can't resolve '!../../../../../../node_modules/next/dist/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoStyleTag.js'

[paulmbw]

Has this been resolved?

[apoorva-srivastav]

What's the update on this issue @austinhallock ?

[oalexdoda]

The default example from the docs doesn't work either: https://nextjs.org/docs/app/api-reference/next-config-js/urlImports

[jeremydrichardson]

Is this actually a bug or should it be a feature request?

My understanding of this feature suggests that this wasn't ever expected to work. But would be nice to hear from someone who knows. The docs are not super clear on what is actually happening in a number of the scenarios it goes over.

[slicktdog08]

Just bumping this thread as I have run into the same dreaded issue. With this experiment enabled my css https:// imports fail 😢