codesandbox / sandpack

A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox.
https://sandpack.codesandbox.io
Apache License 2.0
4.85k stars 343 forks source link

CompileError: import is not supported #988

Closed vaynevayne closed 2 months ago

vaynevayne commented 1 year ago

Bug report

Packages affected

Description of the problem

What were you doing when the problem occurred?

What steps can we take to reproduce the problem?

Link to sandbox: [link]() (optional)

Your Environment

Software Name/Version
Sandpack-client version
Sandpack-react version
Browser
Operating System
const data = `export const data = [

];`;

const columns = `export const columns = [
  {
    id: "select",
    enableSorting: false,
    enableHiding: false,
  }

]`;

const App = `import {Table} from "@nextui-org/react";

import {
  useReactTable,
} from "@tanstack/react-table"

import {data} from './data'
import {columns} from './columns'
const colors = ["default", "primary", "secondary", "success", "warning", "danger"];

export default function App() {
  const [selectedColor, setSelectedColor] = React.useState("default");
  const [rowSelection, setRowSelection] = React.useState({})
  const [columnVisibility, setColumnVisibility] =
    React.useState<VisibilityState>({})
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
    []
  )
  const [sorting, setSorting] = React.useState<SortingState>([])

  const table = useReactTable({
    data,
    columns,
    state: {
      sorting,
      columnVisibility,
      rowSelection,
      columnFilters,
    },
    enableRowSelection: true,
    onRowSelectionChange: setRowSelection,
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    onColumnVisibilityChange: setColumnVisibility,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFacetedRowModel: getFacetedRowModel(),
    getFacetedUniqueValues: getFacetedUniqueValues(),
  })

  return (
    <div className="flex flex-col gap-3">
      <Table table={table}></Table>
    </div>
  );
}`;

const react = {
  "/App.jsx": App,
  "/data.ts": data,
  "/columns.ts": columns,
};

export default {
  ...react,
};
jamesmurdza commented 1 year ago

You haven't included package.json. Are your dependencies included there?

danilowoz commented 2 months ago

I'm closing this issue as it's been a while without any activity. Please feel free to report it again if the problem persists. Thanks so much!