javivelasco / javivelasco/react-css-themr
Context theming works when app is run but not working when app is built
- Dominant language
- JavaScript
- Stars
- 589
- Forks
- 65
- PR merge metrics
- No merged PRs in 30d
Description
Hi!
I use Context theming in my app, so that I can call a different layout dynamically, depending on a color passed as a get parameter in the url.
When I launch "npm start" to test my app it works perfectly, but when I use it with "npm run build", and visit the created page on my server, the app always loads the default theme, even when calling for a different color.
I am still a beginner in react, hope there is something I don't miss here. Any help would be great.
Code extract:
```
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
/*import './index-green.css'
import './index-blue.css'*/
import { ThemeProvider } from 'react-css-themr';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { persistStore } from 'redux-persist'
import 'core-js/fn/array/find';
import 'core-js/fn/array/find-index';
import 'core-js/fn/array/map';
import configureStore from './store/configureStore';
const store = configureStore();
persistStore(store, {
blacklist: [
'event',
'polls',
'chat',
'userProfile',
'homeSubPage'
]
});
let params = new URLSearchParams(window.location.search);
let color = params.get('color');
let contextTheme;
switch (color) {
case "blue":
contextTheme = {
theme1: require('./assets/index-green.css'),
theme2: require('./assets/index-blue.css')
};
break;
default:
contextTheme = {
theme1: require('./assets/index-blue.css'),
theme2: require('./assets/index-green.css')
};
}
console.log("color is : "+ color); /* with npm start, blue has blue theme, but with npm run build, blue has green theme as well */
ReactDOM.render(
, document.getElementById('root'));
registerServiceWorker();
```
And the scripts part in the package.json:
```
"name": "widget2",
"version": "0.1.0",
"private": true,
"dependencies": {
"autosize": "^4.0.0",
"core-js": "^2.5.1",
"es6-promise": "^4.1.1",
"isomorphic-fetch": "^2.2.1",
"lodash": "^4.17.4",
"masonry-layout": "^4.2.0",
"moment": "^2.19.1",
"node-sass-chokidar": "0.0.3",
"normalize.css": "^7.0.0",
"npm-run-all": "^4.0.2",
"prevent-parent-scroll": "0.0.6",
"react": "^15.6.1",
"react-css-themr": "^2.1.2",
"react-dom": "^15.6.1",
"react-facebook-login": "^3.6.2",
"react-lazyload": "^2.2.7",
"react-redux": "^5.0.5",
"react-scripts": "1.0.10",
"react-transition-group": "^1.2.0",
"redux": "^3.7.2",
"redux-persist": "^4.10.1",
"redux-thunk": "^2.2.0",
"url-search-params": "^0.10.0"
},
"scripts": {
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive"
},
"homepage": "/widget2/build",
"devDependencies": {
"raw-loader": "^0.5.1"
}
}
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the ReactDOM.render entry point shown in the issue and package.json, comparing the npm start and npm run build scripts and their generated output. Reproduce the blue color query in both modes and trace where the selected theme differs. Done when the built app applies the requested theme consistently.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100