New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Babel can not resolve plugins in parent folder with yarn workspaces #6342

Closed
MarkKahn opened this Issue Sep 29, 2017 · 6 comments

Comments

Projects
None yet
6 participants
@MarkKahn

MarkKahn commented Sep 29, 2017

See yarnpkg/yarn#4503 for the issue filed against yarn, but there is discussion there that yarn is not responsible so I'm opening one here as well.

In short, yarn workspaces can cause babel-plugins to be installed outside of the project root so babel is unable to resolve them properly. It's arguable that babel should look above the project root in other node_modules folders for plugins.

@babel-bot

This comment has been minimized.

Show comment
Hide comment
@babel-bot

babel-bot Sep 29, 2017

Collaborator

Hey @zyklus! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

Collaborator

babel-bot commented Sep 29, 2017

Hey @zyklus! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

@loganfsmyth

This comment has been minimized.

Show comment
Hide comment
@loganfsmyth

loganfsmyth Sep 29, 2017

Member

Can you add a descriptive example of what directory structure isn't working, and how you've configured Babel?

Member

loganfsmyth commented Sep 29, 2017

Can you add a descriptive example of what directory structure isn't working, and how you've configured Babel?

@xtuc xtuc added the Needs Info label Oct 4, 2017

@babel-bot

This comment has been minimized.

Show comment
Hide comment
@babel-bot

babel-bot Oct 4, 2017

Collaborator

Hi @zyklus! A maintainer of the project has notified me that you're missing
some information we'll need to replicate this issue.

Please understand that we receive a high volume of issues, and there are only a limited number
of volunteers that help maintain this project. The easier it is for us to decipher an issue with the info provided,
the more likely it is that we'll be able to help.

Please make sure you have the following information documented in this ticket:

  1. Your Babel configuration (typically in the form of a .babelrc)
  2. The current (incorrect) behavior you're seeing
  3. The behavior you expect
  4. A short, self-contained example

Please provide either a link to the problem via the repl, or if the repl is insufficient,
a new and minimal repository with instructions on how to build/replicate the issue.

Collaborator

babel-bot commented Oct 4, 2017

Hi @zyklus! A maintainer of the project has notified me that you're missing
some information we'll need to replicate this issue.

Please understand that we receive a high volume of issues, and there are only a limited number
of volunteers that help maintain this project. The easier it is for us to decipher an issue with the info provided,
the more likely it is that we'll be able to help.

Please make sure you have the following information documented in this ticket:

  1. Your Babel configuration (typically in the form of a .babelrc)
  2. The current (incorrect) behavior you're seeing
  3. The behavior you expect
  4. A short, self-contained example

Please provide either a link to the problem via the repl, or if the repl is insufficient,
a new and minimal repository with instructions on how to build/replicate the issue.

@loganfsmyth

This comment has been minimized.

Show comment
Hide comment
@loganfsmyth

loganfsmyth Oct 23, 2017

Member

Closing since we don't have any way to address this without a working example. Happy to reopen if we get that.

Member

loganfsmyth commented Oct 23, 2017

Closing since we don't have any way to address this without a working example. Happy to reopen if we get that.

@matiasfh

This comment has been minimized.

Show comment
Hide comment
@matiasfh

matiasfh Jan 31, 2018

@loganfsmyth I think that the issue that I just found can be related.

I have a monorepo project using yarn workspaces with the following structure:

|-- package.json
|-- packages
|---- shared
|------ components
|------ utils
|---- web
|------ app
|------ otherPackage

The app package is the main entry of the whole app and you fire up that with nextjs using $(npm bin)/next packages/web/app/src to allow next to find the pages folder.

inside packages/web/app/src next will found .babelrc and next.config.js

The .babelrc file is

