search

epicweb-dev / react-fundamentals

Material for my React Fundamentals Workshop
https://fundamentals.epicreact.dev
Other
5.3k stars 3.21k forks source link

Unable to run tests, or use playground when using the app #392

Closed facuperezm closed 1 month ago

facuperezm commented 1 month ago

I am able to clone, install, run setup on the app, but when I run the app and open a lesson, I get this error:

npm run start

> start
> npx --prefix ./epicshop epicshop start

🐨  Let's get learning!
Local:            http://localhost:5639
On Your Network:  http://192.168.0.110:5639
Press Ctrl+C to stop
✘ [ERROR] Could not resolve "@epic-web/workshop-utils/test"

    ../../../../playground/index.test.ts:1:38:
      1 │ import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
        ╵                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@epic-web/workshop-utils" here because it's not
  listed as a dependency of this package:

    ../../../../../../../../.pnp.cjs:3915:33:
      3915 │           "packageDependencies": [\
           ╵                                  ~~

  You can mark the path "@epic-web/workshop-utils/test" as external to exclude it from the bundle,
  which will remove this error.

Error: Build failed with 1 error:
../../../../playground/index.test.ts:1:38: ERROR: Could not resolve "@epic-web/workshop-utils/test"
    at failureErrorWithLog (/Users/facuperezm/Documents/personal-projects/epic-react-course/react-fundamentals/epicshop/node_modules/esbuild/lib/main.js:1636:15)
    at /Users/facuperezm/Documents/personal-projects/epic-react-course/react-fundamentals/epicshop/node_modules/esbuild/lib/main.js:1048:25
    at /Users/facuperezm/Documents/personal-projects/epic-react-course/react-fundamentals/epicshop/node_modules/esbuild/lib/main.js:993:52
    at buildResponseToResult (/Users/facuperezm/Documents/personal-projects/epic-react-course/react-fundamentals/epicshop/node_modules/esbuild/lib/main.js:1046:7)
    at /Users/facuperezm/Documents/personal-projects/epic-react-course/react-fundamentals/epicshop/node_modules/esbuild/lib/main.js:1075:16
    at responseCallbacks.<computed> (/Users/facuperezm/Documents/personal-projects/epic-react-course/react-fundamentals/epicshop/node_modules/esbuild/lib/main.js:697:9)
    at handleIncomingPacket (/Users/facuperezm/Documents/personal-projects/epic-react-course/react-fundamentals/epicshop/node_modules/esbuild/lib/main.js:752:9)
    at Socket.readFromStdout (/Users/facuperezm/Documents/personal-projects/epic-react-course/react-fundamentals/epicshop/node_modules/esbuild/lib/main.js:673:7)
    at Socket.emit (node:events:519:28)
    at addChunk (node:internal/streams/readable:561:12) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: [Object],
      notes: [Array],
      pluginName: '',
      text: 'Could not resolve "@epic-web/workshop-utils/test"'
    }
  ],
  warnings: []
}

my setup is as follows:

git v2.38.1
node v22.9.0
npm 10.9.0

I have already tried cloning the repo fresh a couple of times, running just npm install, clean installing Node and npm on my machine, restarting, and running npm run setup (which completes successfully). However, the issue persists after I npm start the app. While I am able to do the workshop, I can't see my progress because React doesn't even render in the playground, and running tests doesn't work either. It's quite frustrating.

Screenshot 2024-10-04 at 23 32 38

error in screenshot says Failed to fetch dynamically imported module: http://localhost:5639/app/playground/index.test.ts

facuperezm commented 1 month ago

I get this on other lessons

npm start

> start
> npx --prefix ./epicshop epicshop start

