fail to resolve packages imported from another package in a monorepo #429

emilgpa · 2024-01-27T22:39:22Z

file located in monorepo/ui/components/Example/Example.tsx

import stylex from "@stylexjs/stylex"

const styles = stylex.create({
    base: {
        borderRadius: 40,
    },
})

export const Example = () => {
    return (
        <div {...stylex.props(styles.base)}>
            <h1>Example</h1>
        </div>
    )
}

file located in monorepo/web/src/root-layout.tsx

import { Example } from "@my-org/ui/components/Example/Example"
import stylex from "@stylexjs/stylex"

const styles = stylex.create({
    base: {
        padding: 10,
    },
})

export const RootLayout = async ({ children }: RootLayoutProps) => {
    return (
        <div id="__waku">
            <Header />
            <main>
                  <Example />
                  <div {...stylex.props(styles.base)}>
                      {children}
                  </div>
            </main>
            <Footer />
        </div>
    )
}

When load the page in browser I get the follow error:

Error: Error: Failed to load url ../../@stylexjs/stylex (resolved id: ../../@stylexjs/stylex) in ...

In this example I use stylex but It occurs with any external packages. The external package in the same package works but if it is loaded from another package in the same monorepo then it fails with that message error.

The text was updated successfully, but these errors were encountered:

dai-shi · 2024-01-27T23:29:17Z

So, is this an issue that happens only with monorepo?
@himself65 do you have any insight?

himself65 · 2024-01-27T23:50:34Z

What package manager are you using? and what's your vite config

emilgpa · 2024-01-28T00:09:01Z

@himself65 I'm using pnpm and the vite.config.js is:

import path from "node:path"
import url from "node:url"
import { defineConfig } from "vite"
import { stylexPlugin } from "vite-plugin-stylex-dev"
import tsconfigPaths from "vite-tsconfig-paths"

const workspacesRoot = path.resolve(
    path.dirname(url.fileURLToPath(import.meta.url)),
    "..",
)

export default defineConfig(({ mode }) => {
    return {
        plugins: [
            tsconfigPaths({
                projects: [
                    "./tsconfig.json",
                    "../browser-api/tsconfig.json",
                    "../browser-lib/tsconfig.json",
                    "../browser-ui/tsconfig.json",
                ],
            }),
            stylexPlugin({
                unstable_moduleResolution: {
                    type: "commonJS",
                    rootDir: workspacesRoot,
                },
            }),
        ],
    }
})

himself65 · 2024-01-28T00:16:46Z

what is unstable_moduleResolution here?

emilgpa · 2024-01-28T00:22:48Z

it is for to configure for looking styles of stylex from the root of monorepo but I think that it is maybe unnecessary. Anyway, I did test removing that but unfortunately the error persists.

himself65 · 2024-01-28T00:24:34Z

Is there any code for reproduction? I'm guessing there is some issue with vite

emilgpa · 2024-01-28T00:42:34Z

While I was preparing a repo for you to try, I already know what causes it.
In the tsconfig.json of the the package consumed (in this example, ui) by the other package (in this example, web) is set the property baseUrl to ".". The tsconfig.json is:

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "alwaysStrict": true,
        "preserveConstEnums": true,
        "strictNullChecks": true,
        "strict": true,
        "sourceMap": true,
        "paths": {
            "@/*": ["./*"]
        },
        "module": "esnext",
        "moduleResolution": "Bundler",
        "target": "esnext",
        "baseUrl": ".", // <--- problem here!!
        "jsx": "react-jsx",
        "lib": ["DOM", "DOM.Iterable", "ESNext"],
        "allowJs": false,
        "experimentalDecorators": true,
        "esModuleInterop": false,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "skipLibCheck": false,
        "allowSyntheticDefaultImports": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true
    },
    "include": ["**/*.ts", "**/*.tsx"]
}

If you want the repository anyway, tell me and I'll upload it.

emilgpa · 2024-01-28T01:19:43Z

Hi again @himself65. I have another problem related to monorepo, maybe is different to this issue so if you want I open another issue, tell me and I will do it. The problem is that if I import "react" from another package in a monorepo setup then throws the follow error:

