import error?

[JonTron1987]

Greetings, I am new to Remix. I am currently learning the framework. I am stuck at the routing pages part. I get an error when trying to import from react:

I have tried npm add @babel/runtime, deleting node_modules and reinstalling, etc. Nothing appears to work. What can I do to fix the bug?

[silvenon]

This looks like an ESLint error, not an error while actually running Remix, correct? What is your ESLint configuration?

[JonTron1987]

hm...let me check that out. I am still learning this so that would be in the .eslint folder correct? I seem to have a lot of the same files in different folders...I used the auto-generating npm command to build the template.

[silvenon]

You don't have to mark my questions as the answer to your question. I only posted them as an answer because GitHub doesn't yet have the feature to post comments under your question. Let's figure this out. (I'll post comments under your answer below.)

[JonTron1987]

ah, I hit that by accident.

[JonTron1987]

Okay this is my .eslint.js folder:

and now it is getting an error in the comments...:

strange because the server still runs perfectly...or so it was. Could this be a bug with visual studio code or Remix?

[camjackson]

Ah good point, I'm forgetting that it doesn't need to be hoisted and that it can just be within the node_modules of the package that needs it.

It's definitely not an editor issue, I've been running eslint from my terminal using yarn lint, which does this command:

eslint --cache --cache-location ./node_modules/.cache/eslint .

I'm running node v18.0.0, and yarn 1.22.17. I'm not using the newer plug'n'play or zero-install features, and I'm not using yarn workspaces, lerna or any other monorepo tool.

Here's a theory... What if there's some library somewhere in the dependency tree which needs @babel/preset-react, but has not listed it as a dependency? It could be that:

Before the upgrade:

• Two different packages depended on the same version of @babel/preset-react
• Therefore, @babel/preset-react got hoisted into the top-most node_modules
• So the offending library was still able to load its missing dependency

After the upgrade:

• Every package that depends on @babel/preset-react needs a different version
• Therefore, @babel/preset-react is not hoisted, each package gets its own local copy in its nested node_modules
• So the offending library now fails to load its missing dependency

That could be it? It would need a bit of untangling to confirm if that's the problem and then to find the culprit if that is the case.

[silvenon]

Your setup sounds standard and straightforward. And regarding the possibility about a library which doesn't list it as a dependency, I don't see how that would case this error. 😔

Does this happen in a new Remix project, or is there something specific to your setup?

[camjackson]

I don't see how that would case this error.

I was thinking there could be a library that that is importing the babel preset without listing it as a dependency. So it's basically an un-declared peer dependency. It will work if the babel preset happens to be in your top-level node_modules anyway, either because a) you install the babel preset as a direct dependency, which is what I've done, or b) you have some other dependencies that depend on the babel preset in such a way that it gets hoisted.

If neither of those things is true then the babel preset won't be in the node_modules and so the offending library will get an import error.

I created a fresh grunge app a couple of months ago, with an older remix version (1.4 I think) and it wasn't a problem. It was only upgrading to remix 1.6 that it started happening. I've just created a fresh grunge app, which is now on 1.6.1 by default, and it works fine. And the babel preset has been hoisted again.

Given that it seems to work fine out of the box now, it's probably not really worth anyone spending any more time on this unless a bunch of people start reporting it. It must just be some pathological combination of dependencies that causes it, and there's a simple enough work-around.

[silvenon]

Given that it seems to work fine out of the box now, it's probably not really worth anyone spending any more time on this unless a bunch of people start reporting it. It must just be some pathological combination of dependencies that causes it, and there's a simple enough work-around.

You're right, I just get really curious about these things. 🤓 It's great that you found a workaround!

[camjackson]

Yeah I would love to know what the root cause is, but my patience for investigating it further has run out 😅

[JonTron1987]

Ah, yeah that is when it started for me too...I kind of figured that was the case, but because I am a beginner and learning Remix I was not certain for sure. Oh, I have a suggestion to the devs who made this; it would be cool if you guys can do a live twitch or Youtube howto for beginners Remix. The remix is a little different from React. Some people get more from actually coding alongside someone than by reading documentation. I am one of them. There is very little streams on this framework right now as it is new correct? On Wednesday, June 22, 2022, 09:49:26 AM EDT, Cam Jackson ***@***.***> wrote: For the life of me I cannot figure out why upgrading that one package version causes the babel preset to go missing from node_modules despite still being listed in the yarn.lock. It's bizarre. I do know that when I explicitly install it by doing yarn add -D @babel/preset-react, the problem goes away. So that's at least a work-around for now. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>