We Keep Coding

How do I set Node.js to use relative paths for my components?

I am creating a web component in Node.js. This component uses images, which I have put in a sub-directory within the component's directory.
When I import the image I get the error "Failed to load resource: the server responded with a status of 404 (Not Found)" in Chromium. I understand that the browser wants me to use the path from the root of the project to the file, but it kind of defeats the purpose of having a nice directory structure.
I also have Snowpack installed.
Edit: Using the Node.js package path is difficult, since Snowpack can't normally use packages not inside the browser, and I have to use Snowpack. With devOptions { polyfillNode: true } it should be possible, but I tried creating a snowpack.config.js file with that line to no avail. How do I implement it?
Or how do you usually handle paths in Snowpack? I am unsure about using a polyfill, and if there is another solution, I'd be happy to try it.

Relative paths can be used as :
//in ./app.js
const path = require('path');
//using path.relative()
const greet = require(path.relative(__dirname, './lib/greet.js'));
Same for image
// get the relative path of the image file from this file
const imagePath = path.relative(__dirname, './public/image.jpg');
// export a function that returns an HTML string with the image tag
module.exports = function() {
return `<img src="${imagePath}" alt="Image">`;
};

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

Angular: Moving a service/component to another folder (in the folder structure, not in code)

SHORT: Renaming a service or component is no problem, but can you also move it to another folder?
LONG: This is the service I generated at the wrong directory with the ng new service data command:
When I move it from the src folder into the _service folder I'm getting asked, if I want to update the imports. Of course I press yes, but when starting the app I get this error:
Module build failed (from ./node_modules/#ngtools/webpack/src/index.js):
Error: ENOENT: no such file or directory ...\data.service.ts
So I checked the index.js file, if I could update the path to data.service.ts manually, but that's not possible as this is all that is in the index.js file:
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(require("./angular_compiler_plugin"));
__export(require("./interfaces"));
var loader_1 = require("./loader");
exports.default = loader_1.ngcLoader;
exports.NgToolsLoader = __filename;

TL;DR: Auto updating imports doesn't seem to work for nested Angular component folders and the error is useless. Check that those imports were updated correctly (anything in the _components folder in the poster's example).
I just ran into this same issue. I'm using the "Move TS" VSCode Extension, and it doesn't appear to update imports in components that are grouped by folders. For example, consider the following folder structure:
> Component 1
> Component 2
> Forms
      > Name Component
      > Email Component
> Services
api.service.ts
When I moved api.service.ts from its current location into the Services folder, the extension updated the imports in Component 1 and Component 2 correctly. However, it failed to update the imports in the Name Component and the Email Component correctly. I would guess the native VS Code "Update Imports" option has the same defect. So I would check your _components folder to ensure the imports were updated correctly.

We can move the services and components to desired folder. In Visual Studio Code after moving the component or service you would have to manually remove the initial imports and add than do Auto import from Source Action then it would update the dependencies correctly
Visual Studio Code does not seems to auto update the imports in this case.

The only way I think is to move the files in to desired location using any code editor(used vscode) and manually update the imports. VS code also takes care of GIT. If we do it from the folder structure I think we need to delete and add the file.

In VS code, you can simply rename the component to include the folder you want to use as a container and everything will be updated automatically.
Let's say you have some like:
And you want to move the component named 'single-value-card' to the 'visualization' folder.
Then all you have to do is to rename the component folder as shown:
And voilá:
Note: After renaming, VS Code will ask you if you want to apply the reference refactor. As I've answered 'Always apply the reference update' (or smth like that) it never asked me again

Ember Quickstart: Build Error when adding JS file to component

I just started using Ember. The next step in the Ember Quickstart tutorial is adding a JS file to a component:
In addition to the template, a component can also have a JavaScript
file [...]. Go ahead and create a .js file with the same name and in
the same directory as our template (app/components/people-list.js),
and paste in the following content:
I did that, but now I get a build error:
Build Error (broccoli-persistent-filter:TemplateCompiler)
EEXIST: file already exists, symlink '/var/folders/9f/hkp3jgh507ld849g376t8v9c0000gp/T/broccoli-68910fD325sz6drb3/out-131-broccoli_merge_trees_templates/ember-quickstart/templates/components/people-list.js' -> '/var/folders/9f/hkp3jgh507ld849g376t8v9c0000gp/T/broccoli-68910fD325sz6drb3/out-132-broccoli_persistent_filter_template_compiler/ember-quickstart/templates/components/people-list.js'
How do I get rid of this?

If I'm reading the error message correctly both you people-list.hbs and people-list.js files are in app/templates/components. In Ember Octane both files should be moved to app/components which is a new feature called component template colocation.
If that isn't the issue you may just need to restart the local ember server (though I haven't had to do that when adding a new js file for a component in the past.

Building vuejs application doesn't build relative file references correctly

When running : npm run build it generates a html file containing references to the generated scripts. However, the link looks like this :
/static/js/manifest.2ae2e69a05c33dfc65f8.js
There is no period at the beginning so I get errors in the console saying the files can't be found. When I manually add the period, it works fine. Where does this get generated from ?

Thanks to #Thoomas in the comments I figured out how to solve this issue.
In the index.js file under the config directory, I had to change the build.assetsPublicPath from '/' to './'.
This now builds with the correct relative paths.