Context theming works when app is run but not working when app is built
decaluwepatrick opened this issue · comments
decaluwepatrick commented
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(
<ThemeProvider theme={contextTheme}>
<Provider store={store}>
<App />
</Provider>
</ThemeProvider>
, 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"
}
}