TypeError: use_prefers_color_scheme__WEBPACK_IMPORTED_MODULE_2__ is not a function

[Ark07]

Describe the bug

I was trying to integrate rich text editor , and came across this amazing package Blocknote , reduces more than half of the work required with tip tap

But When i added webpack 5 to my application
It started giving below error
TypeError: use_prefers_color_scheme__WEBPACK_IMPORTED_MODULE_2__ is not a function

Package.json

 "dependencies": {
    "webpack": "^5.92.1",
    "webpack-cli": "^5.1.4",
    "@blocknote/core": "^0.13.5",
    "@blocknote/mantine": "^0.13.5",
    "@blocknote/react": "^0.13.5",
    "@babel/core": "^7.24.7",
    "@babel/preset-env": "^7.24.7",
    "@babel/preset-react": "^7.24.7",
 }

webpack.config

entry: 'app/app.js',
 output: {
    path: path.resolve(process.cwd(), 'build'),
    publicPath: '/',
    filename: '[name].js',
    chunkFilename: '[name].chunk.js',
  },

Related issue maybe ? devforth/painterro#123 , webpack/webpack#12675

• Node version: 20
• Browser: Chrome

Thank you in advance for your help!

[matthewlipski]

Hmm this might be a pain to diagnose and fix, especially since it's more likely a bundling issue than something specific to BlockNote. That being said, could you try updating your BlockNote version to 0.14.1 and see if the problem is still there?

[Ark07]

hi @matthewlipski @YousefED, thank you for taking time to check the issue
I have updated BlockNote version to 0.14.1 , the issue still exists when used with webpack version 5

please find below PR for webpack 5 issue fix #872

use-prefers-color-scheme gives default as well as named exports , using named exports resolves the webpack 5 issue
and it works perfectly fine otherwise as well

export declare const usePrefersColorScheme: () => "dark" | "light" | "no-preference";
export default usePrefersColorScheme;
//# sourceMappingURL=index.d.ts.map