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.
Related
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 found a problem that I cannot load GLTF files into a scene if I cannot place them in the Public folder in my React application. For example, I have MyPVPanel.gltf, and I want to load it in react app or in my npm library, or I always to be with my react components.
My questions are:
Is this possible to import assets from a specific folder if you develop an npm package. Do packages have something like /public or /assets?
Can I configure my own package to have such a folder with static assets?
How to load GLTF files without a public folder. For example, we can import .png files without problems in react application.
So there is a thing named data URI. You can convert small files in that format(which is basically a base64 encoded string with some metadata at the beginning of it).
data:[<mediatype>][;base64],<data>
In my case [<mediatype>] is data:application/octet-stream.
So if you want to load small file from specific folder in you application, first of all rename your .gltf file into .json. And after importing and converting it into base64 code you can load it using GLTFLoader from three.js library.
Here is a code example:
import myGLTF from './MyPVPanel.json';
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader";
import myGLTF from "./MyPVPanel.json";
const loader = new GLTFLoader();
const stringGLTF = JSON.stringify(myGLTF) // convert Object to a String
const base64EncodedGLTF = btoa(stringGLTF) // Base64 encode the String
//First part is: 'data:application/octet-stream;base64,'
const resultingDataURI = `data:application/octet-stream;base64,${base64EncodedGLTF}`;
loader.load(
resultingDataURI,
(gltf: any) => {
console.log('Loaded!!!');
this.scene.add(gltf.scene)
},
() => {},
(e: any) => console.error(e)
);
}}>Load</button>
https://i.stack.imgur.com/uPD57.png
This program is part of'REACT'.
Obviously there is a folder called section, but in'App.js' it says that it cannot be found.
Could you please solve this phenomenon?
The installed plugin is'react-router-dom'.
I haven't installed anything else.
Either you can import your file directly like below
import main from './section/main.js';
Or you can create and index.js file within the section folder and export any function you want.
import main from './main.js';
import content from './content.js';
export { main, content };
And import using the folder
import { main, content } from './section';
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';
}
I am new to cake php and I have a plugin folder in my application
app/plugins
in plugin folder I have model and vendors folder. (Notice I dont have any view or controller folder)
app/plugins/model
app/plugins/vendors
I wanted to add a component to plugin folder so I added controllers folder to it and place my component file there.
app/plugins/controllers
app/plugins/controllers/myComp.php
The method in myComp.php is
class myCompComponent extends EmailComponent {
function hilpot() {
In my vendors/shells/tasks folder I have a file called my_test.php
In the file I have included the component like
var $components = array('myComp');
in the same file, i have a method that suppose to call the myComp method
function _Maikle()
{
$this->myComp->hilpot() = array(
...................
..................
And it fails at this point with the following error
PHP Fatal error: Call to undefined method stdClass::hilpot() in C:\wamp\www\folder\app\plugins\vendors\shells\my_test.php on line 87
Any help will be appreciated
thanks
your plugin structure seems to be incorrect
/app/plugins/plugin_name/controllers/... etc
you probably didnt read the cookbook at all. otherwise you would have notices this as well as that components are in a sub directory:
/app/plugins/plugin_name/controllers/components/...
also note that you should always include the pluginname:
var $components = array('PluginName.MyComp');
and m should be capitalized: MyComp