Imports | Remix | Page 1

amber walrus Jan 19, 2024, 10:41 AM

#

If you’re doing standard remix v2 then you don’t import images you would specify the path to find the image in your public folder. You could also make a custom resource route to serve the image from a folder that isn’t public. As for the layout import, (assuming it’s a normal jsx or tsx file) I’m not certain what would be causing that other than a misconfigured project. Did you change any settings in your remix config or your package.json

sonic compass Jan 19, 2024, 10:43 AM

#

amber walrus If you’re doing standard remix v2 then you don’t import images you would specify...

At the start I didn't have remix.config file

#

my remix.config.js is just this:

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  appDirectory: "app",
};

amber walrus Jan 19, 2024, 10:45 AM

#

It might be an issue of the “/“ starting those file names. Try relative imports

#

But I’m so used to typescript path aliases that I could definitely be wrong there

#

But, at the very least a relative import should guarantee that you’re targeting correct and can check that it does work somehow

sonic compass Jan 19, 2024, 10:46 AM

#

well I would use relative imports but we are talking for many many folders

amber walrus Jan 19, 2024, 10:46 AM

#

Yes, it’s not ideal, but at least to confirm your project can import stuff and resolve the file on the other side

sonic compass Jan 19, 2024, 10:46 AM

#

At the beginning I had relative imports and it was working

amber walrus Jan 19, 2024, 10:47 AM

#

After which you can configure in your package.json and import alias

sonic compass Jan 19, 2024, 10:47 AM

#

how do I import alias?

amber walrus Jan 19, 2024, 10:49 AM

#

https://stackoverflow.com/questions/70158055/how-to-have-aliases-with-nodejs-import
I’m fuzzy on doing it in pure js, but this seems vaguely right. There’s a field in your package.json called imports (that by default is undefined) you then make an alias like you would in a tsconfig where you do an object
“My alias”: “./path/to/my/area”

Stack Overflow

How to have aliases with nodejs import

I have a project using node.js v16, and more and more npm libs are not anymore compatible with require, and need to be used with import.
Until now i was using package.json to have my root directory...

#

Here’s an example of how the epic stack does it:

"imports": {
"#": "./"
},

#

So then your import would be “#app/layouts/authentication/somecomponent”

sonic compass Jan 19, 2024, 10:53 AM

#

amber walrus So then your import would be “#app/layouts/authentication/somecomponent”

yeah did not work:

 info  built (11.8s)
