Does not work with Next 13, pages or app directory

[Jared-Dahlke]

This works great in the vite example but gives an error if you try to import one of the components into a Nextjs App dir page.

steps to reproduce:

• fork this repo
• navigate in terminal to /examples
• run npx create-next-app@latest , give it a name, and use all of the default settings. (app dir, tailwind, etc.)
• navigate into that folder, run npm i
• go to src/app/page.tsx in the new next app and add use client at the top.
• Then import in and add the button to the page.tsx import { Button } from "shadcn-ui-library-starter"
• add button to page.tsx <Button>Click me </Button>

expected: no errors, button is shown on example next app home page actual: get an error:

Server Error
Error: Cannot find module './index.cjs2.js'
Require stack:
- /Users/jared/Desktop/repos/ui-components/examples/next-app-dir/.next/server/app/page.js
- /Users/jared/Desktop/repos/ui-components/examples/next-app-dir/node_modules/next/dist/server/require.js
- /Users/jared/Desktop/repos/ui-components/examples/next-app-dir/node_modules/next/dist/server/load-components.js
- /Users/jared/Desktop/repos/ui-components/examples/next-app-dir/node_modules/next/dist/build/utils.js
- /Users/jared/Desktop/repos/ui-components/examples/next-app-dir/node_modules/next/dist/server/dev/static-paths-worker.js
- /Users/jared/Desktop/repos/ui-components/examples/next-app-dir/node_modules/next/dist/compiled/jest-worker/processChild.js

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Module._resolveFilename
node:internal/modules/cjs/loader (1082:15)
<unknown>
file:///Users/jared/Desktop/repos/ui-components/examples/next-app-dir/node_modules/next/dist/server/require-hook.js (110:36)
Module._load
node:internal/modules/cjs/loader (928:27)
Module.require
node:internal/modules/cjs/loader (1149:19)
require
node:internal/modules/helpers (121:18)
require
node_modules/@versesdev/ui-components/dist/index.cjs.js (1:88)
(rsc)/./node_modules/@versesdev/ui-components/dist/index.cjs.js
file:///Users/jared/Desktop/repos/ui-components/examples/next-app-dir/.next/server/app/page.js (1701:1)
__webpack_require__
file:///Users/jared/Desktop/repos/ui-components/examples/next-app-dir/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(rsc)/./src/app/page.tsx (7:82)
(rsc)/./src/app/page.tsx
file:///Users/jared/Desktop/repos/ui-components/examples/next-app-dir/.next/server/app/page.js (1580:1)

I'm going to see if i can fix this. if i can I will report back here. If you know how please let me know.

Cheers

[Jared-Dahlke]

i found out i get the same error if i run in Nextjs pages dir as well. Still unable to figure out how to fix

[rajeshbabu-oviva-ag]

Hey Jared

Have you tried the example project ? looks like a local issue.

[Jared-Dahlke]

The example project is a vite app….

Sent from Proton Mail for iOS

On Wed, Aug 30, 2023 at 12:19 AM, rajeshbabu-oviva @.***(mailto:On Wed, Aug 30, 2023 at 12:19 AM, rajeshbabu-oviva < wrote:

Hey Jared

Have you tried the example project ? looks like a local issue.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

[Jared-Dahlke]

@rajeshbabu-oviva-ag it works great with the vite app. But if you try to use it with a Nextjs app you will get that error

[DeniCarvalho]

@Jared-Dahlke Did you find any solution? I managed to make it work by removing "type": "module" and modifying postcss.config.js to: module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, };

[Jared-Dahlke]

@Jared-Dahlke Did you find any solution? I managed to make it work by removing "type": "module" and modifying postcss.config.js to:

`

module.exports = {

plugins: {

tailwindcss: {},

autoprefixer: {},

},

};

`

I ended up using the tsup-tutorial repo, I don't have the link handy but just search it .