{
   "presets":[
      "next/babel",
      "react-app"
   ],
   "plugins":[
      [
         "emotion",
         {
            "sourceMap":true,
            "autoLabel":true
         }
      ],
      "syntax-dynamic-import",
      [
         "import-inspector",
         {
            "serverSideRequirePath":true
         }
      ],
      "transform-flow-strip-types"
   ],
   "env":{
      "test":{
         "plugins":[
            "transform-react-jsx-source"
         ]
      },
      "production":{
         "plugins":[
            [
               "emotion",
               {
                  "hoist":true
               }
            ]
         ]
      }
   }
}

The main page of the package app is importing a component from packages/shared/components (this package is called like @org/styleguide) as import { ComponentA } from '@org/styleguide'. This package is just source code (es5) with a main entry that export everything that is shared.

When running next, an error arise related with transpilation.
SyntaxError: Unexpected token import in the file that is been imported by app

So, as far as I understand:

  1. next is building the app using the local .babelrc file that is available in packages/web/app/src
  2. babel-loader is only transpiling the code that belongs to that folder and nothing that comes from outside get's tranpiled.

Is there any solution (even if it's hacky) for something like this? or is this the expected behavior of babel-loader and is more a problem for nextjs guys?

matiasfh commented Jan 31, 2018

@loganfsmyth I think that the issue that I just found can be related.

I have a monorepo project using yarn workspaces with the following structure:

|-- package.json
|-- packages
|---- shared
|------ components
|------ utils
|---- web
|------ app
|------ otherPackage

The app package is the main entry of the whole app and you fire up that with nextjs using $(npm bin)/next packages/web/app/src to allow next to find the pages folder.

inside packages/web/app/src next will found .babelrc and next.config.js

The .babelrc file is

{
   "presets":[
      "next/babel",
      "react-app"
   ],
   "plugins":[
      [
         "emotion",
         {
            "sourceMap":true,
            "autoLabel":true
         }
      ],
      "syntax-dynamic-import",
      [
         "import-inspector",
         {
            "serverSideRequirePath":true
         }
      ],
      "transform-flow-strip-types"
   ],
   "env":{
      "test":{
         "plugins":[
            "transform-react-jsx-source"
         ]
      },
      "production":{
         "plugins":[
            [
               "emotion",
               {
                  "hoist":true
               }
            ]
         ]
      }
   }
}

The main page of the package app is importing a component from packages/shared/components (this package is called like @org/styleguide) as import { ComponentA } from '@org/styleguide'. This package is just source code (es5) with a main entry that export everything that is shared.

When running next, an error arise related with transpilation.
SyntaxError: Unexpected token import in the file that is been imported by app

So, as far as I understand:

  1. next is building the app using the local .babelrc file that is available in packages/web/app/src
  2. babel-loader is only transpiling the code that belongs to that folder and nothing that comes from outside get's tranpiled.

Is there any solution (even if it's hacky) for something like this? or is this the expected behavior of babel-loader and is more a problem for nextjs guys?

@zvictor

This comment has been minimized.

Show comment
Hide comment
@zvictor

zvictor Feb 22, 2018

@matiasfh my nextjs project has a different structure, but it also faces an issue with next/babel combined with yarn workspaces. Nextjs runs fine, but when I try to run tests from ava it can't find the preset.

Is there any solution (even if it's hacky) for something like this?

for now I am defining { presets: ['@ava/stage-4', '../node_modules/next/babel'] } in testing mode.

I wonder, though, who should we report this to. Nextjs, babel or yarn? 😅

zvictor commented Feb 22, 2018

@matiasfh my nextjs project has a different structure, but it also faces an issue with next/babel combined with yarn workspaces. Nextjs runs fine, but when I try to run tests from ava it can't find the preset.

Is there any solution (even if it's hacky) for something like this?

for now I am defining { presets: ['@ava/stage-4', '../node_modules/next/babel'] } in testing mode.

I wonder, though, who should we report this to. Nextjs, babel or yarn? 😅

@lock lock bot added the outdated label May 24, 2018

@lock lock bot locked as resolved and limited conversation to collaborators May 24, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.