Repository: next.js
Issue: Build error when importing a dependency module containing a `URL` instance with a `import.meta.url` base
Labels: bug,linear: next

### Verify canary release

- [X] I verified that the issue exists in Next.js canary release

### Provide environment information

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:46:32 PDT 2022; root:xnu-8020.101.4~15/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.2.0
      npm: 8.9.0
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 12.1.7-canary.8
      react: 17.0.2
      react-dom: 17.0.2

### What browser are you using? (if relevant)

N/A

### How are you deploying your application? (if relevant)

N/A

### Describe the Bug

If a Next.js project component imports from a dependency module that contains a `URL` instance representing a relative file URL to `.css` file, e.g. `new URL("./foo.css", import.meta.url)`, then `next build` has a totally bizarre build error:

```
Global CSS cannot be imported from within node_modules.
```

If the URL represents a directory, e.g. `new URL("./foo/", import.meta.url)`, then the error is:

```
Module not found: Can't resolve './foo/' in '/[redacted]/node_modules/[redacted]'
```

Annoyingly, the errors once generated keep appearing each time you run `next build` no matter how you change the code unless you manually delete the `.next` build directory.

### Expected Behavior

No build error, and at runtime for Node.js or a browser the `URL` instance reflects whatever `import.meta.url` really is for the code that runs.

Additionally, if there are build errors, fixing the source of the error should result in that error no longer appearing in future builds, without having to manually delete the `.next` build directly.

### To Reproduce

With this `package.json`:

```json
{
  "name": "demo",
  "private": true,
  "scripts": {
    "build": "next build"
  },
  "dependencies": {
    "device-agnostic-ui": "10.1.0",
    "next": "12.1.6",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}
```

And this in `pages/index.js`:

```js
import Margin from "device-agnostic-ui/Margin.mjs";

export default function Home() {
  return (<Margin>Home</Margin>)
}
```

Run `npm install && npm run build`. Notice the build error:

```

> build
> next build

info  - Checking validity of types  
warn  - No ESLint configuration detected. Run next lint to begin setup
(node:85898) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
info  - Creating an optimized production build  
Failed to compile.

./node_modules/device-agnostic-ui/Margin.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/device-agnostic-ui/Margin.mjs

Import trace for requested module:
./node_modules/device-agnostic-ui/Margin.mjs
./pages/index.js

./node_modules/device-agnostic-ui/Margin.css
Module build failed: Error: Final loader (./node_modules/next/dist/build/webpack/loaders/error-loader.js) didn't return a Buffer or String
    at processResult (/[redacted]/node_modules/next/dist/compiled/webpack/bundle5.js:49609:17)
    at /[redacted]/node_modules/next/dist/compiled/webpack/bundle5.js:49695:5
    at /[redacted]/node_modules/next/dist/compiled/webpack/bundle5.js:141000:3
    at iterateNormalLoaders (/[redacted]/node_modules/next/dist/compiled/webpack/bundle5.js:140826:10)
    at iterateNormalLoaders (/[redacted]/node_modules/next/dist/compiled/webpack/bundle5.js:140833:10)
    at /[redacted]/node_modules/next/dist/compiled/webpack/bundle5.js:140848:3
    at runSyncOrAsync (/[redacted]/node_modules/next/dist/compiled/webpack/bundle5.js:140731:12)
    at iterateNormalLoaders (/[redacted]/node_modules/next/dist/compiled/webpack/bundle5.js:140844:2)
    at /[redacted]/node_modules/next/dist/compiled/webpack/bundle5.js:140817:4
    at /[redacted]/node_modules/next/dist/compiled/webpack/bundle5.js:49669:15

Import trace for requested module:
./node_modules/device-agnostic-ui/Margin.mjs
./pages/index.js

Cannot read properties of undefined (reading 'get')
during rendering of asset asset/resource|/[redacted]/node_modules/next/dist/build/webpack/loaders/error-loader.js??ruleSet[1].rules[3].oneOf[10].use!/[redacted]/node_modules/device-agnostic-ui/Margin.css


> Build failed because of webpack errors
```

You can see the line of the dependency module that triggers the Next.js build bug:

- https://github.com/jaydenseric/device-agnostic-ui/blob/v10.1.0/Margin.mjs#L7
- https://unpkg.com/device-agnostic-ui@10.1.0/Margin.mjs