Why I can't import a module.exports in React? [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 16 hours ago.
This post was edited and submitted for review 14 hours ago.
Improve this question
Sorry that I am very new to coding and programming. A lot of stuffs I still don't understand.
I'm having a React code with all the frontends and I wanted to import a module from an auto-generated js file that module.exports an async function. I need the file to perform some calculations and return some values.
However, I keep getting error like this:
Uncaught SyntaxError: The requested module '/#fs/home/zk/solidity/safehome/circuits/main_js/witness_calculator.js' does not provide an export named 'default'
How do I solve this?
Even if I changed the code using { instance } in import still comes up with the same error, just that in this time it says import named "instance" is not found. If I change module.exports in the auto-generated js file to export default, I will have another errors.
code is something like this in js file contains the class:
import builder from "../../../circuits/main_js/witness_calculator.js";
and this is the exports from another js file:
module.exports = async function builder(code, options) {...}
How to reproduce the error:
Clone the below link, checkout "zkedit" branch, cd into "client" folder and npm run dev.
https://github.com/honghan87/safehome

Related

Node.js. The error [ERR_REQUIRE_ESM] in the terminal was caused by using the npm module "chalk." [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 days ago.
Improve this question
I want to get the module "chalk " working in my code, but I get a error [ERR_REQUIRE_ESM] in the terminal. The message is "Error [ERR_REQUIRE_ESM]: require() of ES Module C:\node.js\1\node-apps\node_modules\chalk\source\index.js from C:\node.js\1\node-apps\app.js not supported.
Instead change the require of index.js in C:\node.js\1\node-apps\app.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (C:\node.js\1\node-apps\app.js:22:15) {
  code: 'ERR_REQUIRE_ESM'
}".
What do I need to do to make it work?
enter image description here
enter image description here
I want to get the module "chalk " working in my code, what do I need to do to make it work?

What is a good file structure to have with Vite? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 months ago.
Improve this question
I am using Vite to easily run tailwind and other npm packages in my vanilla HTML and JavaScript.
This is what I have now: Current file structure
And this is my vite.config.js
const { resolve } = require("path");
const { defineConfig } = require("vite");
module.exports = defineConfig({
build: {
rollupOptions: {
input: {
main: resolve(__dirname, "index.html"),
about: resolve(__dirname, "about/index.html"),
},
},
},
});
Does anyone know a good file structure for a multi-page app, or know improvements to my current structure?
Personally, I like to separate my code by how it’s called, or type. For example, images and similar media type files may go in an “assets” directory. Same with CSS (or any styling methods), in a “styles” or similar directory, and same for JS. Whereas with JS, given that I generally use 99% JS in any given project, I get super modular.
My go-to style for JS (or just code in general honestly) is:
Utils directory for highly re-usable code (code that would be like a utility in lodash or similar utility libraries that are super general purpose, used for anything, anywhere)
Services directory for code that makes calls to external API’s or similar data fetching.
Components directory (more useful with React/Vue/etc., but could be useful still!
Pages (same as above)
And so on, with structure built on how the files actually get used, OR, the file type.
That being said, I’d personally check out how React people do it commonly, then aggregate that style with how Angular organizes its code. I’ve found a sweet spot between the two.

Lottie mocking is not working in react-testing-library [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
When I tried to run test cases I am getting the following error:
TypeError: Cannot set property 'fillStyle' of null
for line: import Lottie from 'react-lottie';
Can someone please help how to mock this library?
I have also added 'jest-canvas-mock' library and added the below configuration in the jest.config.ts:
import type { Config } from '#jest/types';
// Sync object
const config: Config.InitialOptions = {
verbose: true,
setupFiles: ['jest-canvas-mock']
};
export default config;
Versions of the packages used:
react: 17.0.2
react-testing-library: 11.2.7
react-lottie: 1.2.3

Invariant violation: Element type is invalid.Can not solved? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I am coding react-native.
I have also used the Appregistry.
No errors in code.
Then I ran the / react-native run-android / and it got the error. (I had run react-native start)
Can anyone know what is happening ?
Here's the error
index.js File
App.js File
Package.json File
I would suggest you look into your components. It is most likely that you are not exporting or importing them correctly. If you use export default you have to import the file as import X from 'X'. When using just export your import should look like import { X } from 'X'

AOT: Error: Uncaught (in promise): TypeError: Cannot read property '$' of undefined [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am trying to publish an Angular4 front-end project in AOT production build. After long hours of getting angular cli to successfully build in aot mode I was able to finally publish the front-end which was previously published with "build prod --aot false" and see the difference between AOT and JIT. Unfortunately I was getting below error when the webapp starts in the browser.
Error: Uncaught (in promise): TypeError: Cannot read property '$' of undefined
The error seemed related to jQuery (because of $) which I have in app.module.ts.
'import * as $ from 'jquery';'
But I realized that it wasn't jQuery related at all coz I was still getting the same error even if I completely removed jQuery references and usage in my app.
Note: I am only getting this error if the front-end was built with "prod --aot true" but not when the app is built with "prod --aot false"
Update: I also realized that I have SignalR service in the project which has below definition using the $ symbol.
export class SignalrWindow extends Window {
$: any;
}
Not sure what's going on. Any help would be awesome!
Create a new definition file (Ex: definitions.d.ts) and add the following code:
interface SignalrWindow extends Window {
$: any;
}
declare var window: SignalrWindow ;
One way use the jquery instead of installing dependency is to add the jquery script to your index.html file and create a define variable.
index.html
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
app.module.ts
declare var $: any;
The downside of this is, the IntelliSense will not work with the define variables.

Categories