javivelasco / javivelasco/react-css-themr

Context theming works when app is run but not working when app is built

Open
#79 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.