🐨  Let's get learning!
Local:            http://localhost:5639
On Your Network:  http://192.168.0.110:5639
Press Ctrl+C to stop
✘ [ERROR] Could not resolve "react-dom/client"

    ../../../../playground/index.tsx:1:27:
      1 │ import { createRoot } from 'react-dom/client'
        ╵                            ~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "react-dom" here because it's not listed as a
  dependency of this package:

    ../../../../../../../../.pnp.cjs:3915:33:
      3915 │           "packageDependencies": [\
           ╵                                  ~~

  You can mark the path "react-dom/client" as external to exclude it from the bundle, which will
  remove this error.

✘ [ERROR] Could not resolve "react/jsx-runtime"

    ../../../../playground/index.tsx:14:1:
      14 │   <div
         ╵   ^

  The Yarn Plug'n'Play manifest forbids importing "react" here because it's not listed as a
  dependency of this package:

    ../../../../../../../../.pnp.cjs:3915:33:
      3915 │           "packageDependencies": [\
           ╵                                  ~~

  You can mark the path "react/jsx-runtime" as external to exclude it from the bundle, which will
  remove this error.

✘ [ERROR] Could not resolve "react-dom/client"

    ../../../../playground/index.tsx:1:27:
      1 │ import { createRoot } from 'react-dom/client'
        ╵                            ~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "react-dom" here because it's not listed as a
  dependency of this package:

    ../../../../../../../../.pnp.cjs:3915:33:
      3915 │           "packageDependencies": [\
           ╵                                  ~~

  You can mark the path "react-dom/client" as external to exclude it from the bundle, which will
  remove this error.

✘ [ERROR] Could not resolve "react/jsx-runtime"

    ../../../../playground/index.tsx:14:1:
      14 │   <div
         ╵   ^

  The Yarn Plug'n'Play manifest forbids importing "react" here because it's not listed as a
  dependency of this package:

    ../../../../../../../../.pnp.cjs:3915:33:
      3915 │           "packageDependencies": [\
           ╵                                  ~~

  You can mark the path "react/jsx-runtime" as external to exclude it from the bundle, which will
  remove this error.

✘ [ERROR] Could not resolve "react-dom/client"

    ../../../../playground/index.tsx:1:27:
      1 │ import { createRoot } from 'react-dom/client'
        ╵                            ~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "react-dom" here because it's not listed as a
  dependency of this package:

    ../../../../../../../../.pnp.cjs:3915:33:
      3915 │           "packageDependencies": [\
           ╵                                  ~~

  You can mark the path "react-dom/client" as external to exclude it from the bundle, which will
  remove this error.

✘ [ERROR] Could not resolve "react/jsx-runtime"

    ../../../../playground/index.tsx:14:1:
      14 │   <div
         ╵   ^

  The Yarn Plug'n'Play manifest forbids importing "react" here because it's not listed as a
  dependency of this package:

    ../../../../../../../../.pnp.cjs:3915:33:
      3915 │           "packageDependencies": [\
           ╵                                  ~~

  You can mark the path "react/jsx-runtime" as external to exclude it from the bundle, which will
  remove this error.

Error: Build failed with 2 errors:
../../../../playground/index.tsx:1:27: ERROR: Could not resolve "react-dom/client"
../../../../playground/index.tsx:14:1: ERROR: Could not resolve "react/jsx-runtime"
    at failureErrorWithLog (/Users/facuperezm/Documents/personal-projects/epic-react-course/react-fundamentals/epicshop/node_modules/esbuild/lib/main.js:1636:15)
    at /Users/facuperezm/Documents/personal-projects/epic-react-course/react-fundamentals/epicshop/node_modules/esbuild/lib/main.js:1048:25
    at /Users/facuperezm/Documents/personal-projects/epic-react-course/react-fundamentals/epicshop/node_modules/esbuild/lib/main.js:993:52
    at buildResponseToResult (/Users/facuperezm/Documents/personal-projects/epic-react-course/react-fundamentals/epicshop/node_modules/esbuild/lib/main.js:1046:7)
    at /Users/facuperezm/Documents/personal-projects/epic-react-course/react-fundamentals/epicshop/node_modules/esbuild/lib/main.js:1075:16
    at responseCallbacks.<computed> (/Users/facuperezm/Documents/personal-projects/epic-react-course/react-fundamentals/epicshop/node_modules/esbuild/lib/main.js:697:9)
    at handleIncomingPacket (/Users/facuperezm/Documents/personal-projects/epic-react-course/react-fundamentals/epicshop/node_modules/esbuild/lib/main.js:752:9)
    at Socket.readFromStdout (/Users/facuperezm/Documents/personal-projects/epic-react-course/react-fundamentals/epicshop/node_modules/esbuild/lib/main.js:673:7)
    at Socket.emit (node:events:519:28)
    at addChunk (node:internal/streams/readable:561:12) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: [Object],
      notes: [Array],
      pluginName: '',
      text: 'Could not resolve "react-dom/client"'
    },
    {
      detail: undefined,
      id: '',
      location: [Object],
      notes: [Array],
      pluginName: '',
      text: 'Could not resolve "react/jsx-runtime"'
    }
  ],
  warnings: []
}
kentcdodds commented 1 month ago

Are you installing dependencies with yarn? This project uses npm and is only guaranteed to work with npm

facuperezm commented 1 month ago

I am using npm only. I just solved it after uninstalling absolutely everything I found related to yarn in my machine. Thanks for your time Kent!