Open matteo2437 opened 1 year ago
Did you find a resolution?
Unfortunately no
Try putting "use client" at the beginning of the top-most index of the ui package, i.e.
-components
|
-atoms
|
-Button
|
-Button.tsx
-index.ts
-index.ts <- put "use client" at the top here
-molecules
|
-etc.
Then import as something like import { Button } from "../components/atoms"
Hello, did someone manage to find a solution?
Thanks,
Changing to default export vs named fixes this for me - credit: https://stackoverflow.com/questions/75261466/unsupported-server-component-type-undefined-next-js-13
Yea it would be nice if there's a way to export named components and have this work. for nicer looking imports
I have solved it. So basically you need to add tsup
into your package where you are going to have your shareable components.
And add the following file in the root of your package folder "tsup.config.ts":
import { defineConfig, Options } from "tsup";
export default defineConfig((options: Options) => ({
treeshake: true,
splitting: true,
entry: ["src/**/*.tsx"],
format: ["esm"],
dts: true,
minify: true,
clean: true,
external: ["react"],
...options,
}));
}
Then add this file also at the root of your package folder "postbuild.js":
const fs = require('fs');
const path = require('path');
const indexPath = path.resolve(__dirname, 'dist', 'index.mjs');
fs.readFile(indexPath, 'utf8', (err, data) => {
if (err) {
console.error('Error reading index.mjs file:', err);
process.exit(1);
}
const result = `"use client";\n` + data;
fs.writeFile(indexPath, result, 'utf8', (err) => {
if (err) {
console.error('Error writing index.mjs file:', err);
process.exit(1);
}
console.log('index.mjs file updated successfully.');
});
});
Then in your package.json add these scripts:
"scripts": {
"build": "tsup && node postbuild.js",
"dev": "tsup && node postbuild.js --watch",
"check-types": "tsc --noEmit"
},
Changing to default export vs named fixes this for me - credit: https://stackoverflow.com/questions/75261466/unsupported-server-component-type-undefined-next-js-13
Are there some downsides to this approach that we should be aware of?
That approach solved the error for me in my Turborepo. But I'd like to hear if there are other consequences that I should be thinking about.
As an example of the adjustments I made to solve the error, I changed my packages/ui/src/Anchor.tsx
component to use a default export.
Then I updated my packages/ui/src/index.tsx
file to export that default like this:
// export * from "./Anchor"; <-- OLD
export { default as Anchor } from "./Anchor"; // <-- NEW
Because this index
file still exports a named Anchor
component, I did not have to update any of my import statements for the instances in my apps
.
So for example, in my apps/web/src/app/about/page.tsx
, my import statement still remained as:
import { Anchor } from "ui";
So far so good, but I'm not yet sure if there are other unintended consequences to this approach.
I fixed the error . there were two things. in the app directory of turnbo repo you need to make sure the export const is not a arrow function . it should be a normal function .
`export function Signup(): JSX.Element { return ( <div style={{ height: "100vh", justifyContent: "center", display: "flex" }}> <div style={{ width: 400, border: " 1px solid black" }}>
<input placeholder="password" type="password" />
<button type="submit">Submit</button>
</div>
</div>
); }`
this is my component even though it's name is Signup but the file name should be signup.( not with capital letters) .
this ins now in my index folder of ui
export { Signup } from "./signup";
also default keyword is not used at all . anywhere.
then use in your apps folder with import
import { Signup } from "ui";
Verify canary release
Provide environment information
Which area(s) of Next.js are affected? (leave empty if unsure)
App directory (appDir: true)
Link to the code that reproduces this issue
https://github.com/matteo2437/turborepo-test
To Reproduce
With this next.config.js settings: module.exports = { reactStrictMode: true, experimental: { appDir: true, transpilePackages: ["ui"], }, };
Run the app called docs and you will see this error message: Error: Unsupported Server Component type: undefined
Describe the Bug
The problem is that I can't use any server component exported from a Turborepo package and imported in a Turborepo Next js 13 app with appDir settings to true.
The problem is caused from the server component called Button inside the UI package that is imported in the docs app.
If you remove appDir from experimental the problem is fixed. So I'm not finding a way for using server component exported from a Turborepo package in an app that use appDir settings to true.
This is the error:![image](https://user-images.githubusercontent.com/68251639/211021215-2e4fb7c7-4acc-4b79-8d62-7408970afdb5.png)
And this is the server component exported from Ui package:
Expected Behavior
Import server component from Turborepo package in a Turborepo Next js 13 app without any error.
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
NEXT-706