Cannot read properties of undefined (reading 'createContext')

[phosphor-icons]

Cannot read properties of undefined (reading 'createContext')

[rektdeckard]

The error indicates that the UMD bundle is being imported. I don't know exactly why this would cause issue, but it could be related. It may have something to do with the React peer dependency and your bundling process, because I read this error as saying "Webpack can't find the React import at runtime", and with UMD react libraries, React is expected to be available on the window object, IIRC.

Couple ideas:

You might want to try upgrading from 2.0.6 to 2.0.10, which has "type": "module" by default.

Try changing from import React from 'react' to import * as React from 'react' in your component lib, and/or adding "esModuleInterop": true and "allowSyntherocDefaultImports": true to your tsconfig there too, if not already present.

This isn't an error I have seen with Phosphor before, and it looks more like something with your bundling.

[danthaiwang]

Hey - Thanks for your suggestions @rektdeckard

Unfortunately still not joy. I bumped to 2.0.10 but that had no affect.

I have been poking around with our tsconfig a bit but no avail. Perhaps if I drop it in here you could take a look and see if anything jumps out at you.

You suggestion to change the imports of react to import * as React... - I've tried that in my ThemeProvider.web.tsx file, but would you suggest doing this across the whole component library? There's about 100 components to make that change in, but I'd have thought doing in a single place would serve the purpose of the test.

{
  "include": ["src", "@types/**/*", "contracts"],
  "exclude": ["lib", "storybook/webpack.config.js", "./stories"],
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "declaration": true,
    "emitDeclarationOnly": false,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "module": "CommonJS",
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "moduleResolution": "node",
    "outDir": "lib",
    "noEmit": false,
    "resolveJsonModule": true,
    "rootDir": "./src",
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "ES2015",
    "paths": {
      "contracts/*": ["contracts/*"]
    }
  },
}

[danthaiwang]

Ok, so I've got it working... I'm cautious about calling it a total victory but it has unblocked me for what has been 3 days of not much fun.

I've added the minified React bundles to our html file in script tags and then added React to our webpack config as an externals prop.

// public/index.html

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>

// webpack.common.js

externals: {
  React: 'react',
},

In your response when you said that the umd couldn't find React on the window, that pointed me down this route to look for a solution there, so thank you for that.

[rektdeckard]

Just another thought, I see jsx: react in your config. Have you tried switching to jsx: react-jsx to use the automatic runtime? If not, React will need to be in scope in every file in your component library.

[rektdeckard]

And in fact, in every consumer too