dev & prod build bug: Astro/esbuild #519

onyoo · 2023-05-04T16:21:20Z

Describe the bug
On npm start a ton of the same error are output. They can be avoided by 1. restarting the dev server, or 2. commenting out react-syntax-highlighter and restarting. They also appear when any subsequent npm package is added to the project.

Example message from npm start:

✘ [ERROR] Invalid command: on-resolve [plugin JavaScript plugins]

    node_modules/esbuild/lib/main.js:728:12:
      728 │       throw new Error(`Invalid command: ` + request.command);
          ╵             ^

Running npm run build fails every time. Output:

$ npm run build

> nuclear-neptune@0.0.1 build
> astro build

09:10:45 AM [content] No content directory found. Skipping type generation.
09:10:45 AM [build] output target: static
09:10:45 AM [build] Collecting build info...
09:10:45 AM [build] Completed in 17ms.
09:10:45 AM [build] Building static entrypoints...
09:10:46 AM [build] Completed in 265ms.

 building client 
Completed in 291ms.


 generating static routes 
▶ src/pages/index.astro
 error   Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
  File:
    /Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:72:155
  Code:
    71 | b.treeContext=ib(c,1,0);try{W(a,b,d)}finally{b.treeContext=c}}else W(a,b,d);return;case Sa:c=c.type;d=Hb(c,d);Ib(a,b,c,d,f);return;case Na:f=d.children;c=c._context;d=d.value;e=c._currentValue2;c._currentValue2=d;g=D;D=d={parent:g,depth:null===g?0:g.depth+1,context:c,parentValue:e,value:d};b.context=d;W(a,b,f);a=D;if(null===a)throw Error("Tried to pop a Context at the root of the app. This is a bug in React.");d=a.parentValue;a.context._currentValue2=d===Xa?a.context._defaultValue:d;a=D=a.parent;
    > 72 | b.context=a;return;case Oa:d=d.children;d=d(c._currentValue2);W(a,b,d);return;case Ta:f=c._init;c=f(c._payload);d=Hb(c,d);Ib(a,b,c,d,void 0);return}throw Error("Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: "+((null==c?c:typeof c)+"."));}}
         |                                                                                                                                                           ^
      73 | function W(a,b,c){b.node=c;if("object"===typeof c&&null!==c){switch(c.$$typeof){case Ia:Ib(a,b,c.type,c.props,c.ref);return;case Ja:throw Error("Portals are not currently supported by the server renderer. Render them conditionally so that they only appear on the client render.");case Ta:var d=c._init;c=d(c._payload);W(a,b,c);return}if(ra(c)){Kb(a,b,c);return}null===c||"object"!==typeof c?d=null:(d=Ya&&c[Ya]||c["@@iterator"],d="function"===typeof d?d:null);if(d&&(d=d.call(c))){c=d.next();if(!c.done){var f=
      74 | [];do f.push(c.value),c=d.next();while(!c.done);Kb(a,b,f)}return}a=Object.prototype.toString.call(c);throw Error("Objects are not valid as a React child (found: "+("[object Object]"===a?"object with keys {"+Object.keys(c).join(", ")+"}":a)+"). If you meant to render a collection of children, use an array instead.");}"string"===typeof c?(d=b.blockedSegment,d.lastPushedText=Ha(b.blockedSegment.chunks,c,a.responseState,d.lastPushedText)):"number"===typeof c&&(d=b.blockedSegment,d.lastPushedText=Ha(b.blockedSegment.chunks,
      75 | ""+c,a.responseState,d.lastPushedText))}function Kb(a,b,c){for(var d=c.length,f=0;f<d;f++){var e=b.treeContext;b.treeContext=ib(e,d,f);try{Jb(a,b,c[f])}finally{b.treeContext=e}}}
  Stacktrace:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at Ib (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:72:155)
    at W (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:89)
    at Ib (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:67:482)
    at W (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:89)
    at Jb (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:76:98)
    at Kb (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:75:140)
    at W (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:345)
    at Jb (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:76:98)
    at Ib (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:68:145)
    at W (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:89)
    at Jb (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:76:98)
    at Kb (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:75:140)
    at W (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:345)
    at Ib (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:68:479)
    at W (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:89)
    at Ib (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:67:482)
    at W (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:89)
    at Jb (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:76:98)
    at Ib (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:68:145)
    at W (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:89)
    at Ib (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:67:482)
    at W (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:89)
    at Eb (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:82:216)
    at Zb (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:99:157)
    at exports.renderToStaticNodeStream (/Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:100:55)
    at file:///Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/dist/entry.mjs?time=1683216646435:155:25
    at new Promise (<anonymous>)
    at renderToStaticNodeStreamAsync (file:///Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/dist/entry.mjs?time=1683216646435:154:9)
    at async Object.renderToStaticMarkup (file:///Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/dist/entry.mjs?time=1683216646435:118:11)
    at async renderFrameworkComponent (file:///Users/roberto/Documents/Code/examples/astro_delete_test/nuclear-neptune/dist/chunks/astro.07c80123.mjs:2165:26)

To Reproduce
Steps to reproduce the behavior:

npm create astro@latest
# cd into repo
npx astro add react
npm i react-markdown
npm i react-syntax-highlighter
npm i --save-dev @types/react-syntax-highlighter
npm start
#
npm run build

Create a new component that uses react-syntax-highlighter. Example used to recreate:
src/components/post.tsx

import ReactMarkdown from "react-markdown";
import SyntaxHighlighter from "react-syntax-highlighter";

interface PostProps {}

export default function Post({}: PostProps) {
  return (
    <article>
      <ReactMarkdown
        children={"```python\ntest = 1```"}
        components={{
          code({ node, inline, className, children, ...props }) {
            const match = /language-(\w+)/.exec(className || "");
            return !inline && match ? (
              // there is something weird going on atm with this code
              // throws errors when install another package and run dev
              <SyntaxHighlighter
                children={String(children).replace(/\n$/, "")}
                language={match[1]}
                PreTag="div"
              />
            ) : (
              <code {...props} className={className}>
                {children}
              </code>
            );
          },
        }}
      />
    </article>
  );
}

src/pages/index.astro

---
import Layout from '../layouts/Layout.astro';
import Post from '../components/Post'
---

<Layout title="Welcome to Astro.">
	<main>
		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
		<Post/>
	</main>
</Layout>

<style>
	main {
		margin: auto;
		padding: 1.5rem;
		max-width: 60ch;
	}
	h1 {
		font-size: 3rem;
		font-weight: 800;
		margin: 0;
	}
	.text-gradient {
		background-image: var(--accent-gradient);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-size: 400%;
		background-position: 0%;
	}
	.instructions {
		line-height: 1.6;
		margin: 1rem 0;
		border: 1px solid rgba(var(--accent), 25%);
		background-color: white;
		padding: 1rem;
		border-radius: 0.4rem;
	}
	.instructions code {
		font-size: 0.875em;
		font-weight: bold;
		background: rgba(var(--accent), 12%);
		color: rgb(var(--accent));
		border-radius: 4px;
		padding: 0.3em 0.45em;
	}
	.instructions strong {
		color: rgb(var(--accent));
	}
	.link-card-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
		gap: 1rem;
		padding: 0;
	}
</style>

Expected behavior
Import should not block dev server, or prod build.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: MacOS Ventura 13.3.1
Browser Chrome
Version 112.0.5615.137 (Official Build) (arm64)

Smartphone (please complete the following information):
NA

Additional context
$ node -v
v18.15.0
$ npm -v
9.5.0

package.json generated:

{
  "name": "nuclear-neptune",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/react": "^2.1.2",
    "@types/react": "^18.2.5",
    "@types/react-dom": "^18.2.3",
    "astro": "^2.3.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-markdown": "^8.0.7",
    "react-syntax-highlighter": "^15.5.0"
  },
  "devDependencies": {
    "@types/react-syntax-highlighter": "^15.5.6"
  }
}

The text was updated successfully, but these errors were encountered:

onyoo · 2023-05-04T21:41:34Z

withastro/astro#5562

onyoo mentioned this issue May 4, 2023

Astro Check Errors - Only when using React withastro/astro#6631

Closed

1 task

mauricekleine mentioned this issue May 8, 2023

[Bug]: Fails to start using Vite v4.3 (esbuild error) storybookjs/storybook#22253

Closed

IanVS mentioned this issue May 31, 2023

[Bug]: Failed to fetch dynamically imported module: http://localhost:6006/node_modules/.cache/vite-storybook/deps/@storybook_react_preview.js storybookjs/storybook#22661

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

dev & prod build bug: Astro/esbuild #519

dev & prod build bug: Astro/esbuild #519

onyoo commented May 4, 2023 •

edited

onyoo commented May 4, 2023

dev & prod build bug: Astro/esbuild #519

dev & prod build bug: Astro/esbuild #519

Comments

onyoo commented May 4, 2023 • edited

onyoo commented May 4, 2023

onyoo commented May 4, 2023 •

edited