Absolute path doesn't work, "Can't resolve" - javascript

So i tried to set up an absolute path for my project so I found out I need to make a .env file with following command:
NODE_PATH=src
Then I modified my import paths from './FileName' to 'FileName' ex.
import Root from 'views/Root/Root';
and run npm start command, then I got an error in terminal:
Failed to compile.
./src/index.js
Module not found: Can't resolve 'views/Root/Root' in 'C:\Users\hisza\Desktop\unnamed\src'
When I change to relative path, everything works with no errors, any ideas why I get that error?
I use create-react-app with eslint, nothing more


Okay I made it using jsconfig.json file instead of .env and everything works
jsconfig.js file is in my main folder and contains:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}

Related

Module not found: Can't resolve '#/styles/globals.scss'

This is the error message I am getting with my import statement for the scss file in my _app.tsx. How do I resolve this?
I am using Next.js & I've tried almost everything on the web

Make sure you have configured path aliases properly in the tsconfig.json file.
...
compilerOptions: {
...
baseUrl: '.',
...
}

Not able to absolute import in React Native project using babel-plugin-module-resolver

The file structure of my project is:
|--node_modules
|--src
|--App.js
|--Splash.js
I want to import Splash.js in App.js using absolute import.
So, I added babel-plugin-module-resolver and set up a babel.config.js with the following contents (followed How to enable jsconfig.json in react-native project):
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
["module-resolver", {
"root": ["./"]
}]
]
};
and App.js
import Splash from 'Splash.js';
Error in my console:
error: Error: Unable to resolve module Splash.js from C:\Users\<userName>\Desktop\<AppName>\App.js: Splash.js could not be found within the project or in these directories:
node_modules
Can anyone explain what is actually happening? How does baseUrl actually work? I am using it in a wrong way?

Vite build not finding third-party exports

I'm using vite/sveltekit and including a specific third party breaks my build but not my local version. What's the difference here ?
Context : I'm trying to include svelte-tel-input like this in my components:
import { TelInput, normalizedCountries } from 'svelte-tel-input'
When I do this, npm run dev works fine but npm run build gives me this error : EISDIR: illegal operation on a directory, read
Leads : This looks like a path resolution problem, it's not resolving to the index.js file but to the directory, during build, thus the EISDIR error. But the weird thing is that event importing svelte-tel-input/index.js doesn't work. Only the absolute path to the index file seems to work.
I don't understand because my third-party library has this specified in his package.json :
"svelte" : ".",
"license": "MIT",
"exports": {
"./package.json": "./package.json",
".": "./index.js"
}
So why can vite dev resolve the path of the module but not vite build ?
PS : it works if I remove the svelte: "." attribute of the third party's package.json but that's not a fix, I don't have control on this file as it is a dependency.

importing from shared module

I have a folder structure as follows
mainDirectory/
|_expoApp/
|_App.js
|_shared/
|_utils.js
Inside App.js I try to import from shared/utils.js with import {SomeClass} from "../shared/utils";
However, I get the error:
Unable to resolve "../shared/utils" from "App.js"
Building JavaScript bundle: error
So far, I've tried including a package.js file to the shared folder and then including it as a dependancy in expoApp's package.js but this doesn't resolve the problem.
Does anyone know how to import from shared folder correctly?

In the dependencies of "expoApp" folder, add in package.json:
"dependencies": {
"shared": "file:../shared/utils/"
}
Using:
import some from shared;

meteor-client-bundler with webpack __meteor_runtime_config__ is not defined

I am trying to use this with my webpack project
https://blog.meteor.com/leverage-the-power-of-meteor-with-any-client-side-framework-bfb909141008
but I get this error
ReferenceError: __meteor_runtime_config__ is not defined
Here are the steps I did
create a new meteor project
then I run the client bundler like this
meteor-client bundle —source=./ —destination=./meteor-client.bundle.js —config=meteor-client.config.json
and here is the config
{
"runtime": {
"DDP_DEFAULT_CONNECTION_URL": "http://localhost:3000"
},
"import": [
"meteor-base#1.3.0",
"mongo#1.4.2",
"reactive-var#1.0.11",
"jquery#1.11.10",
"tracker#1.1.3",
"shell-server#0.3.1",
"react-meteor-data"
]
}
then I copy my meteor-client.js to my webpack project node_modules
and import it like this
import 'meteor-client'
then I bundle webpack and run dev-server and I get the above mentioned error.

I had the same issue, and fixed that by putting my meteor-client.js to node_modules and exclude node_modules from processing by babel-loader with webpack (or you could just exclude meteor-client.js). Raw loading will workaround that.
In case someone still searching.

Categories

Resources