I have a React + ASP.NET application run from Visual Studio. For some reason I am receiving the following error:
Error: Config file /config/custom-environment-variables.js cannot be
read. Error code is: undefined. Error message is:
FileSystem.readFileSync is not a function
I have had no intentions to use custom environment variable. I have no idea why I am receiving this error. Also, I could not find much resources on the internet about this issue. I have been spending the whole day un/installing the npm and nodejs but no help.
Any suggestions?
After spending 1 day, I found the solution, which was in my case to delete this stupid line of code:
import config from 'config';
I do not understand why this suddenly started to cause problems since it was always there. I hope this helps others.
I could not understand the solution but;
I wrote my config.js. Afterward, export it, add it .gitignore as well
mycongif.js
const config = {
token: "xaxaxax"
}
export default config;
and I use it
import config from './config/myconfig'
console.log(config.token);
just by removing this line in your on of the files => 'import config from 'config';
it's just due to auto import by an editor
Related
There is something wrong with the way I understand how to use classes in a Javascript module and export them, or some bad assumption I made about how nodejs works. Please help me understand this better. I wanted to write a module that exposed an object that will "store things safely." I have a file ("safestore.js") with this in it:
class Safestore {
constructor() {
console.log("SUCCESS!");
}
... // I defined other methods here...
}
exports.safestore = Safestore; // I tried this with `new Safestore` and `new Safestore()` too.
I run nodejs on my command line and then:
> ss = require('./safestore');
{ safestore: [Function] }
> s = ss.safestore('pwd','./encFile.enc');
ReferenceError: Safestore is not defined...
Why is it telling me that Safestore is not defined while executing the safestore function which is defined in the same file where Safestore is, actually defined?
The question does not contain enough information, although there is a clue. node and nodejs are two different pieces of software, and I was using the wrong one. I also didn't specify what version of nodejs I ran from my command line. When I ran it with node (instead of nodejs) I got errors that made sense and I was able to fix them.
Thanks to #Ethicist for listing the version of Node he used, as this got me to double check all those things.
I just need to remember that node and nodejs each do different things. Further research shows me that nodejs is a symlink to version 8.10.0 of node.js, and node is a symlink to the version that I set with nvm. I solved the problem permanently for myself with sudo rm /user/bin/nodejs and I'll remember, if I ever see an error that says nodejs doesn't exist, that it wants the old version of node.js.
Here's the error I'm getting inside of my application:
Uncaught ReferenceError: module is not defined
at isHotReloading2 (isHotReloading.js:2:20)
at Form3.UNSAFE_componentWillMount (createReduxForm.js:511:16)
and here's what the error looks like in the chrome inspector:
I can't easily change the course code of redux-form (which is no longer being maintained) and neither can I remove it from my application. Is there a way to work around this error?
I've tried the following fixes in the vite.config.js file to no avail. Any ideas would be greatly appreciated. Thanks!
I ran into this same issue with Redux-form and fixed it as follows.
Create a file with the following
const isHotReloading = () => false;
export default isHotReloading;
In your vite.config file add the following to resolve.alias
{
find: './util/isHotReloading',
replacement: path.resolve(__dirname, './PATH_TO_FILE_ABOVE/reduxFormHotReload.js'),
},
This will disable the hot reload update functionality all together, so maybe you could improve the function above, but I didn't worry about it.
I need two compiles to achieve server-side rendering with React. I have spent many days trying and it does not work. With Parcel 1 it worked perfectly. My problem is that after compiling it tells me that Node does not recognize the css that it is going to send to the client. In parcel I just put --target = node6 and everything worked great. Help !!
Here is my actual package.json:
Here is the error:
SyntaxError: Unexpected token '.'
at Object.compileFunction (node:vm:352:18)
dist-server/index.css:1
.line-total{border-top:2px solid #0}
This might be a bit of an onion-peeling exercise to get everything working, but I think I found the source of the first issue, and I can give you some tips about where to go from there.
Here's an overview of what is happening:
Your build:server command is telling parcel to bundle your server located at server/index.js
Your server/index.js file has a line that imports your client app code:
import App from '../src/App.js';
App.js imports a .css file.
So when you go to run the server bundle with node, the first thing it does is try to require("ouput-css-file.css"), which chokes because it's not javascript.
You could fix this first layer of errors by instead importing the .css file in your src/index.html instead of src/App.js:
<link rel="stylesheet" href="./App.css"></link>
That should get you past the problem mentioned in your question, but it looks like you'll hit another layer of (unrelated) errors in your server/index.js file - you need to correctly reference the ../dist files from the client bundle output, and actually import the renderToString method, were the first that I hit, but it keeps going.
You might want to take a step back and try to get the server code working without parcel (while still using parcel to generate the client bundle) and then addd parcel back to the server build process after you're sure you've got it working.
I'm trying to use a .env file to store API keys in a TypeScript React project. My .env file is in the root of the project and I'm trying to access its variables from src/index.tsx via process.env.
.env:
FOO=foo
src/index.tsx:
import * as dotenv from "dotenv";
console.log(dotenv.config()); // prints TypeError: fs.readFileSync is not a function
console.log(process.env.FOO); // prints undefined
It looks like dotenv.config() throws in an error so I think that's where the problem is. Just not sure how to fix it. I've tried moving .env into the src directory and passing a path into the function, e.g. dotenv.config({ path: `${__dirname}/.env` }) but still getting the same error.
dotenv seems to be the most common way to use environment variables in a Node.js project, but if there are better alternatives I'd be interested in hearing those too.
Any thoughts & ideas would be appreciated.
Renaming the environment variable to REACT_APP_FOO and restarting react-scripts seems to do the trick. It works without calling dotenv.config(). Not really sure why it works this way so I would be interested to hear someone's insight on this.
You can access variables by first calling require('dotenv').config() at your project root. then you can use them like process.env.FOO.
You have to consider to call the process.env.FOO
I am following Josh Morony's tutorial with the following URL.
https://www.joshmorony.com/creating-role-based-authentication-with-passport-in-ionic-2-part-1/
https://www.joshmorony.com/creating-role-based-authentication-with-passport-in-ionic-2-part-2/
The published date is not too old as it was published in Jan 2018. Unfortunately, I can't get it running. Too much errors. Can someone provide a working code for me to learn ? Some of the code is also invalid in some point which I managed to fix. But I still cannot get it running. Hope that you can help.
After I followed the tutorial below
https://www.joshmorony.com/creating-role-based-authentication-with-passport-in-ionic-2-part-2/
I ran the command ionic serve to test out the application, there I received the following error
Typescript Error
Cannot find module 'ionic-native'.
...Application/Development/Cordova/josh1/client/todo->roles/src/app/app.component.ts
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
I checked online and found out that I need to replace
import { StatusBar } from 'ionic-native';
with
import { StatusBar } from '#ionic-native/status-bar';
After I changed it, i received the following error,
Property 'styleDefault' does not exist on type 'BarProp'.
..Application/Development/Cordova/josh1/client/todo->roles/src/app/app.component.ts
statusbar.styleDefault();
});
The solution to it is that i need to comment out statusbar.styleDefault();
The last ionic serve command I ran shows the following error :
Runtime Error
Can't resolve all parameters for Storage: (?)
Stack
Error: Can't resolve all parameters for Storage: (?).
at syntaxError (http://localhost:8100/build/vendor.js:80025:34)
at CompileMetadataResolver._getDependenciesMetadata (http://localhost:8100/build/vendor.js:95245:35)
at CompileMetadataResolver._getTypeMetadata (http://localhost:8100/build/vendor.js:95080:26)
at CompileMetadataResolver._getInjectableMetadata (http://localhost:8100/build/vendor.js:95060:21)
at CompileMetadataResolver.getProviderMetadata (http://localhost:8100/build/vendor.js:95420:40)
at http://localhost:8100/build/vendor.js:95331:49
at Array.forEach ()
at CompileMetadataResolver._getProvidersMetadata (http://localhost:8100/build/vendor.js:95291:19)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8100/build/vendor.js:94859:50)
at JitCompiler._loadModules (http://localhost:8100/build/vendor.js:113952:87)
I am really lost here. No other meaningful error description provided. If you have tried the following tutorial, can you provide some assistance ?