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

[msokk]

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

[arcanis]

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

[msokk]

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]

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/[email protected]/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePlugin (/Users/mihkel/Library/Caches/Yarn/v3/[email protected]/node_modules/@babel/core/lib/config/files/plugins.js:54:10)
    at loadPlugin (/Users/mihkel/Library/Caches/Yarn/v3/[email protected]/node_modules/@babel/core/lib/config/files/plugins.js:62:20)
    at createDescriptor (/Users/mihkel/Library/Caches/Yarn/v3/[email protected]/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at items.map (/Users/mihkel/Library/Caches/Yarn/v3/[email protected]/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/mihkel/Library/Caches/Yarn/v3/[email protected]/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPluginDescriptors (/Users/mihkel/Library/Caches/Yarn/v3/[email protected]/node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
    at alias (/Users/mihkel/Library/Caches/Yarn/v3/[email protected]/node_modules/@babel/core/lib/config/config-descriptors.js:63:49)
 @ multi webpack-hot-middleware/client ./src/client.tsx app[1]

[msokk]

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]

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