Error: SyntaxError: [vite] Named export 'useEffect' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const {useEffect} = pkg;

The configuration is the same but futhermore of import "stylex" now this component import "react" too.

himself65 · 2024-01-28T02:17:41Z

Hi again @himself65. I have another problem related to monorepo, maybe is different to this issue so if you want I open another issue, tell me and I will do it. The problem is that if I import "react" from another package in a monorepo setup then throws the follow error:
Error: SyntaxError: [vite] Named export 'useEffect' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const {useEffect} = pkg;
The configuration is the same but futhermore of import "stylex" now this component import "react" too.

vite specific issue, toeverything/blocksuite#304

himself65 · 2024-01-28T02:18:09Z

My suggestion to fix this to use resolve.alias

Aslemammad · 2024-03-27T14:40:48Z

@emilgpa I think the last version of waku might resolve this. Let us know.

emilgpa · 2024-03-28T01:24:23Z

@Aslemammad I get the same error in console. In the browser is: SyntaxError: Unexpected token ':', ":after {" is not valid JSON (from react-server-dom-webpack_client.js)

Aslemammad · 2024-03-28T01:56:09Z

Ok, I'll check this today! Can you prepare a reproduction meanwhile (preferably Stackblitz)?

emilgpa · 2024-03-28T02:37:34Z

ok: https://stackblitz.com/edit/vitejs-vite-u8veim

Aslemammad · 2024-03-28T14:38:35Z

The issue is (which I don't know if it's your configuration that causes it, or waku or even vite) but:

"use client"

import stylex from "@stylexjs/stylex"
import React from "react"
console.log('React', React)

const styles = stylex.create({
    base: {
        color: "red"
    }
})

And it logs React, but the rsc one:

React {
  Children: {
    map: [Function: mapChildren],
    forEach: [Function: forEachChildren],
    count: [Function: countChildren],
    toArray: [Function: toArray],
    only: [Function: onlyChild]
  },
  Fragment: Symbol(react.fragment),
  Profiler: Symbol(react.profiler),
  StrictMode: Symbol(react.strict_mode),
  Suspense: Symbol(react.suspense),
  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
    ReactCurrentDispatcher: { current: null },
    ReactCurrentOwner: { current: null },
    ReactDebugCurrentFrame: {
      setExtraStackFrame: [Function (anonymous)],
      getCurrentStack: null,
      getStackAddendum: [Function (anonymous)]
    }
  },
  __SECRET_SERVER_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: { ReactCurrentCache: { current: null } },
  cache: [Function: cache],
  cloneElement: [Function: cloneElement],
  createElement: [Function: createElement],
  createRef: [Function: createRef],
  forwardRef: [Function: forwardRef],
  isValidElement: [Function: isValidElement],
  lazy: [Function: lazy],
  memo: [Function: memo],
  startTransition: [Function: startTransition],
  use: [Function: use],
  useCallback: [Function: useCallback],
  useDebugValue: [Function: useDebugValue],
  useId: [Function: useId],
  useMemo: [Function: useMemo],
  version: '18.3.0-canary-670811593-20240322'
}

So there's no useEffect for the Heading.tsx component.

Maybe Waku has a problem identifying Client components outside of the root.

I have to not that this issue consists of two sub-issues.
1- React is not being optimized (solution: using default export, which is not a good solution, but a temporary one)
2- After using the temporary solution, waku has hard time identifying Heading.tsx as a client component.

dai-shi · 2024-03-28T23:24:36Z

Thanks for the investigation. I would like to understand the condition better:

