Skip to content
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

Absolute module imports through node_modules symlinks with Plug'n'Play #6616

Closed
msokk opened this issue Nov 1, 2018 · 5 comments
Closed
Assignees
Labels

Comments

@msokk
Copy link

msokk commented Nov 1, 2018

Do you want to request a feature or report a bug?
bug?

What is the current behavior?
We are using node_modules inside src folder for symlinking to have short absolute imports for commonly used folders:

src/
  types/
  node_modules/
    types/ (symlink)
    ...
  ...

With PnP this behaviour is lost:
Error: You cannot require a package ("types") that is not declared in your dependencies (via "src/api/client.ts")

Symlinks are a nice tool-agnostic way of enabling this, see Dan's comment - facebook/create-react-app#5136 (comment)

If the current behavior is a bug, please provide the steps to reproduce.

  1. Symlink some source file or folder to any node_modules folder
  2. Import that folder using absolute import
  3. Run the code

What is the expected behavior?
PnP should either provide a way to allow locally symlinked source folders through or
document migration path / alternatives.

One option would be to write all those imports to relative, as they are a bit magic - making it a bit hard to distinguish between published modules and local. Although in the project I'm testing PnP, there are a few thousand absolute imports.

@arcanis Any ideas?

Please mention your node.js, yarn and operating system version.
Node.js v10.13.0
Yarn v1.12.1 with --pnp enabled
macOS 10.12.6
Webpack 4.20.2
pnp-webpack-plugin 1.2.0
ts-loader 5.3.0

@ghost ghost assigned arcanis Nov 1, 2018
@ghost ghost added the triaged label Nov 1, 2018
@arcanis
Copy link
Member

arcanis commented Nov 1, 2018

I think what you're looking for is the link: protocol, which allows you to declare symlink dependencies.

@msokk
Copy link
Author

msokk commented Nov 1, 2018

Oh thanks, undocumented Yarn feature?
Shouldn't package.json be optional for link package per this - https://github.com/yarnpkg/yarn/blob/master/src/resolvers/exotics/link-resolver.js#L34?

@msokk
Copy link
Author

msokk commented Nov 1, 2018

Got past the linked dependencies with this but now failing with Babel plugins:

ERROR in ./src/client.tsx
Module build failed (from /Users/mihkel/Library/Caches/Yarn/v3/npm-babel-loader-8.0.4-7bbf20cbe4560629e2e41534147692d3fecbdce6/node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/plugin-syntax-jsx' from '/Users/mihkel/Projects/darwin-ui'
    at Function.module.exports [as sync] (/Users/mihkel/Library/Caches/Yarn/v3/npm-resolve-1.7.1-aadd656374fd298aee895bc026b8297418677fd3/node_modules/resolve/lib/sync.js:42:15)
    at resolveStandardizedName (/Users/mihkel/Library/Caches/Yarn/v3/npm-@babel-core-7.1.2-f8d2a9ceb6832887329a7b60f9d035791400ba4e/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePlugin (/Users/mihkel/Library/Caches/Yarn/v3/npm-@babel-core-7.1.2-f8d2a9ceb6832887329a7b60f9d035791400ba4e/node_modules/@babel/core/lib/config/files/plugins.js:54:10)
    at loadPlugin (/Users/mihkel/Library/Caches/Yarn/v3/npm-@babel-core-7.1.2-f8d2a9ceb6832887329a7b60f9d035791400ba4e/node_modules/@babel/core/lib/config/files/plugins.js:62:20)
    at createDescriptor (/Users/mihkel/Library/Caches/Yarn/v3/npm-@babel-core-7.1.2-f8d2a9ceb6832887329a7b60f9d035791400ba4e/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at items.map (/Users/mihkel/Library/Caches/Yarn/v3/npm-@babel-core-7.1.2-f8d2a9ceb6832887329a7b60f9d035791400ba4e/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/mihkel/Library/Caches/Yarn/v3/npm-@babel-core-7.1.2-f8d2a9ceb6832887329a7b60f9d035791400ba4e/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPluginDescriptors (/Users/mihkel/Library/Caches/Yarn/v3/npm-@babel-core-7.1.2-f8d2a9ceb6832887329a7b60f9d035791400ba4e/node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
    at alias (/Users/mihkel/Library/Caches/Yarn/v3/npm-@babel-core-7.1.2-f8d2a9ceb6832887329a7b60f9d035791400ba4e/node_modules/@babel/core/lib/config/config-descriptors.js:63:49)
 @ multi webpack-hot-middleware/client ./src/client.tsx app[1]

@msokk
Copy link
Author

msokk commented Nov 1, 2018

I'm running minimal configuration of babel for styled-components and hot loading:

      {
        test: /\.(ts|tsx)?$/,
        use: [
          { loader: 'ts-loader', options: PnpWebpackPlugin.tsLoaderOptions() },
          {
            loader: 'babel-loader',
            options: {
              plugins: [
                '@babel/plugin-syntax-jsx',
                ['@babel/plugin-syntax-typescript', { isTSX: true }],
                '@babel/plugin-syntax-dynamic-import',
                '@babel/plugin-proposal-optional-catch-binding',
                'babel-plugin-styled-components',
                'react-hot-loader/babel',
              ],
              cacheDirectory: true,
            },
          },
        ],
      },

Same happens when I move config out to .babelrc

EDIT: Looks like @babel/core relies on browserify/resolve, @arcanis is Babel 7 supported?

@msokk
Copy link
Author

msokk commented Nov 2, 2018

Ok, found the found the comment about facebook/create-react-app#5215 (comment) babel function config

@msokk msokk closed this as completed Nov 2, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants