search

Sandpack / nodebox-runtime

Nodebox is a runtime for executing Node.js modules in the browser.
https://sandpack.codesandbox.io/docs/advanced-usage/nodebox
Other
727 stars 41 forks source link

Module resolution failing due to missing `name` field in package.json #56

Closed alecmarcus closed 9 months ago

alecmarcus commented 9 months ago

Also filed here https://github.com/codesandbox/sandpack/issues/1071

Problem

From what I can tell in the error, when adding custom dependencies to sandpack in a template that uses nodepack, the internal module resolution fails if a dependency's package.json doesn't have a name field.

The package referenced in the error does have one. It does not have a "parent package", however. https://github.com/vanilla-extract-css/vanilla-extract/blob/fa7105066a5fbb70822af89939abcc48731aeb2e/packages/integration/package.json#L2 https://github.com/vanilla-extract-css/vanilla-extract/blob/951131127feee1e1a0a13b0b4e11e9ae2ba26536/packages/vite-plugin/package.json#L2

error when starting dev server:
Error: Couldn't find parent package.json with a name field from '/nodebox'
    at Object.getPackageInfo (nodebox:///nodebox/node_modules/.store/@vanilla-extract/integration@6.4.0/node_modules/@vanilla-extract/integration/dist/vanilla-extract-integration.cjs.dev.js:338:11)
    at configResolved (nodebox:///nodebox/node_modules/.store/@vanilla-extract/vite-plugin@3.9.5/node_modules/@vanilla-extract/vite-plugin/dist/vanilla-extract-vite-plugin.cjs.dev.js:85:33)
    at eval (nodebox:///nodebox/node_modules/.store/vite@4.1.4/node_modules/vite/dist/node/chunks/dep-ca21228b.js:62127:28)
    at Array.map (<anonymous>)
    at resolveConfig (nodebox:///nodebox/node_modules/.store/vite@4.1.4/node_modules/vite/dist/node/chunks/dep-ca21228b.js:62127:14)
    at async createServer (nodebox:///nodebox/node_modules/.store/vite@4.1.4/node_modules/vite/dist/node/chunks/dep-ca21228b.js:61191:20)
    at async CAC.eval (nodebox:///nodebox/node_modules/.store/vite@4.1.4/node_modules/vite/dist/node/cli.js:741:24)

Setup

import type { SandpackFiles, SandpackPredefinedTemplate, SandpackSetup } from "@codesandbox/sandpack-react";
import {
  SandpackConsole,
  SandpackFileExplorer,
  SandpackLayout,
  SandpackPreview,
  SandpackProvider,
  SandpackThemeProvider,
} from "@codesandbox/sandpack-react";
import React from "react";

import { Editor } from "./Editor";

const requiredSetup: SandpackSetup = {
  dependencies: {
    "@vanilla-extract/css": "^1.13.0",
    "@vanilla-extract/recipes": "^0.5.0",
    "@vanilla-extract/sprinkles": "^1.6.1",
    "@vanilla-extract/vite-plugin": "^3.9.0",
  },
};

const requiredFiles: SandpackFiles = {
  "styles.css.ts": `import { style } from '@vanilla-extract/css'`,
  "vite.config.ts": `import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';

export default defineConfig({
  plugins: [react(), vanillaExtractPlugin()],
});
  `,
};

export const Playground: React.FC<{
  template?: SandpackPredefinedTemplate;
  files?: SandpackFiles;
}> = ({ template = "vite-react-ts", files }) => {
  return (
    <SandpackProvider
      template={template}
      customSetup={requiredSetup}
      files={{ ...requiredFiles, ...files }}
    >
      <SandpackThemeProvider>
        <SandpackLayout>
          <SandpackFileExplorer />
          <Editor />
          <SandpackPreview />
          <SandpackConsole />
        </SandpackLayout>
      </SandpackThemeProvider>
    </SandpackProvider>
  );
};

Project package.json

{
  "scripts": {
    "watch": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
  },
  "dependencies": {
    "@astrojs/mdx": "^1.1.2",
    "@astrojs/react": "^3.0.3",
    "@astrojs/ts-plugin": "^1.2.0",
    "@codesandbox/nodebox": "^0.1.9",
    "@codesandbox/sandpack-react": "^2.11.3",
    "@codesandbox/sandpack-themes": "^2.0.21",
    "@vanilla-extract/css": "^1.13.0",
    "@vanilla-extract/esbuild-plugin": "^2.3.2",
    "@vanilla-extract/recipes": "^0.5.0",
    "@vanilla-extract/sprinkles": "^1.6.1",
    "@vanilla-extract/vite-plugin": "^3.9.0",
    "astro": "^3.3.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "0.71.13",
  },
  "devDependencies": {
    "@types/react": "^18.2.31",
    "@types/react-dom": "^18.2.14",
  }
}
alecmarcus commented 9 months ago

Looks specific to vanilla extract: https://github.com/vanilla-extract-css/vanilla-extract/issues/413#issuecomment-1115523119