🐛 Bug: Out-of-the-box SessionProvider results in Webpack Error in Next.js app

[danielbakas]

Search terms you've used

• Next.js
• Webpack
• Server Side Rendering
• SSR

Bug description

Receive this error: (log) when calling useSession hook in base component.

To Reproduce

1. Create boilerplate Next.js app
2. Add app component
3. Install @inrupt/solid-ui-client
4. Import useSession and SessionProvider from @inrupt/solid-ui-client
5. Declare const {session} = useSession() and add <SessionProvider to component
6. Receive webpack error

Expected result

Access values from session.

Actual result

index.js:654 Uncaught Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/[email protected][email protected]/node_modules/swr/dist/index.mjs:592:90)
    at (rsc)/./node_modules/.pnpm/[email protected][email protected]/node_modules/swr/dist/index.mjs (file:///Users/danielbakas/Documents/Profesional/Semantyk/Interno/Proyectos/semantyk.com/client/.next/server/vendor-chunks/[email protected][email protected]:20:1)
    at __webpack_require__ (file:///Users/danielbakas/Documents/Profesional/Semantyk/Interno/Proyectos/semantyk.com/client/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected][email protected]/node_modules/@inrupt/solid-ui-react/dist/index.mjs:37:61)
    at (rsc)/./node_modules/.pnpm/@[email protected][email protected]/node_modules/@inrupt/solid-ui-react/dist/index.mjs (file:///Users/danielbakas/Documents/Profesional/Semantyk/Interno/Proyectos/semantyk.com/client/.next/server/vendor-chunks/@[email protected][email protected]:20:1)
    at __webpack_require__ (file:///Users/danielbakas/Documents/Profesional/Semantyk/Interno/Proyectos/semantyk.com/client/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./src/app/layout.js:9:80)
    at (rsc)/./src/app/layout.js (file:///Users/danielbakas/Documents/Profesional/Semantyk/Interno/Proyectos/semantyk.com/client/.next/server/app/page.js:426:1)
    at Function.__webpack_require__ (file:///Users/danielbakas/Documents/Profesional/Semantyk/Interno/Proyectos/semantyk.com/client/.next/server/webpack-runtime.js:33:43)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at process.processTimers (node:internal/timers:514:7)
    at async eq (file:///Users/danielbakas/Documents/Profesional/Semantyk/Interno/Proyectos/semantyk.com/client/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:401280)
    at async tr (file:///Users/danielbakas/Documents/Profesional/Semantyk/Interno/Proyectos/semantyk.com/client/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:405046)
    at async tn (file:///Users/danielbakas/Documents/Profesional/Semantyk/Interno/Proyectos/semantyk.com/client/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:405596)
    at async tu (file:///Users/danielbakas/Documents/Profesional/Semantyk/Interno/Proyectos/semantyk.com/client/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:409938)
    at async (file:///Users/danielbakas/Documents/Profesional/Semantyk/Interno/Proyectos/semantyk.com/client/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:410457)
websocket.js:50 [HMR] connected

Environment

  System:
    OS: macOS 14.1.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 61.89 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.2.0 - /opt/homebrew/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.2.3 - /opt/homebrew/bin/npm
    pnpm: 8.11.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 119.0.6045.199
    Safari: 17.1
  npmPackages:
    @babel/runtime: ^7.23.5 => 7.23.5 
    @inrupt/solid-ui-react: ^2.9.0 => 2.9.0 
    @testing-library/jest-dom: ^6.1.5 => 6.1.5 
    @testing-library/react: ^14.1.2 => 14.1.2 
    babel-jest: ^29.7.0 => 29.7.0 
    bootstrap: ^5.3.2 => 5.3.2 
    cypress: ^13.6.0 => 13.6.0 
    eslint: ^8.55.0 => 8.55.0 
    eslint-config-next: 14.0.3 => 14.0.3 
    identity-obj-proxy: ^3.0.0 => 3.0.0 
    jest: ^29.7.0 => 29.7.0 
    jest-environment-jsdom: ^29.7.0 => 29.7.0 
    next: ^14.0.3 => 14.0.3 
    react: ^18.2.0 => 18.2.0 
    react-bootstrap: ^2.9.1 => 2.9.1 
    react-dom: ^18.2.0 => 18.2.0 
  npmGlobalPackages:
    @solid/community-server: 5.1.0
    npm: 10.2.3

Additional information

Worked on a React non-Next.js app.

[NSeydoux]

Thanks for reporting this, we will look into this issue soon.