Context is not defined inside context provider

[JuanICasareski]

I'm building a router and encountered the following bug:

const DEFAULT_STATE = {} // Not really relevant
const RouterContext = createContext<routerContext | null>(null)

const Router = ({Wrapper, children}) => {
    const [route, setRoute] = useReducer(RouterReducer, DEFAULT_STATE)
    // Some stuff missing
    return (
        <RouterContext.Provider value={{ route, setRoute }}>
          <Wrapper>
            { children }
          </Wrapper>
        </RouterContext.Provider>
    )
}

Everything works on dev env, but when I transpile it and run it, the Wrapper component cannot access the context to the router, useContext(RouterContext) return null/undefined

Note: I'm using vite 3.0.0 for building

[marvinhagemeister]

I can't reproduce the error on my end. The router context value is defined and not null. Can you share a reproduction case where we can reproduce the error?

[JuanICasareski]

Thanks for replying.
I minimized the project while keeping the same error.

It's stored on here

** Works **

• run yarn dev and open localhost:8080

** Doesn't Work **

• run yarn build, then yarn preview and open the link on the terminal

[marvinhagemeister]

Thanks for posting a reproduction case. This is extremely helpful 👍

Just took a look and it looks like something goes totally wrong during the bundling process. The line where the context is created is duplicated for some reason, meaning you end up with two different versions of the same context. Not sure why vite does this

[JuanICasareski]

Thank you very much!

Should I report it on vite's repo?

[marvinhagemeister]

I think that's not needed. They already have an issue for that: vitejs/vite#964

[marvinhagemeister]

So I found the culprit. It looks like you're developing on a mac and on macOS the file system is case insensitive by default. Meaning foo.ts is treated the same as Foo.ts. But vite is able to detect that and treats both files as a separate module. The thing is that in the repo provided there is no duplicate file, but rather a casing issue in imports.

In ./src/appWrapper.jsx, pay close attention to the casing:

  import { ExampleRoute } from "./routes/ExampleRoute";
  import MainContainer from "./components/MainContainer";
- import { Router, RouteComponent } from "./context/router";
+ import { Router, RouteComponent } from "./context/Router";

  import "./assets/globals.scss";

So what ends up happening is that vite looks for ./context/router, which will resolve to ./context/router/index.tsx and when vite reads that file it reads ./context/Router/index.tsx instead. This is because the file system is case insensitive. But because the resolved path is different, vite treats them as a separate module and essentially duplicates the contents and by extension the createContext() calls. This is why you end up with two duplicate contexts.

There is already an issue for that on the vite issue tracker: vitejs/vite#964

[JuanICasareski]

YES!!!!!

I'm actually developing on windows, BUT IT WORKED.