I am trying to include a css file in my main storybuild during development. Just like we do in normal HTML file, (could be in js way too).
For rest of the packages/components I am using styled components but want to import one at global level too.
I tried in importing webpack but didn't succeed.
Expectation:
The mentioned css file (placed in public) should be available in browser during development.
Edit 1:
Following this repo as boilerplate.
https://github.com/serhii-havrylenko/monorepo-babel-ts-lerna-starter/blob/master/README.MD
Add this to your App.js or main.js
var env = process.env.NODE_ENV || 'dev';
if(env === 'dev') {
import '../path_dev_style.css';
}
Related
I have a react public folder that contains a html file and a simple js file.
Then I have an src folder which is outside the public folder.
When I try to import something into that js file which is outside the public folder :
import OpenIdConnect from '#luigi-project/plugin-auth-oidc';
I get the next error :
Cannot use import statement outside a module
How can I use imports into the public folder?
Normally this means your node project is not setup to use ES Modules by default and is instead using common JS modules.
Without modifying config, in files with this restriction, instead of:
import someVar from './filePath';
// ...
export { anotherVar };
use istead:
const someVar = require('./filePath');
// ...
module.exports = anotherVar;
If you wish to pursue a more consistent solution, I would advice reading though the Node.js documentation and any other documentation relevant to any library/framework/tooling that you use to find a suitable solution.
Hi I just started creating project in react js can we create property file outside of the react app and call those values in react app. If yes than where I need to create it and what should be the extension of the file.
Solution 1 :
Here I would suggest you to create .env file with following steps
create a file called .env in the root of your project
REACT_APP_NOT_SECRET_CODE=abcdef
To access environment variables you can write process.env.REACT_APP_NOT_SECRET_CODE in react code
You must create custom environment variables beginning with REACT_APP_
Here is the link you can read more
Solution 2
.env file will not allow to change value at run time.
To change value at run time you try following solution
Config.js
/**
* Init GLOBAL_VARIABLES to store global config
*/
if (typeof window.global === 'undefined') {
window.global = {config: {}};
}
const GLOBAL_VARIABLES = window.global.config;
export default GLOBAL_VARIABLES;
Then when you want to store value from anywhere your React component you can import GLOBAL_VARIABLES and assign the value
import GLOBAL_VARIABLES from "./Config";
.....
GLOBAL_VARIABLES.session = session;
GLOBAL_VARIABLES.countries = countries;
...
Similarly you can also fetch the value where ever you want back
console.log(GLOBAL_VARIABLES.countries)
I am trying to import variables from .json file in a .scss file with node-sass-json-importer package.
I am facing a problem because this package is not automatically integrated in react-scripts/config/webpack.config.js. So, I would like to modify this file as follows below :
Add const jsonImporter = require ('node-sass-json-importer');
Add an optional preProcessorOptions object parameter to getStyleLoaders function. Indeed, this function has no preprocessor options const getStyleLoaders = (cssOptions, preProcessor) and the only option added by default is sourceMap: true. Of course, this function will take in account this new parameter.
Add a third parameter in the getStyleLoaders call for scss file.
{
implementation: require("sass"),
sassOptions: {
importer: jsonImporter(),
}
}
It works on a minimal webpack implementation (without react). But, I suppose it is not so easy to apply changes to react-scripts/config/webpack.config.js and I suspect I will have many problems. Perhaps, there is an another way to do it.
Thanks for answer.
I want to use the version number that is configured on package.json into my components on NuxtJS application.
Can this be done?
At the top of your nuxt.config.js file put an import
import pkg from './package.json'
then, inside the same file, insert this part
export default {
...
// https://nuxtjs.org/guide/runtime-config
publicRuntimeConfig: {
clientVersion: pkg.version,
}
}
Now you can use the variable, inside your components with $config.clientVersion
For more details, see the docs at https://nuxtjs.org/guide/runtime-config
Using Webpack and building an app in React.
In all my files, I have to include to type:
var React = require('React');
seems like a useless repetition.
Is there something I can add in the config file ofwebpack to import/require React in all my files?
You can use ProvidePlugin to automatically require React when needed.
Just add to your webpack config file:
var webpack = require('webpack');
module.exports = {
// Your configuration stuff.
plugins: [
new webpack.ProvidePlugin({
React: 'react'
})
]
};
Every time React is used in a file it will be auto-required/imported without having to do it explicitly.
You only need to require it once in the entry point. While I don't use react, I only include Angular, or any other library that I use, once. Here's an example of how it might look:
// app.ts (my entry point)
namespace app {
"use strict";
//////////// Conditional Requires for Development /////////////
/* istanbul ignore if: only necessary for development environment */
if (process.env.NODE_ENV === "development") {
require("../src/index.html");
}
//////////// Require CSS /////////////////////////////////////
require("../node_modules/codemirror/lib/codemirror.css");
require("./main.css");
//////////// Require Libraries ///////////////////////////////
var angular: IAngularStatic = require("angular");
require("../node_modules/angular-resource");
require("../node_modules/angular-ui-codemirror");
require("../node_modules/angular-sanitize");
//////////// Initialize Angular //////////////////////////////
angular.module("app", [
"ui.codemirror",
"ngResource",
"ngSanitize"
]);
//////////// Require Application Components //////////////////
require("./components/durian.js");
require("./components/testbox.js");
require("./moreapplicationfiles/");
}
This is one file, which I use as the jumping off point for all required libraries and application files.
Once Webpack has packed all of the files together it will do so in the order that I have listed here into one file, so just put React above all application files that use React and they will have access to all React methods and properties. The same advice goes for Flux, Redux, jQuery, or any other library. Of course, not all libraries play nice with Webpack, but it's rare that one doesn't.
As far as adding to the config file... You can also add in additional entry points which can include your JavaScript libraries, by listing all of the libraries in an array at the "entry." You just have to make sure that it will pack these libraries first, so test that they are in the correct order:
// In your webpack.config.js file
{
entry: [ "./node_modules/react", "./app.js"],
}