### Discussed in https://github.com/shadowwalker/next-pwa/discussions/279

<div type='discussions-op-text'>

<sup>Originally posted by **mattvb91** September 28, 2021</sup>
Hey everyone,

Just wondering if & how it would be possible to exclude subpaths from the PWA scope. For example if my scope is `/` which includes `/app` in my app, is it possible to completely exclude a subpath like `/app/admin` from being built into the PWA?

Cheers</div>

Apologise in advance for creating an issue from the discussion but this is currently a bit of a pain point for me on a current project.

done

Exclude subpath from scope

shadowwalker/next-pwa

Appreciate the response 👍 I guess the best approach is to completely have that section outside of the /app scope then! Thanks again

@shammahk thank you for your comment I was 2 days deep into trying to figure out why my css was broken on other libraries.

For anyone else using this lib heres some keywords that i was using that might help you land here: Missing css styled components, missing css react-select, missing css emotion, missing css nextjs client load 

My app structure: 

//public
//src
*****//components
**********//app
***************-App.css
***************-App.js
**********//map
***************-Map.js
*****//fonts
**********-myFont.ttf
*****-index.css
*****-index.js
*****-serviceWorlers.js
-package.json

Map component:

Basic example -> attached in comment

Workflow without map:

- I define some css styles in index.css (--variables, font import, etc).
- I use the styles in my App component.
- Css working well.

Workflow with map:
- I define some css styles in index.css (--variables, font import, etc).
- I use styles in my App component.
- I use Map component in App component.
- Map working well but css styles stop working

Workaround:
- I moved the css style (--variables, font import, etc) defined in index.css to -> app.css
- Everything is working well

Environment:

@react-google-maps/api  1.9.12

react 16.13.1



Css broken when map component is added

JustFly1984/react-google-maps-api

@ebonow I appreciate the response. I have spent the last 2 hours putting a minimum reproduction example together and everything was working fine in that along with all client loading pages.

Turns out that as soon as I added a component from this lib `@react-google-maps/api` then the css started breaking again for `react-select` on client loaded pages... Turns out this comment: https://github.com/JustFly1984/react-google-maps-api/issues/1361#issuecomment-762813572 is what helped me fix it.

Im assuming something in that library hooks into an event listener and then blocks the css from loading.

I apologise for assuming its this lib that is causing the issues but i was absolutely out of my depth with this issue (and i still am) as i dont know enough of the react depths to understand how another component can cause this.

# Are you reporting a bug or runtime error?
Bug - as in title. While in development mode on localhost this issue is not visible at all.

# Reproduction and investigation
Repo to reproduce:
https://github.com/pacxiu/react-select-bug

For reproducing issue locally (running production build) run `yarn build && yarn start`

Production deployment on vercel - https://react-select-bug.vercel.app/ (You could see that on initial load for couple msec website is looking correctly, after that `body` element is loosing it styles eg: `background` and `font-size`)

I think it could be somehow related to the fact that both react-select and theme-ui are using emotion-css underhood? However I'm not sure at all how it is caused.

# Expected
Production build shouldn't have broken CSS styles and match what we could see locally.

## Screens:
### Production build:
![image](https://user-images.githubusercontent.com/19193499/111483453-15947780-8735-11eb-803a-8d32cf7d9212.png)

### Local environment
![image](https://user-images.githubusercontent.com/19193499/111483586-3361dc80-8735-11eb-8dce-394de95b1f54.png)


@edit
Another hint that I've fround - production seems okayish with 3.2.0 version of react-select.

Adding react-select to repository with theme-ui and Next.js results in broken styles for production website.

JedWatson/react-select

Thanks @Andarist and yea im aware im probably in the wrong spot.

Did some more digging and wanted to create a minimum repro example and it turns out as soon as i added `@react-google-maps` to the repro example that all the css started breaking in the following client load pages. Will look further there. Thanks again I appreciate it

**Current behavior:**

Styles present in development:
![Screenshot 2021-04-10 at 15 41 37](https://user-images.githubusercontent.com/15611419/114273032-d8ac5f80-9a18-11eb-86b2-d46410c0e0ff.png)

Are missing in production:
![Screenshot 2021-04-10 at 15 41 47](https://user-images.githubusercontent.com/15611419/114273045-e06c0400-9a18-11eb-8b06-8877962bed99.png)


**To reproduce:**

![ezgif-6-632406f2e83a](https://user-images.githubusercontent.com/15611419/114272976-971bb480-9a18-11eb-9c4c-9b2b4540b752.gif)

The only difference between the menus are depending on the auth state: showing or not additionnal button actions. I suspect something is breaking the style in the `Menu` component. But I tried a lot of things, I don't understand what's the issue..

https://github.com/binajmen/chakra-nextjs/blob/develop/components/layout/Menu.tsx

Note that in development (`yarn dev`), I have no styling issue.

**Expected behavior:**



**Environment information:**

```js
"dependencies": {
  "@chakra-ui/react": "^1.3.3",
  "@emotion/react": "^11.1.5",
  "@emotion/styled": "^11.1.5",
  "emotion-theming": "^11.0.0",
  "next": "^10.0.7",
  "react": "17.0.1",
  "react-dom": "17.0.1",
  ...
},
```

needs triage

Missing styles in production (NextJS + Chakra)

emotion-js/emotion

Thanks for the response, im afraid I have already gone down the route of building my own google places autocomplete so the issue does not stem from that but rather directly from this lib. 

Will investigate further. Thanks

Thanks @Andarist i can confirm it is indeed the `react-select` booting and then another library `simple-react-lightbox`

![image](https://user-images.githubusercontent.com/11991564/137108959-3a95cf88-0c8c-4134-9ced-7baad3869ac2.png)

![image](https://user-images.githubusercontent.com/11991564/137109452-29488952-9f04-4a9b-b4d4-9d4902f723ce.png)

Now the weird thing is I removed the `react-select` completely in the parent pages & when i navigate into where the simple-react-lightbox page is (client side navigation) the css is still missing.

I apologise as I am aware this is probably the wrong place to be asking for help but I seem to always come back to `@emotion` as the source from multiple libs in combination with nextjs

@binajmen did you manage to get this fixed? I am having multiple css issues across my project and it all seems to point back to @emotion/react coming from this lib.

Im currently experiencing the same thing. I have locked the `resolutions` for all libraries that are relying on @emotion the same way that @ivancuric has done it above but im still getting the `You are loading @emotion/react when it is already loaded` error.

I have also confirmed in my `package-lock.json` that there is only 1 installed version of `@emotion/cache` and `@emotion/react` with no success.

I am also on nextjs. Does anyone have any ideas on how to debug this more? Im completely lost trying to figure this out