[Windows] Build failing on global CSS imports in `_app`

[brc-dd]

What version of Next.js are you using?

11.1.1-canary.17

What version of Node.js are you using?

14.17.5

What browser are you using?

N/A

What operating system are you using?

Microsoft Windows 10.0.22000

How are you deploying your application?

next build && next start

Describe the Bug

If I'm importing any global CSS file in _app.tsx the build is failing with the following error:

./styles/globals.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: pages\_app.tsx

The issue is probably due to: #28279 as the code is working fine on older canary versions (v11.1.1-canary.11 and below). Below are the complete logs:

$ NODE_OPTIONS='--trace-deprecation' yarn next build
yarn run v1.22.5
$ C:\Users\brc-dd\Desktop\foobar\node_modules\.bin\next build
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types
(node:13348) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
    at Function.getModuleGraphForModule (C:\Users\brc-dd\Desktop\foobar\node_modules\next\dist\compiled\webpack\bundle5.
js:65377:10)
    at NormalModule.get issuer [as issuer] (C:\Users\brc-dd\Desktop\foobar\node_modules\next\dist\compiled\webpack\bundl
e5.js:63283:22)
    at Object.ErrorLoader (C:\Users\brc-dd\Desktop\foobar\node_modules\next\dist\build\webpack\loaders\error-loader.js:2
0:101)
    at LOADER_EXECUTION (C:\Users\brc-dd\Desktop\foobar\node_modules\next\dist\compiled\webpack\bundle5.js:30793:14)
    at runSyncOrAsync (C:\Users\brc-dd\Desktop\foobar\node_modules\next\dist\compiled\webpack\bundle5.js:30794:4)
    at iterateNormalLoaders (C:\Users\brc-dd\Desktop\foobar\node_modules\next\dist\compiled\webpack\bundle5.js:30911:2)
    at Array.<anonymous> (C:\Users\brc-dd\Desktop\foobar\node_modules\next\dist\compiled\webpack\bundle5.js:30884:4)
    at runCallbacks (C:\Users\brc-dd\Desktop\foobar\node_modules\next\dist\compiled\webpack\bundle5.js:20480:15)
    at C:\Users\brc-dd\Desktop\foobar\node_modules\next\dist\compiled\webpack\bundle5.js:20653:4
    at C:\Users\brc-dd\Desktop\foobar\node_modules\next\dist\compiled\webpack\bundle5.js:29861:16
    at C:\Users\brc-dd\Desktop\foobar\node_modules\next\dist\compiled\@vercel\nft\index.js:1:307088
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:73:3)
info  - Creating an optimized production build
Failed to compile.

./styles/globals.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to a
void conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Leve
l CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: pages\_app.tsx


> Build error occurred
Error: > Build failed because of webpack errors
    at C:\Users\brc-dd\Desktop\foobar\node_modules\next\dist\build\index.js:397:19
    at async Span.traceAsyncFn (C:\Users\brc-dd\Desktop\foobar\node_modules\next\dist\telemetry\trace\trace.js:60:20)
    at async Object.build [as default] (C:\Users\brc-dd\Desktop\foobar\node_modules\next\dist\build\index.js:77:25)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

UPDATE:

The same error is on JS projects too:

./styles/globals.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to a
void conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Leve
l CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: pages\_app.js

The only difference I can see now is the path separator.

ANOTHER UPDATE:

The code is working fine on POSIX environments. This is indeed an issue with path separator.

Expected Behavior

The build should succeed (would be better if without warnings).

To Reproduce

yarn create next-app --ts foobar
cd foobar
yarn add next@canary
yarn build

[awareness481]

yarn create next-app --ts foobar
cd foobar
yarn add next@canary
yarn build

Can't reproduce following these steps (I'm on Linux if that matters)

[brc-dd]

yarn create next-app --ts foobar
cd foobar
yarn add next@canary
yarn build

Can't reproduce following these steps (I'm on Linux if that matters)

@awareness481 Yeah I just tested it on Linux. It is working fine for me too. It appears to be an issue with path separators.

[awareness481]

Just reproduced the error on Windows 👍

[cmsbased]

This error made it to v.11.1.1 release. Windows 10 computer.

[oceandrama]

Can confirm this issue. It brokes dev and build commands

[ijjk]

Hi, this should be updated in the latest canary of Next.js v11.1.2-canary.0, please update and give it a try!