Cannot contribute on fresh clone

[kronos-999]

I followeed the exact instructions for contributing, but when I run "npm run dev", I get the following: [!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) [0] client/craft/index.tsx (16:4) [0] 14: const ContentProviderBase: React.FC = ({ data, standaloneServer }) => { [0] 15: return ( [0] 16: [0] ^ [0] 17:

[0] 18:

Also, I get the following on the server afterwards:

bundles server/index.ts → build/server... [0] created build/server in 4s [1] node:internal/crypto/hash:71 [1] this[kHandle] = new _Hash(algorithm, xofLen); [1] ^ [1] [1] Error: error:0308010C:digital envelope routines::unsupported [1] at new Hash (node:internal/crypto/hash:71:19) [1] at Object.createHash (node:crypto:140:10)

[LiveDuo]

@kronos-999

The first seems something is off with rollup (https://github.com/rollup/plugins/issues/287 is one of the most upvoted issues) and the second might be related to https://github.com/webpack/webpack/issues/14532#issuecomment-947012063. Both issues are encounter first time.

One guess is that they might be related to a newer version of node that I haven't tested yet.

Can you share more about your setup?

[kronos-999]

I somehow managed to get rid of those errors, but now I have the following errors:

bundles client/index.tsx → build/browser... [0] [!] (plugin commonjs) Error: Insufficient rollup version: "@rollup/plugin-commonjs" requires at least rollup@2.68.0 but found rollup@2.45.2.

bundles server/index.ts → build/server... [0] [!] (plugin node-resolve) Error: Insufficient rollup version: "@rollup/plugin-node-resolve" requires at least rollup@2.78.0 but found rollup@2.45.2.

My Setup is a MacBook with version 10.15 and Node v19.9.0

[kronos-999]

Probable fix: I manually bumped rollup to 2.78.0 (as required above) and it only shows this while compiling successfully:

Module not found: Can't resolve '../../../lib/build/browser/index.css' [1] > 1 | require('../../../lib/build/browser/index.css') [1] 2 | [1] 3 | function MyApp({ Component, pageProps }) { [1] 4 | return <Component {...pageProps} />

[kronos-999]

Did not fix it, now it compiles but also shows this in the browser: Module not found: Can't resolve 'destack' [1] 1 | export { getStaticProps } from 'destack/build/server' [1] > 2 | import { ContentProvider } from 'destack' [1] 3 | [1] 4 | const Index = (props) => { [1] 5 | return (

[LiveDuo]

It seems there could be something broken with imports. It works on my system atm but I'll be trying a clean install in a bit to verify.

There's also a failing build that I missed https://github.com/LiveDuo/destack/actions/runs/4317946271/jobs/7535646291.

[LiveDuo]

@kronos-999 Update: After a clean install I get the error the first time. Then after running the command again the error goes away.

What seems to happen:

• The Next.js example project needs the Destack editor CSS to function
• The CSS is dynamically generated with rollup and the tailwindcss plugin and does not exists at first
• The example project the first time it started could not found the CSS and throws that error

[kronos-999]

@LiveDuo Update: There was an issue where an icon was not imported in Header.tsx for the ArrowUpTrayIcon icon, so I added it to the bottom via the following line:

import ArrowUpTrayIcon from '@heroicons/react/24/outline/ArrowUpTrayIcon'

Also, I just dropped a pnpm i destack -w lib and it seems to compile without problems, but now (as you jsut described) the CSS for tailwind is not being loaded, and so I get the components inside the editor without proper styling.

Maybe this helps you understand where the issue comes from

[LiveDuo]

@kronos-999 In the master branch the ArrowUpTrayIcon looks commented out Header.tsx#L73, if you see an error something maybe rollup is ignoring the comments or you checked out on a different branch. Lmk whether the case to look it up.

When you run npm run dev twice it should compile. That's with either npm or nnpm (I haven't tested pnpm though), at least on my machine it does, the first time fails to load the CSS and the second it compiles sucessfully.

[kronos-999]

I did a fresh install with twice the installataion (and changing rollup version, see above) and it gives me this:

Module not found: Can't resolve 'destack' 1 | export { getStaticProps } from 'destack/build/server'

2 | import { ContentProvider } from 'destack' 3 | 4 | const Index = (props) => { 5 | return (

[LiveDuo]

It seems that the example projects that are used for dev are not importing destack correctly.

Looking into them I noticed that destack is not imported at all in their package.json files. Maybe it depends on how npm workspaces work. I'd like to look into it somehow but I can't reproduce it on my machine.

If destack is added as a dependency it may work.

ie. in ./dev/nextjs-project/package.json

"dependencies": {
+    "destack": "file:../../lib/",
    "next": "^10.2.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },

[kronos-999]

Hey man, after some time and an upgraded PC i gave it another try and it worked wonderfully! However, there might be a CSS issue left to solve: When I add the second "Banner" element from default Hyper UI it looks different from the original website, even though the markup seems to be the same.

The original markup (second element): https://www.hyperui.dev/components/marketing/banners

How it looks after importing in Destack (image attached)

As you can see, the preview looks different from the actually imported markup.

Can you spot the cause?

[LiveDuo]

Hey @kronos-999,

Glad that it works now. We spend quite some time ironing out bugs over the last few weeks.

I've reproduced the issue locally. For more context, I was aware that something was off with text-transparent Tailwind class but didn't notice that component.

Maybe create another Github issue specifically for this bug?