stackblitz / bolt.new

Prompt, run, edit, and deploy full-stack web applications
https://bolt.new
MIT License
4.96k stars 896 forks source link

Impressive Features but Significant Concerns with bolt.new #139

Open ronoc2020 opened 1 week ago

ronoc2020 commented 1 week ago

Describe the bug

During creation simple web app I have those errors which cost me tokens:

ailed to compile

./components/Footer.tsx ReactServerComponentsError:

You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials

,-[/home/projects/sb1-xeikcc/node_modules/framer-motion/dist/es/animation/hooks/use-animated-state.mjs:1:1] 1 | import { useState, useEffect } from 'react'; : ^^^^^^^^^ 2 | import { useConstant } from '../../utils/use-constant.mjs'; 3 | import { getOrigin, checkTargetForNewValues } from '../../render/utils/setters.mjs'; 4 | import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs'; `----

The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'.

Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx

This error occurred during the build process and can only be dismissed by fixing the error.

Futuristic GitHub Web Application

Potential problems detected. 1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/animation/hooks/use-animated-state.mjs:1:1] 1 | import { useState, useEffect } from 'react'; : ^^^^^^^^^ 2 | import { useConstant } from '../../utils/use-constant.mjs'; 3 | import { getOrigin, checkTargetForNewValues } from '../../render/utils/setters.mjs'; 4 | import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs'; `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useRef. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs:1:1] 1 | import * as React from 'react'; 2 | import { useContext, useRef, cloneElement, Children, isValidElement } from 'react'; : ^^^^^^ 3 | import { useForceUpdate } from '../../utils/use-force-update.mjs'; 4 | import { useIsMounted } from '../../utils/use-is-mounted.mjs'; 5 | import { PresenceChild } from './PresenceChild.mjs'; `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs:1:1] 1 | import { useContext, useId, useEffect } from 'react'; : ^^^^^^^^^ 2 | import { PresenceContext } from '../../context/PresenceContext.mjs'; 3 | 4 | /** `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useRef. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/components/LayoutGroup/index.mjs:1:1] 1 | import * as React from 'react'; 2 | import { useContext, useRef, useMemo } from 'react'; : ^^^^^^ 3 | import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs'; 4 | import { DeprecatedLayoutGroupContext } from '../../context/DeprecatedLayoutGroupContext.mjs'; 5 | import { useForceUpdate } from '../../utils/use-force-update.mjs'; `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/components/LazyMotion/index.mjs:1:1] 1 | import * as React from 'react'; 2 | import { useState, useRef, useEffect } from 'react'; : ^^^^^^^^^ 3 | import { LazyContext } from '../../context/LazyContext.mjs'; 4 | import { loadFeatures } from '../../motion/features/load-features.mjs'; `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/components/Reorder/Group.mjs:1:1] 1 | import { invariant } from '../../utils/errors.mjs'; 2 | import * as React from 'react'; 3 | import { forwardRef, useRef, useEffect } from 'react'; : ^^^^^^^^^ 4 | import { ReorderContext } from '../../context/ReorderContext.mjs'; 5 | import { motion } from '../../render/dom/motion.mjs'; 6 | import { useConstant } from '../../utils/use-constant.mjs'; `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/context/DeprecatedLayoutGroupContext.mjs:1:1] 1 | import { createContext } from 'react'; : ^^^^^^^^^^^^^ 2 | 3 | /** 4 | * Note: Still used by components generated by old versions of Framer `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/context/LayoutGroupContext.mjs:1:1] 1 | import { createContext } from 'react'; : ^^^^^^^^^^^^^ 2 | 3 | const LayoutGroupContext = createContext({}); `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/context/LazyContext.mjs:1:1] 1 | import { createContext } from 'react'; : ^^^^^^^^^^^^^ 2 | 3 | const LazyContext = createContext({ strict: false }); `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs:1:1] 1 | import { createContext } from 'react'; : ^^^^^^^^^^^^^ 2 | 3 | /** 4 | * @public `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/context/MotionContext/index.mjs:1:1] 1 | import { createContext } from 'react'; : ^^^^^^^^^^^^^ 2 | 3 | const MotionContext = createContext({}); `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/context/PresenceContext.mjs:1:1] 1 | import { createContext } from 'react'; : ^^^^^^^^^^^^^ 2 | 3 | /** 4 | * @public `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/context/ReorderContext.mjs:1:1] 1 | import { createContext } from 'react'; : ^^^^^^^^^^^^^ 2 | 3 | const ReorderContext = createContext(null); `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/context/SwitchLayoutGroupContext.mjs:1:1] 1 | import { createContext } from 'react'; : ^^^^^^^^^^^^^ 2 | 3 | /** 4 | * Internal, exported only for usage in Framer `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/events/use-dom-event.mjs:1:1] 1 | import { useEffect } from 'react'; : ^^^^^^^^^ 2 | import { addDomEvent } from './add-dom-event.mjs'; 3 | 4 | /** `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/motion/utils/use-visual-element.mjs:1:1] 1 | import { useContext, useRef, useInsertionEffect, useEffect } from 'react'; : ^^^^^^^^^ 2 | import { PresenceContext } from '../../context/PresenceContext.mjs'; 3 | import { MotionContext } from '../../context/MotionContext/index.mjs'; 4 | import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs'; `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs:1:1] 1 | import { useState } from 'react'; : ^^^^^^^^ 2 | import { initPrefersReducedMotion } from './index.mjs'; 3 | import { warnOnce } from '../warn-once.mjs'; 4 | import { hasReducedMotionListener, prefersReducedMotion } from './state.mjs'; `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/utils/use-animation-frame.mjs:1:1] 1 | import { useRef, useContext, useEffect } from 'react'; : ^^^^^^^^^ 2 | import { MotionConfigContext } from '../context/MotionConfigContext.mjs'; 3 | import { frame, cancelFrame } from '../frameloop/frame.mjs'; `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useRef. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/utils/use-constant.mjs:1:1] 1 | import { useRef } from 'react'; : ^^^^^^ 2 | 3 | /** 4 | * Creates a constant value over the lifecycle of a component. `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/utils/use-cycle.mjs:1:1] 1 | import { useRef, useState, useCallback } from 'react'; : ^^^^^^^^ 2 | import { wrap } from './wrap.mjs'; 3 | 4 | /** `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/utils/use-force-update.mjs:1:1] 1 | import { useState, useCallback } from 'react'; : ^^^^^^^^ 2 | import { useIsMounted } from './use-is-mounted.mjs'; 3 | import { frame } from '../frameloop/frame.mjs'; `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/utils/use-in-view.mjs:1:1] 1 | import { useState, useEffect } from 'react'; : ^^^^^^^^^ 2 | import { inView } from '../render/dom/viewport/index.mjs'; 3 | 4 | function useInView(ref, { root, margin, amount, once = false } = {}) { `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/utils/use-instant-transition.mjs:1:1] 1 | import { useRef, useEffect } from 'react'; : ^^^^^^^^^ 2 | import { useInstantLayoutTransition } from '../projection/use-instant-layout-transition.mjs'; 3 | import { useForceUpdate } from './use-force-update.mjs'; 4 | import { instantAnimationState } from './use-instant-transition-state.mjs'; `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/utils/use-isomorphic-effect.mjs:1:1] 1 | import { useLayoutEffect, useEffect } from 'react'; : ^^^^^^^^^ 2 | import { isBrowser } from './is-browser.mjs'; 3 | 4 | const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect; `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useInsertionEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/utils/use-motion-value-event.mjs:1:1] 1 | import { useInsertionEffect } from 'react'; : ^^^^^^^^^^^^^^^^^^ 2 | 3 | function useMotionValueEvent(value, event, callback) { 4 | /** `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/utils/use-unmount-effect.mjs:1:1] 1 | import { useEffect } from 'react'; : ^^^^^^^^^ 2 | 3 | function useUnmountEffect(callback) { 4 | return useEffect(() => () => callback(), []); `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/value/use-motion-value.mjs:1:1] 1 | import { useContext, useState, useEffect } from 'react'; : ^^^^^^^^^ 2 | import { motionValue } from './index.mjs'; 3 | import { MotionConfigContext } from '../context/MotionConfigContext.mjs'; 4 | import { useConstant } from '../utils/use-constant.mjs'; `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/value/use-scroll.mjs:1:1] 1 | import { motionValue } from './index.mjs'; 2 | import { useConstant } from '../utils/use-constant.mjs'; 3 | import { useEffect } from 'react'; : ^^^^^^^^^ 4 | import { warning } from '../utils/errors.mjs'; 5 | import { scrollInfo } from '../render/dom/scroll/track.mjs'; 6 | import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs'; `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1

"./components/Footer.tsx ReactServerComponentsError: You're importing a component that needs useInsertionEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ,-[/home/project/node_modules/framer-motion/dist/es/value/use-spring.mjs:1:1] 1 | import { useContext, useRef, useInsertionEffect } from 'react'; : ^^^^^^^^^^^^^^^^^^ 2 | import { isMotionValue } from './utils/is-motion-value.mjs'; 3 | import { useMotionValue } from './use-motion-value.mjs'; 4 | import { MotionConfigContext } from '../context/MotionConfigContext.mjs'; `---- The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'. Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx"

1 Error: ReactServerComponentsError:

You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials

,-[/home/project/node_modules/framer-motion/dist/es/animation/hooks/use-animated-state.mjs:1:1] 1 | import { useState, useEffect } from 'react'; : ^^^^^^^^^ 2 | import { useConstant } from '../../utils/use-constant.mjs'; 3 | import { getOrigin, checkTargetForNewValues } from '../../render/utils/setters.mjs'; 4 | import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs'; `----

The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/Footer.tsx'.

Maybe one of these should be marked as a client entry with "use client": ./components/Footer.tsx ./app/page.tsx

Should we try to fix these? You've used all your remaining tokens. Subscribe to Pro for 66x more usage. import ParticleBackground from '@/components/ParticleBackground'; import Navbar from '@/components/Navbar'; import Hero from '@/components/Hero'; import About from '@/components/About'; import Services from '@/components/Services'; import GithubRepos from '@/components/GithubRepos'; import Contact from '@/components/Contact'; import Footer from '@/components/Footer';

export default function Home() { return (

); }

Link to the Bolt URL that caused the error

https://bolt.new/~/sb1-xeikcc

Steps to reproduce

  1. Clicked option to fix errors = Internal Server Error
  2. Refreshed showed about 26 errors
  3. Ran out of tokens can not fix
  4. Unable to deploy no tokens
  5. Stackblitz somehow do not display my app

Expected behavior

By prompt content it should provide desire product with working functions to do not waste additional tokens.

Screen Recording / Screenshot

No response

Platform

Browser name = Firefox
Full version = 131.0
Major version = 131
navigator.appName = Netscape
navigator.userAgent = Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0
performance.memory = undefined
Username = ronoc2020
Chat ID = fdbe9bdb67d4

Additional context

Feedback on "bolt.new"

I want to start by saying that your product, "bolt.new," is quite impressive. However, I have some concerns that make me hesitant to invest, as I’ve encountered several issues that affect productivity and performance. Issues Encountered:

Summary:

While I appreciate the potential of "bolt.new," I am concerned about its current performance, which I estimate at about 55% productivity. I've experienced frequent internal server errors and deployment issues that need addressing. These problems detract from the overall user experience and make it difficult to rely on the platform.

I hope this feedback helps in further developing and improving "bolt.new."

kirjavascript commented 1 week ago

Hi! 👋 Thanks for the comments!

Accidental Navigation: I accidentally clicked and was taken back to the main page, which was frustrating.

Do you know where you clicked?

Chat History: Fortunately, my chat history was still available, but the history from yesterday disappeared, which was disappointing.

Unfortunately chat history is not currently persisted server side. We're tracking this internally and will keep you posted!

Terminal Management: When opening multiple terminals, there's no option to close them, which can clutter the workspace.

Added this to our issue tracker!

Code Download: There’s currently no option to download code, limiting the ability to work offline or back up progress.

It's possible to do this by opening the project in StackBlitz and then exporting the project from the editor to a zip file. We want to add the ability to do this directly in bolt in the future.

Precision: Some aspects of the tool are not as precise as I would expect, leading to confusion during use.-

We're going to keep improving bolt going forward and hopefully improve it as much as possible. If you have anything else specific you want to mention let us know!

MamunHoque commented 1 week ago

You've used all your remaining tokens.

how to buy new credit ?

MamunHoque commented 1 week ago

@kirjavascript i already used all tokens for current month. how to get token again? is there any way to buy token? or this limit only for daily based? one more thing we need to open stackblitz project with bolt.new editor.

kirjavascript commented 1 week ago

Hi @MamunHoque!

We're working on ways to buy more tokens and see your usage. We'll keep you posted!