Is this monorepo only issue? -> YES
Is this DEV only issue?
Is this PRD only issue?
Is this an issue without SSR? (It's not easy to test.)

Aslemammad · 2024-03-29T17:01:17Z

It happens on DEV and PRD too.

dai-shi · 2024-04-01T02:34:59Z

1- React is not being optimized (solution: using default export, which is not a good solution, but a temporary one)

Not sure, but may or may not be related: #633 (comment)

(edit) it isn't related.

It happens on DEV and PRD too.

Confirmed.

dai-shi · 2024-04-01T03:09:02Z

Is this an issue without SSR? (It's not easy to test.)

Yes, it's an issue with RSC.

dai-shi · 2024-04-02T11:11:12Z

For waku build, there are two issues:

2a- With stylex plugin, it fails to transform client components
2b- Even if it's solved, react-server-dom-webpack can't be imported in ui because it's not installed.

I think it applies to DEV too, so it's basically "2- After using the temporary solution, waku has hard time identifying Heading.tsx as a client component." split into two issues.

dai-shi · 2024-04-02T12:47:26Z

2a- With stylex plugin, it fails to transform client components

#646 should fix it.

dai-shi · 2024-04-02T12:58:57Z

What's remaining:

1- React is not being optimized (solution: using default export, which is not a good solution, but a temporary one)

It's probably a dev only issue.

2b- Even if it's solved, react-server-dom-webpack can't be imported in ui because it's not installed.

It's probably a bundling issue.

pmelab · 2024-04-28T19:37:29Z

Not sure if this is related (or if its even a bug): Our setup is a monorepo with a react ui library shared between multiple applications. When trying to import a component marked with 'use client' into the Waku app, it fails. I had to add react-server-dom-webpack as a dependency to the ui libary to resolve it.

When trying to reproduce the same scenario in the Waku monorepo, it failed with the very clear error message (#684):

[vite]: Rollup failed to resolve import "react-server-dom-webpack/server" from "/Users/runner/work/waku/waku/e2e/fixtures/ui-library/index.js".

I the project setup though, it failed much more cryptic message spotted in #676

TypeError: Cannot read properties of null (reading 'use')
    at react_production_min.use ([...]/waku-test/dist/ssr/assets/rsc0-b97afaf68.js:324:22)
    at Slot ([...]/waku-test/dist/ssr/assets/rsc0-b97afaf68.js:10168:40)

That makes me think this line ...

waku/packages/waku/src/lib/plugins/vite-plugin-rsc-transform.ts

Line 71 in 738ea78

    
           /^import {registerClientReference} from "react-server-dom-webpack\/server";/.test(

... can cause havoc in monorepos because it relies on react-server-dom-webpack being in a parent node_modules folder?

dai-shi · 2024-04-28T22:53:10Z

because it relies on react-server-dom-webpack being in a parent node_modules folder?

I'm aware it's a brittle hack. You can confirm if it causes the error by looking at your code in dist.

pmelab · 2024-04-29T03:23:34Z

I'm aware it's a brittle hack. You can confirm if it causes the error by looking at your code in dist.

In the first case, there is no dist because rollup immediately breaks.

And in the second, I don't have proof. All I know is that it went away with adding the dependency. And the error message from #676 ...

TypeError: Cannot read properties of null (reading 'use')
    at react_production_min.use ([...]/waku-test/dist/ssr/assets/rsc0-b97afaf68.js:324:22)
    at Slot ([...]/waku-test/dist/ssr/assets/rsc0-b97afaf68.js:10168:40)

... seems to be related to the ReactCurrentDispatcher not being initialized. Maybe a broken import that is silently ignored and returns undefined?

Maybe we can resolve to the absolute path of the package first and import from there?

pmelab · 2024-04-29T04:22:03Z

... seems to be related to the ReactCurrentDispatcher not being initialized.

After writing this, I realized that this could be pnpm resolving to two different react packages on disk. Maybe no relation after all.

himself65 · 2024-06-05T19:52:06Z

Here is a fixed version (https://github.com/himself65/waku-monorepo-example)

I think the reason is vite threat them as two module and cause some bundle issues

himself65 · 2024-06-06T18:03:18Z

I think we can close this issue since https://github.com/himself65/waku-monorepo-example has fixed it

for #676, I think this is a separate issue

/cc @dai-shi

dai-shi · 2024-06-09T11:39:12Z

I think we can close this issue since https://github.com/himself65/waku-monorepo-example has fixed it

@himself65 What's the tldr of the fix?

himself65 · 2024-06-12T03:33:56Z

making sure react, react-dom and react-dom-server-webpack is installed and keeping the same version

himself65 · 2024-06-12T03:34:31Z

making sure react, react-dom and react-dom-server-webpack is installed and keeping the same version

Otherwise package manager will link them in different directories and cause the bundler make them different

emilgpa · 2024-06-12T04:19:25Z

@himself65 It's strange because the link I posted at the time with the monorepo as an example has the same version in react, react-dom and react-dom-server-webpack.

The diff that I see is:

react 19
new version waku
not exports property in ui package
module as nodenext in tsconfig of web package

And maybe another thing. Maybe is something of this list?

emilgpa · 2024-06-12T04:22:53Z

Oh, and the dependencies in web package now has not @myorg/ui as dependencies ("@myorg/ui": "workspace:^"). Is it possible to dispense with this dependency in real cases out there?

emilgpa · 2024-06-12T04:39:09Z

I updated to react to 19. The error persists. Updated to waku 0.20.2 and the error was gone. Sorry for not trying it at the time, I was a little busy. It seems that the problem was solved a long time ago. I think this can be closed.

dai-shi · 2024-06-13T07:44:23Z

👍

dai-shi added the help wanted Extra attention is needed label Jan 27, 2024

dai-shi mentioned this issue Mar 21, 2024

[Bug]: cannot start dev server on monorepo #611

Closed

dai-shi mentioned this issue Apr 27, 2024

dev: error when using locally linked version of waku #676

Open

dai-shi mentioned this issue May 2, 2024

fix: build with customised entriesJs #679

Closed

dai-shi mentioned this issue May 27, 2024

v1 Roadmap #24

Open

86 tasks

dai-shi closed this as completed Jun 13, 2024

fail to resolve packages imported from another package in a monorepo #429

fail to resolve packages imported from another package in a monorepo #429

Comments

emilgpa commented Jan 27, 2024

dai-shi commented Jan 27, 2024

himself65 commented Jan 27, 2024

emilgpa commented Jan 28, 2024

himself65 commented Jan 28, 2024

emilgpa commented Jan 28, 2024

himself65 commented Jan 28, 2024

emilgpa commented Jan 28, 2024

emilgpa commented Jan 28, 2024

himself65 commented Jan 28, 2024

himself65 commented Jan 28, 2024

Aslemammad commented Mar 27, 2024

emilgpa commented Mar 28, 2024 • edited Loading

Aslemammad commented Mar 28, 2024

emilgpa commented Mar 28, 2024 • edited Loading

Aslemammad commented Mar 28, 2024 • edited Loading

dai-shi commented Mar 28, 2024

Aslemammad commented Mar 29, 2024

dai-shi commented Apr 1, 2024 • edited Loading

dai-shi commented Apr 1, 2024

dai-shi commented Apr 2, 2024 • edited Loading

dai-shi commented Apr 2, 2024 • edited Loading

dai-shi commented Apr 2, 2024

pmelab commented Apr 28, 2024

dai-shi commented Apr 28, 2024

pmelab commented Apr 29, 2024 • edited Loading

pmelab commented Apr 29, 2024

himself65 commented Jun 5, 2024

himself65 commented Jun 6, 2024

dai-shi commented Jun 9, 2024

himself65 commented Jun 12, 2024

himself65 commented Jun 12, 2024 • edited Loading

emilgpa commented Jun 12, 2024 • edited Loading

emilgpa commented Jun 12, 2024

emilgpa commented Jun 12, 2024 • edited Loading

dai-shi commented Jun 13, 2024

emilgpa commented Mar 28, 2024 •

edited

Loading

emilgpa commented Mar 28, 2024 •

edited

Loading

Aslemammad commented Mar 28, 2024 •

edited

Loading

dai-shi commented Apr 1, 2024 •

edited

Loading

dai-shi commented Apr 2, 2024 •

edited

Loading

dai-shi commented Apr 2, 2024 •

edited

Loading

pmelab commented Apr 29, 2024 •

edited

Loading

himself65 commented Jun 12, 2024 •

edited

Loading

emilgpa commented Jun 12, 2024 •

edited

Loading

emilgpa commented Jun 12, 2024 •

edited

Loading