node:internal/modules/esm/resolve:844
  throw new ERR_MODULE_NOT_FOUND(packageName, fileURLToPath(base), null);
        ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '~' imported from D:\MIXAHΛ\BOIK\MY-PG-REMIX\build\index.js
    at packageResolve (node:internal/modules/esm/resolve:844:9)
    at moduleResolve (node:internal/modules/esm/resolve:901:20)
    at defaultResolve (node:internal/modules/esm/resolve:1121:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

amber walrus Jan 19, 2024, 10:54 AM

#

Ah, I believe remix hijacks ~, so just get rid of the import I said and try ~ instead

#

I thought it only used ~ in typescript projects

#

Look for ~ usage in your project

sonic compass Jan 19, 2024, 10:55 AM

#

can I simple change the ~ to something else in my imports?

#

would that work

amber walrus Jan 19, 2024, 10:56 AM

#

If you did the import I suggested from the epic stack, all ~ would be changed to #

#

But I think the ~ is better especially if you develop on windows. I’m usually on Linux but I’ve used windows a little and it seems like windows likes to think # is the root directory of your system

sonic compass Jan 19, 2024, 10:58 AM

#

amber walrus But I think the ~ is better especially if you develop on windows. I’m usually on...

"imports": {
    "#/*": "./app/*"
  }

#

so you suggest this

amber walrus Jan 19, 2024, 10:59 AM

#

“#”: “./

sonic compass Jan 19, 2024, 10:59 AM

#

okay

amber walrus Jan 19, 2024, 11:00 AM

#

And then you need to change any reference to ~ in your imports to be “#/app/rest/of/path”

#

I believe remix aliases to what you suggested ./app/

#

So if you wanted it to better match ~

#

Then do “#” : “./app/“

#

But if you’re just matching ~ just use ~ instead imo

sonic compass Jan 19, 2024, 11:01 AM

#

amber walrus And then you need to change any reference to ~ in your imports to be “#/app/rest...

#

again didn't work like that

amber walrus Jan 19, 2024, 11:03 AM

#

I’m silly, you were right with the star after the # and /

#

Not sure why I dropped that…

#

"imports": {
"#": "./"
},

#

The copy paste gets rid of it on my screen… that’s why

#

Discord on phone is doing something weird

sonic compass Jan 19, 2024, 11:04 AM

#

so

amber walrus Jan 19, 2024, 11:05 AM

#

But do you see a star in that most recent imports paste?

sonic compass Jan 19, 2024, 11:05 AM

#

"imports": {
    "#/": "./"
  }

amber walrus Jan 19, 2024, 11:05 AM

#

“#”: “./”

#

The star is disappearing on discord mobile so it’s really confusing to me

#

Let me hop on an actual computer

sonic compass Jan 19, 2024, 11:06 AM

#

sure!

amber walrus Jan 19, 2024, 11:07 AM

#

"imports": {
    "#*": "./*"
  },

#

don't know why its so hard for discord on phone

sonic compass Jan 19, 2024, 11:07 AM

#

and I use #app/ etc

amber walrus Jan 19, 2024, 11:07 AM

#

yes

#

you could do:

"imports": {
    "#*": "./app/*"
  },

and then "#/components/auth/whatever"

#

whatever feels more natural

sonic compass Jan 19, 2024, 11:08 AM

#

new errors xD

amber walrus Jan 19, 2024, 11:08 AM

#

hopefully that gets it right for you, sorry for the confusion

#

well

sonic compass Jan 19, 2024, 11:09 AM

#

X [ERROR] Could not resolve "#app/components/map/click/SimpleClickControl"

    app/routes/map.jsx:21:31:
      21 │ ...eClickControl from "#app/components/map/click/SimpleClickControl";
         ╵                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The module "./app/components/map/click/SimpleClickControl" was not found on the file system:

    package.json:51:10:
      51 │     "#*": "./*"
         ╵           ~~~~~

  Import from ".jsx" to get the file "app/components/map/click/SimpleClickControl.jsx":

    app/routes/map.jsx:21:76:
      21 │ ...eClickControl from "#app/components/map/click/SimpleClickControl";
         │                                                                    ^
         ╵                                                                    .jsx

  You can mark the path "#app/components/map/click/SimpleClickControl" as external to exclude it from the bundle, which will remove this error.

amber walrus Jan 19, 2024, 11:09 AM

#

new errors might mean progress

#

oh, i wonder if you need to be in a module type package

#

what happens, if you replace all "#app" with just "~"

#

and remove the import section from your package.json

sonic compass Jan 19, 2024, 11:10 AM

#

already did ~ is not a package

#

i found a way kind

#

wait

#

when I do

#

    "#*": "./*.jsx",

#

it find everything but not the folders and css

#

so I need to add different app for css and folder

amber walrus Jan 19, 2024, 11:12 AM

#

then add "*.**" i believe

sonic compass Jan 19, 2024, 11:12 AM

#

and different path for jsx

amber walrus Jan 19, 2024, 11:13 AM

#

i guess in a js project you need to specify the file type endings you want?

#

or maybe in a non module package.json thats the case?

sonic compass Jan 19, 2024, 11:14 AM

#

amber walrus then add "*.**" i believe

well still doesn't find the css and the folders

amber walrus Jan 19, 2024, 11:14 AM

#

alright, try adding:

 "type": "module",

#

it could break everything though

#

since module resolution is different

sonic compass Jan 19, 2024, 11:15 AM

#

already there

amber walrus Jan 19, 2024, 11:16 AM

#

thats surprising that it's giving that weird package resolution then...
try:

"#*": "./*.{jsx,css,js}",

sonic compass Jan 19, 2024, 11:17 AM

#

I dont expect from it to find the folder but I expect it to find all other files so let me try

#

yeah it does not work

#

xD

amber walrus Jan 19, 2024, 11:18 AM

#

oh waittttt

#

if you're forced to say file extensions

#

then I think you need to say folder traversing too. so that should be:

"#*": "./**/*.{jsx,css,js}",

#

** matches further folders,

sonic compass Jan 19, 2024, 11:20 AM

#

yea didn't work

amber walrus Jan 19, 2024, 11:20 AM

#

thats super strange...

sonic compass Jan 19, 2024, 11:20 AM

#

yeah...

amber walrus Jan 19, 2024, 11:21 AM

#

I've used this stack in the past, but it's all in typescript so I'm not sure how it effects everything:
https://github.com/epicweb-dev/epic-stack/blob/main/package.json
But they don't use tsconfig paths and instead do the package.json way of setting up an import alias

GitHub

epic-stack/package.json at main · epicweb-dev/epic-stack

This is a Full Stack app starter with the foundational things setup and configured for you to hit the ground running on your next EPIC idea. - epicweb-dev/epic-stack

#

but their alias is just what i first typed

#

"type": "module",
  "imports": {
    "#*": "./*"
  },

#

and you can see them using it all throughout the repo

#

https://nodejs.org/api/packages.html#subpath-imports
According to this, it should just be able to pick up on your files even nested in folders

sonic compass Jan 19, 2024, 11:29 AM

#

hmmm

#

weird then

amber walrus Jan 19, 2024, 11:29 AM

#

anyway, I've got to go, but hopefully you can get it working right. If all else fails I'd just get rid of the imports field in your package.json and try using "~" imports

#

cause I believe remix supports that out of the box

sonic compass Jan 19, 2024, 11:30 AM

#

I AM GOD

#

I FOUND A SOLUTION

#

"imports": {
    "#*": "./*",
    "#j/*": "./app/*.jsx"
  }

#

best solution ever

amber walrus Jan 19, 2024, 11:32 AM

#

it works!

#

glad you got it

sonic compass Jan 19, 2024, 11:32 AM

#

amber walrus glad you got it

yes but I have new errors

#

 info  building...
X [ERROR] panic: runtime error: invalid memory address or nil pointer dereference (while parsing "app/routes/login.jsx")

  debug.Stack (runtime/debug/stack.go:24)
  helpers.PrettyPrintedStack (internal/helpers/stack.go:9)
  bundler.parseFile.func1 (internal/bundler/bundler.go:189)
  panic (runtime/panic.go:884)
  resolver.resolverQuery.finalizeImportsExportsResult (internal/resolver/resolver.go:2390)
  resolver.resolverQuery.loadPackageImports (internal/resolver/resolver.go:2002)
  resolver.resolverQuery.loadNodeModules (internal/resolver/resolver.go:2083)
  resolver.resolverQuery.resolveWithoutRemapping (internal/resolver/resolver.go:903)
  resolver.resolverQuery.resolveWithoutSymlinks (internal/resolver/resolver.go:890)
  resolver.(*Resolver).Resolve (internal/resolver/resolver.go:505)
  bundler.RunOnResolvePlugins (internal/bundler/bundler.go:863)
  bundler.parseFile (internal/bundler/bundler.go:393)
  bundler.(*scanner).maybeParseFile (internal/bundler/bundler.go:1360)

amber walrus Jan 19, 2024, 11:35 AM

#

well thats terrible

#

esbuild having trouble is a lot scarier

sonic compass Jan 19, 2024, 11:36 AM

#

amber walrus esbuild having trouble is a lot scarier

esbuild?

#

oof

amber walrus Jan 19, 2024, 11:36 AM

#

yea, thats what remix uses by default as its build tool under the hood

#

so when you run dev or build from remix, it calls esbuild to do that

#

theyre kinda moving to vite

#

but its still unstable

sonic compass Jan 19, 2024, 11:37 AM

#

oh okay

amber walrus Jan 19, 2024, 11:37 AM

#

i mean

#

if you want, you could try the unstable_vite

sonic compass Jan 19, 2024, 11:37 AM

#

well the file doesn't have an error

amber walrus Jan 19, 2024, 11:37 AM

#

maybe it will solve things

#

but theres a few difference in the project setup there

#

I don't really recommend vite unless you really like it and are more comfortable with it

#

but right now the unstable implementation means it's less smooth than out of the box remix. But out of the box remix seems to be failing your right now...

sonic compass Jan 19, 2024, 11:39 AM

#

I don't know how to use vite

amber walrus Jan 19, 2024, 11:39 AM

#

yea, then just disregard my vite mention

sonic compass Jan 19, 2024, 11:39 AM

#

sonic compass ```bash info building... X [ERROR] panic: runtime error: invalid memory addres...

is this based on file error or something else?

amber walrus Jan 19, 2024, 11:40 AM

#

So, I'm not positive. What I think might be happening, is that node is correctly resolving the filepath, but then passing app/routes/login to esbuild, and then esbuild struggles to find that file

#

do you have an import app/routes/login.jsx somewhere in your project?

#

or is it aliased?

#

also can you just paste your package.json as a whole so I can see what version of remix and such you got

sonic compass Jan 19, 2024, 11:42 AM

#

amber walrus do you have an import `app/routes/login.jsx` somewhere in your project?

yes 100%

#

oh no I found the issue all the components I use is react I forgot to make them remix

amber walrus Jan 19, 2024, 11:44 AM

#

what exactly do you mean by make them remix?

#

it should be almost if not entirely 1:1 with a normal react app. just routes are determined by the name of your files

sonic compass Jan 19, 2024, 11:44 AM

#

well some stuff changes like I need to export links and other stuff

amber walrus Jan 19, 2024, 11:45 AM

#

yea, but if a file doesnt export a links, meta, loader, or action file it should still work fine

#

the only thing thats important in remix is for a file in the routes directory to export default a react component

sonic compass Jan 19, 2024, 11:46 AM

#

also I need to fix the imports as well of the components that uses jsx to the #j/

amber walrus Jan 19, 2024, 11:47 AM

#

app/routes/MyRoute.jsx:

  export default function MyRoute(){
  return( <div>
      <h1>My Route</h1>
  </div>
};

would then make MyRoute good in the browser.
But yes based on your alias you probably do need to change the imports for jsx files in particular

sonic compass Jan 19, 2024, 11:49 AM

#

yes

amber walrus Jan 19, 2024, 11:50 AM

#

well, good luck man

#

hope you can get it working

#Imports