issue with ApolloProvider types on monorepo

[hemedani]

pnpm version:

 [I] ➜ pnpm -v
3.6.0

Code to reproduce the issue:

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById("root")
);

the actual file address on git repo is this : ./packages/sefood-tracing-fr/src/index.ts

the issue is it as say typescript :

JSX element type 'ApolloProvider<unknown>' is not a constructor function for JSX elements.
  Type 'ApolloProvider<unknown>' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.ts(2605)

Expected behavior:

detect the true type for ApolloProvider

Actual behavior:

Additional information:

I create a github repo to see the error in action

• node -v prints: v8.11.2
• Windows, OS X, or Linux?: OS X

[zkochan]

This is probably some bug with how pnpm creates the flat node_modules

[zkochan]

The issue is that currently shamefully-flatten does not work correctly with shared-workspace-lockfile (we'll need to add some error message to prevent confusion).

I have found 2 solutions for your problem:

1. fixing the dependencies of apollo-client

There are a few issues with apollo-client because it misses some deps.

Create the following pnpmfile.js in the root of your monorepo:

module.exports = {
    hooks: {
        readPackage (manifest) {
            switch (manifest.name) {
                case 'react-apollo':
                    manifest.dependencies['apollo-client'] = '^2.6.3' // taken from apollo-boost
                    manifest.peerDependencies['@types/react'] = '*'
                    break
            }
            return manifest
        }
    }
}

Run rm -rf node_modules pnpm-lock.yaml && pnpm m i. Issue solved

2. Don't use shared-workspace-lockfile

Add shared-workspace-lockfile = false to the .npmrc in the root of your monorepo. Remove pnpm-lock.yaml and node_modules from the root of your monorepo. Run pnpm m i. Issue solved.

[hemedani]

two solution working perfectly fine. which one is better

[zkochan]

The one with pnpmfile

…

On Sun, 28 Jul 2019, 14:56 SydAmir, ***@***.***> wrote: two solution working perfectly fine. which one is better — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1928?email_source=notifications&email_token=AAOWTG2RIAXQ2EPHGDEGNZDQBWCOXA5CNFSM4IGZLEJKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD265EII#issuecomment-515756577>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAOWTG3V5OJY7BPWD7CA3BTQBWCOXANCNFSM4IGZLEJA> .

[zkochan]

Seems like there's a 3rd solution and we can use it for a fix in pnpm. You can create an empty package.json in the root of the monorepo. no, this one doesn't work consistently

[VinceOPS]

Hi @zkochan! Sorry for raising this (old) issue. I'm encountering the exact same problem with pnpm 7.14.0 and workspaces.

With both ink-table (using react ink), on Table component, and nextjs (Head component).

I tried the "solution 1" you gave here (using .pnpmfile.cjs), but I'm still having this error from tsc.

Did I miss anything? Ready to try something else, if it can help diagnosing the issue.

Thanks!

---

EDIT - I understood the problem. It happes when a package has declared @types/react as a dev dependency but not as a peer dependency.
Solve it with .pnpmfile.cjs based on your "solution 1":

const readPackage = (package, context) => pipe(
  fixPnpmModulesFlattening(context),
)(package);

module.exports = {
  hooks: {
    readPackage
  }
}

const composerReducer = (f, g) => (arg) => g(f(arg));
const pipe = (...fns) => fns.reduce(composerReducer);

const fixPnpmModulesFlattening = (context) => (package) => {
  const addMissingPeerDependenciesTo = copyDevDependencyToPeerDependencies(context);
  return pipe(
    addMissingPeerDependenciesTo('@types/react', ['next', 'ink-table']),
    addMissingPeerDependenciesTo('ink', ['ink-testing-library']),
  )(package);
}

const copyDevDependencyToPeerDependencies = (context) => (dependencyName, targetPackages) => (currentPackage) => {
  if (
    !targetPackages.includes(currentPackage.name) ||
    !currentPackage.devDependencies ||
    !currentPackage.devDependencies[dependencyName] ||
    (currentPackage.peerDependencies && currentPackage.peerDependencies[dependencyName])
  ) {
    return currentPackage;
  }

  context.log(`[pnpm fix] Add ${dependencyName} as a peer dependency of ${currentPackage.name}`);
  currentPackage.peerDependencies = {
    ...currentPackage.peerDependencies,
    [dependencyName]: '*', // currentPackage.devDependencies[dependencyName],
  };
  currentPackage.peerDependenciesMeta = { 
    ...currentPackage.peerDependenciesMeta,
    [dependencyName]: { optional: true },
  };

  return currentPackage;
}