![](data:image/svg+xml;charset=utf-8,<svg height="31" width="156" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
I have a moderately simple example of a React Hooks widget whose function it is to provide context hooks to provide state that can set a few strings and switch the current Material UI theme. Here is the working demo. By clicking on the button labeled “NEXT THEME” you can see the page toggle between […]
- Tags 'format': 'es' }, 'node_modules/prop-types/index.js': [ 'elementType' ] } }), 'node_modules/react-is/index.js': [ 'ForwardRef', "@babel/plugin-transform-runtime": "^7.9.0", "@babel/preset-env": "^7.9.0", "@babel/preset-react": "7.0.0", "@babel/runtime": "^7.9.2", "@material-ui/core": "^4.9.8", "@material-ui/icons": "^4.9.1", "@material-ui/styles": "^4.9.6", "@rollup/plugin-json": "^4.0.2", "author": "sellis42", "cross-env": "^5.2.0", "description": "Code from CodeSandbox", "engines": { "node": "8" }, "jsnext:main": "dist/index.es.js", "main": "dist/index.js", "module": "dist/index.es.js", "npm": ">=5" }, "peerDependencies": { "react": "^16.12.0", "predeploy": "cd example && npm install && npm run build" }, "prepare": "npm run build", "publishConfig": { "access": "public", "react-dom": "^16.12.0", "react-scripts": "3.4.0", "react": "^16.12.0", "rollup-plugin-babel": "^4.4.0", "rollup-plugin-commonjs": "^9.3.4", "rollup-plugin-node-resolve": "^4.2.4", "rollup-plugin-peer-deps-external": "^2.2.2", "rollup-plugin-terser": "^4.0.4", "rollup": "^1.32.1", "scripts": { "build": "rollup -c", "sourceMap": true, "start": "rollup -c -w", "typeface-roboto": "0.0.75" } } I feel as if there is something missing from my rollup configuration. This project is on my local developm, "version": "0.0.1", (devDependencies) "@babel/core": "^7.9.0", { file: pkg.module, { useContext, {useEffect, {useState, // url({ exclude: ['**/*.svg'] }), along with some text changes indicating the name of the theme. Its a contrived example, and an example folder that demonstrates how to use the widget. I use npm link so that the example widget can use it, and I suspect that there is an issue with the way that I am rolling all this code up for publishing to NPM. I am using Rollup--here is rollup, and that is where I see the issue I'm trying to resolve. I can copy the entire root widget to a subfolder of the example src and import it fr, babel({ exclude: 'node_modules/**', browser: true, but the color will not change. The theme is provided by Material UI, but the idea is that at the top of my site, commonjs({ include: 'node_modules/**', format: 'cjs', I have a moderately simple example of a React Hooks widget whose function it is to provide context hooks to provide state that can set a few, I'm wrapping all content with context providers so that any nested widget can access shared state. Looks like this: import React from "react, it mostly works except for one import piece--the theme color will not change. All other state changes work right--all of the other state chan, json() ] }; And here is my package.json: { "name": "@data-factory/theme-context-test", memo, namedExports: { 'node_modules/react/index.js': [ 'createContext', output: [ { file: pkg.main, plugins: [ external(), resolve({ preferBuiltins: true, runtimeHelpers: true }), terser()
![](data:image/svg+xml;charset=utf-8,<svg height="72" width="72" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
