We Keep Coding

Calling a JS functions from another JS file in EmberJS

I'm currently working in emberJS I need to call a function in the JS file which in the public/myjs.js from
app/components/mycomponent.js. It says could not find module named public/myjs.js
In app/component/mycomponent.js this is the following code I have:
import functions from ../../public/myjs.js
I have also tried this still not working:
const functions = require("myjs");
Thank you :)

files from the public folder can't be imported at the top of files (via normal import X from Y), they are separated from the build system.
the public folder is directly copied into your dist directory.
So a couple options to access myjs.js:
use await import('/myjs.js') -- native dynamic import will load the JS file from the public folder. make note of the leading slash here.
move myjs.js to be within the app folder, and then import X from 'my-app/myjs';

How can i create a file route in react app?

i want to have a javascript file accessible using url.
like i have myfile.js and i want that file to apear on localhost:3000/myfile.js
is there any way to do that in create react app or if not how can i do that using webpack? CopyWebPackPlugin should work? by the way i want to use es module like import thing in that file so i guess i can't have it inside public folder but its fine if i get the compliled one by webpack.
or if there is some other way of doing this would be very much helpful.

warn - using beta Middleware (not covered by semver) error in NextJS [duplicate]

I'm trying to build my Next.js project but it keeps giving me this error in the terminal:
Error: Build optimization failed: found page without a React Component as default export in
pages/components/context/Context
That's the React context API file, there isn't supposed to be any default export there. Is this a bug or what?

You should move your components outside the pages folder. pages/ should only be used for page components as Next.js routing is based on its structure.
Next.js has a file-system based router built on the concept of pages.
When a file is added to the pages directory it's automatically available as a route.
By default, Next.js assumes anything under the pages folder is a page component and will try to build each file as a page.
Even though the above is the default behaviour, you can configure your Next.js app to include non-page files in the pages directory.
To do so, you can modify the pageExtensions entry in the next.config.js file as shown below. Then rename your page components to have a file extension that includes .page (_document.page.js, _app.page.js, index.page.js, etc).
module.exports = {
pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']
}
With this configuration, Next.js will ignore any file that doesn't contain .page for the purpose of building pages/API routes and routing.

In my case, I had an empty file index.js in a folder. Using Nextjs Default Router

It seems to be not declared default export keyword in context component.
Try it as follow:
const Context = ()=>{
...
}
export default Context

I had the same error.
If you comment out all other code but leave this NextJS won't get mad at you:
export default function Home1() {
return <>{/* nothing */}</>;
}
I like to keep older index files and components locally and on github so this is a nice hack. I just copy all of the existing code add it to a new file and then add 1 to it for example:
index1.js
You can also leave a comment to kind of bring you and other devs up to speed as to why you did this for example:
//good for history of index implementation and associated syntax logic

Importing files from different folders in React.js - Relative Path

I am learning React.js, I struggle with relative paths...
Structure of the project,
-Project
-node_modules
-public
-index.html
-src
-p1
-test.json
-give.js
-loan.png
I like to import test.json file in give.js file, How to achieve this,
I tried this format - import test from "./p1/test.json" but it shows error - Module not found
And, I have a doubt, saving media files in public folder is safe or not?, Any hint would be very help full
Thanks

I believe that one way to solve this is to use require.
const test = require("./p1/test.json");
An alternate approach could be changing your JSON file to a js file, and exporting an object.
in p1/test.js
const test = { your JSON };
export default test;

There is nothing wrong with your import statement, you are doing it just fine. The problem is probably with the file type.
You are trying to import a JSON file. Which will not work out of the box with react.
To fix this, convert your .json file to a .js with the structure like so:
test.js
export default { foo: 'bar' }
give.js
import test from "./p1/test"

The relative path you've mentioned is correct.
Rather than using the file type of .json, use .js file extension.
And also make sure that you're exporting the data from your test.js file correctly. For eg.
test.js
export default const test = {
"test": 1
}
give.js
import test from './p1/test'
Saving media files in the public folder is acceptable but we save them in the src folder so that the build system can cache them, which leads to improvement in the performance of the app.

Resolving to a different main file per directory

I have a components directory which hosts several sub folders with actual components. Each folder has main file named as the name of folder plus extension. Then I have to create index.js file containing something like export default from './MyComponent';.
So my question is if there is a way in Webpack to get rid of those index.js files and instead dynamically point to component file itself. Perhaps I could write some plugin, I haven't looked much into a plugin system yet. Just wondering if it's even possible to change fundamentals like this.