search

shadowwalker / next-pwa

Zero config PWA plugin for Next.js, with workbox 🧰
MIT License
3.86k stars 323 forks source link

Build failed with styled-jsx #403

Open robertu7 opened 2 years ago

robertu7 commented 2 years ago

Summary

As title, our project is using styled-jsx (not CSS Modules) + PostCSS as CSS processor, but it's failed to run npm run build with following error:

> [PWA] Compile client (static)
> [PWA] Auto register service worker with: /Users/abc/matters-web/node_modules/next-pwa/register.js
> [PWA] Service worker: /Users/abc/matters-web/public/sw.js
> [PWA]   url: /sw.js
> [PWA]   scope: /
> [PWA] Fallback to precache routes when fetch failed from cache or network:
> [PWA]   document (page): /_offline
> [PWA] Compile server
> [PWA] Compile server
info  - Using external babel configuration from /Users/abc/matters-web/.babelrc
[styled-jsx] Loading plugin from path: /Users/abc/matters-web/node_modules/styled-jsx-plugin-postcss/index.js
(node:34874) [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.

./src/components/Appreciation/styles.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: src/components/Appreciation/index.tsx

Import trace for requested module:
./src/components/Appreciation/index.tsx
./src/components/index.tsx
./src/pages/_app.tsx

./src/components/Appreciation/styles.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 (/Users/abc/matters-web/node_modules/next/dist/compiled/webpack/bundle5.js:28:395049)
    at /Users/abc/matters-web/node_modules/next/dist/compiled/webpack/bundle5.js:28:396519
    at /Users/abc/matters-web/node_modules/next/dist/compiled/webpack/bundle5.js:1:271021
    at iterateNormalLoaders (/Users/abc/matters-web/node_modules/next/dist/compiled/webpack/bundle5.js:1:267828)
    at iterateNormalLoaders (/Users/abc/matters-web/node_modules/next/dist/compiled/webpack/bundle5.js:1:267913)
    at /Users/abc/matters-web/node_modules/next/dist/compiled/webpack/bundle5.js:1:268142
    at runSyncOrAsync (/Users/abc/matters-web/node_modules/next/dist/compiled/webpack/bundle5.js:1:266488)
    at iterateNormalLoaders (/Users/abc/matters-web/node_modules/next/dist/compiled/webpack/bundle5.js:1:268045)
    at /Users/abc/matters-web/node_modules/next/dist/compiled/webpack/bundle5.js:1:267687
    at /Users/abc/matters-web/node_modules/next/dist/compiled/webpack/bundle5.js:28:395994

Import trace for requested module:
./src/components/Appreciation/index.tsx
./src/components/index.tsx
./src/pages/_app.tsx

./src/components/ArticleDigest/Card/styles.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: src/components/ArticleDigest/Card/index.tsx

Import trace for requested module:
./src/components/ArticleDigest/Card/index.tsx
./src/components/ArticleDigest/index.tsx
./src/components/index.tsx
./src/pages/_app.tsx

./src/components/ArticleDigest/Card/styles.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 (/Users/abc/matters-web/node_modules/next/dist/compiled/webpack/bundle5.js:28:395049)
    at /Users/abc/matters-web/node_modules/next/dist/compiled/webpack/bundle5.js:28:396519
    at /Users/abc/matters-web/node_modules/next/dist/compiled/webpack/bundle5.js:1:271021
    at iterateNormalLoaders (/Users/abc/matters-web/node_modules/next/dist/compiled/webpack/bundle5.js:1:267828)
    at iterateNormalLoaders (/Users/abc/matters-web/node_modules/next/dist/compiled/webpack/bundle5.js:1:267913)
    at /Users/abc/matters-web/node_modules/next/dist/compiled/webpack/bundle5.js:1:268142
    at runSyncOrAsync (/Users/abc/matters-web/node_modules/next/dist/compiled/webpack/bundle5.js:1:266488)
    at iterateNormalLoaders (/Users/abc/matters-web/node_modules/next/dist/compiled/webpack/bundle5.js:1:268045)
    at /Users/abc/matters-web/node_modules/next/dist/compiled/webpack/bundle5.js:1:267687
    at /Users/abc/matters-web/node_modules/next/dist/compiled/webpack/bundle5.js:28:395994

Import trace for requested module:
./src/components/ArticleDigest/Card/index.tsx
./src/components/ArticleDigest/index.tsx
./src/components/index.tsx
./src/pages/_app.tsx

./src/components/ArticleDigest/Dropdown/styles.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: src/components/ArticleDigest/Dropdown/index.tsx

Import trace for requested module:
./src/components/ArticleDigest/Dropdown/index.tsx
./src/components/ArticleDigest/index.tsx
./src/components/index.tsx
./src/pages/_app.tsx

> Build failed because of webpack errors

Versions

How To Reproduce

Use styled-jsx

Additional Context

CSS files in above error message: