Failed to resolve babel plugin/preset paths with pnpm

[buffaybu]

Environment

• Linaria version: 2.0.2
• Bundler (+ version): Rollup 1.32.1
• Node.js version: 14.15.0
• OS: macOS 11.0.1

Description

When using pnpm as package manager and referencing another styled component in style, babel throws an error:

// .babelrc
{
  "presets": ["linaria/babel"]
}

// index.ts
import { styled } from 'linaria/react';
export const Foo = styled.div``;
export const Bar = styled.div`
  .${Foo} {
    color: red;
  }
`;

(babel plugin) Error: /path/to/project/src/index.tsx: An unexpected runtime error ocurred during dependencies evaluation: 
Error: Cannot find module '@babel/plugin-transform-runtime' from '/path/to/project'
    at Function.resolveSync [as sync] (/path/to/project/node_modules/.pnpm/resolve@1.19.0/node_modules/resolve/lib/sync.js:90:15)
    at resolveStandardizedName (/path/to/project/node_modules/.pnpm/@babel/core@7.12.3/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePlugin (/path/to/project/node_modules/.pnpm/@babel/core@7.12.3/node_modules/@babel/core/lib/config/files/plugins.js:54:10)
    at loadPlugin (/path/to/project/node_modules/.pnpm/@babel/core@7.12.3/node_modules/@babel/core/lib/config/files/plugins.js:62:20)
    at createDescriptor (/path/to/project/node_modules/.pnpm/@babel/core@7.12.3/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at /path/to/project/node_modules/.pnpm/@babel/core@7.12.3/node_modules/@babel/core/lib/config/config-descriptors.js:109:50
    at Array.map (<anonymous>)
    at createDescriptors (/path/to/project/node_modules/.pnpm/@babel/core@7.12.3/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPluginDescriptors (/path/to/project/node_modules/.pnpm/@babel/core@7.12.3/node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
    at /path/to/project/node_modules/.pnpm/@babel/core@7.12.3/node_modules/@babel/core/lib/config/config-descriptors.js:63:53

It may happen when your code or third party module is invalid or uses identifiers not available in Node environment, eg. window. 
Note that line numbers in above stack trace will most likely not match, because Linaria needed to transform your code a bit.

Cannot find module '@babel/plugin-transform-runtime' from '/path/to/project'

@babel/plugin-transform-runtime is a dependency of Linaria but not the app so this error seems fair. Either providing a full path or changing dirname to Linaria's may fix the problem.

I tried to replace babel plugin/preset name string in node_modules/linaria/lib/babel/evaluators/shaker/index.js with the resolved path by require.resolve and it worked:

transformOptions.presets.unshift(['@babel/preset-env', ...]);
transformOptions.presets.unshift([require.resolve('../preeval'), options]);
transformOptions.plugins.unshift('transform-react-remove-prop-types');
transformOptions.plugins.unshift(['@babel/plugin-transform-runtime', ...]);
// =>
transformOptions.presets.unshift([require.resolve('@babel/preset-env'), ...]);
transformOptions.presets.unshift([require.resolve('../preeval'), options]);
transformOptions.plugins.unshift(require.resolve('babel-plugin-transform-react-remove-prop-types'));
transformOptions.plugins.unshift([require.resolve('@babel/plugin-transform-runtime'), ...]);

Reproducible Demo

https://github.com/buffaybu/linaria-resolve-demo

pnpm install
pnpm build

[Anber]

Probably fixed in 3.0.0-beta.1