Unable to load Utility File - reactjs

I am trying to load a utility file called as apiclient which is present in
app/stores/util
My distribution folder has a file cfile.js which is calling this file using the following code :
var api = require('../util/apiclient');
I am able to load the component files etc which are present in the app/components folder via a similar code and they work without any issue. But when i try to load the API client i just keep getting this error.
Uncaught Error: Cannot find module '../util/apiclient'
This is how my files and directories are present http://prntscr.com/7qkovs
Could someone help me out over here ?
Thanks

Well your structure is like this:
clinical-notes
app
stores
util
apiclient.js
dist
cfile.js
So when going from cfile.js to apiclient.js the correct require path would be ../app/stores/util/apiclient.js.
But this is neither a reactjs nor flux problem ;)

Related

File Class in Next.js

im trying to create a text file in a typescript next.js application.
const vCard: File = new File(["..."], "card_file.vcf");
export default vCard;
I'm getting this error thrown:
Server Error
ReferenceError: File is not defined
The goal is to make this file downloadable by the user like so:
<a aria-label={"Link to vCard"} href={URL.createObjectURL(vCard)} target={"_blank"} rel={"noreferrer"} download={vCard.name}>
<QRCode/>
</a>
The reason behind this is to ship the file within the javascript code, so there is no downloading from the server involved once the application loaded.
My question is: Is there no File class in next.js applications? I did the same thing in another project with pure React and it worked fine...
I tried to search the internet about this, but couldn't find anything about it.

CLI upload main.js file size limited when building with react and threejs

Is there a way around the file size limitation when building with react and threejs? I am building a react module with three js using the cms-react-boilerplate. The project builds fine, but it can't upload the main.js file as it is 2.1MiB. It gives me the following error:
[ERROR] Error validating template.
[ERROR] line 0: Coded files must be smaller than 1.5 MiB
I tried to upload the file directly to the design manager but was given the same error.
I also tried to create a main.js file and paste the code into it, but was given the following error:
Error:Coded file buffer must be smaller than 2.0 MiB
I'd recommend enabling code splitting. If not, you're going to need to use a different host for the JavaScript files. Additionally – make sure you're correctly including only what you need.
Avoid:
import * as x from 'lib';
and instead do:
import { each, func, you, need } from 'lib';
This will allow bundlers such as Webpack to properly Tree Shake your dependencies.
Try compressing your files into .min.js files with this if you are done editing them.

Webpack/React json file not loading externally on build

Im trying to use the azure environment variables with my react build. So far I have an appsettings.json file that I load into react with:
import settings from './appsettings.json';
I then have webpack copy the json into build folder which goes to azure. However I think after build the app isnt actually loading the file as I can see some of my variables embedded in the "chunk.js" so its not actually reaching out the the json file in root anymore? Am I importing the file in the wrong way?
C
Two possible solutions:
var json = require('./data.json'); //with path
change your settings.json to settings.js and use module.exports = {} in it.
I believe azure would accept different forms of setting files, not limited to json.

Access json file in public folder from src/reducers react

I have created react application using npx create-react-app. I have json files in public/strings folder.I need to access this json file from the reducer in src.I have code as below in src/reducers/lang_reducer.js
let resources =require("/strings/strings_" + language + ".json");
let englishStrings=require("/strings/strings_en.json");
It is throwing following error:
./src/reducers/languages_reducer.js
Module not found: Can't resolve '/strings' in 'E:Code\src\reducers'
Is there any other way by which i can access json file which is in public folder from src ?
Thanks in advance :)
create-react-app configures a lot of features automatically. This restricts you from accessing files which are not in src folder. One workaround for this is to eject and then overwrite the configuration. Other wise instead of using create-react-app you can do your webpack configuration on your own.

how can i add filesaver.js to gulp

I am trying to manage my app which is a spa angular using gulp. Now i have a problem with FileSaver . My app requires me to download some files.
I use the following code for the same
$window.saveAs(response.response,downloadFile);
When I check the response i am getting the file in blob form. But the debugger doesnt go past save as function. I think FileSaver.js file is not getting recognised. I have added both blob.js and fileSaver.js in the vendor.js n I can see them too. But only blob.js works . I am using this http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js
What should i do?

Resources