Using babel-preset-solid in browser

here is my minimal reproduce: https://github.com/c8se/solid-babel-reproduce/blob/main/src/main.ts

import { transform } from '@babel/standalone'

// @ts-ignore
import babelPresetSolid from 'babel-preset-solid'

const result = transform(
  `import { render } from 'solid-js/web'

function HelloWorld() {
  return <div>Hello World!</div>
}

render(() => <HelloWorld />, document.getElementById('app'))`,
  {
    presets: [
      [babelPresetSolid, { generate: 'dom', hydratable: false }],
      ['typescript', { onlyRemoveTypeImports: true }]
    ],
    filename: 'main.tsx',
    sourceMaps: 'inline'
  }
)

import { transform } from '@babel/standalone'

// @ts-ignore
import babelPresetSolid from 'babel-preset-solid'

const result = transform(
  `import { render } from 'solid-js/web'

function HelloWorld() {
  return <div>Hello World!</div>
}

render(() => <HelloWorld />, document.getElementById('app'))`,
  {
    presets: [
      [babelPresetSolid, { generate: 'dom', hydratable: false }],
      ['typescript', { onlyRemoveTypeImports: true }]
    ],
    filename: 'main.tsx',
    sourceMaps: 'inline'
  }
)

According to solid playground, I added vite config defines:

define: {
  'process.env.BABEL_TYPES_8_BREAKING': 'true',
  'process.env.NODE_DEBUG': 'false',
  ...(env.command == 'build' ? {} : { global: 'globalThis' }),
},

define: {
  'process.env.BABEL_TYPES_8_BREAKING': 'true',
  'process.env.NODE_DEBUG': 'false',
  ...(env.command == 'build' ? {} : { global: 'globalThis' }),
},

But it still throwing " _assert is not a function", any idea how to resolve this? Thanks.

GitHub

solid-babel-reproduce/src/main.ts at main · c8se/solid-babel-reprod...

Contribute to c8se/solid-babel-reproduce development by creating an account on GitHub.

4 Replies

Tommypop•8mo ago

I think all you have to do is pnpm i assert (as looks like some babel code requires it and tries to resolve it from the package.json)

{
  "name": "solid-babel-reproduce",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@types/babel__standalone": "^7.1.7",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  },
  "dependencies": {
    "@babel/standalone": "^7.24.5",
    "assert": "^2.1.0",
    "babel-preset-solid": "^1.8.17"
  }
}

{
  "name": "solid-babel-reproduce",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@types/babel__standalone": "^7.1.7",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  },
  "dependencies": {
    "@babel/standalone": "^7.24.5",
    "assert": "^2.1.0",
    "babel-preset-solid": "^1.8.17"
  }
}

So your package.json should look like this Just spent the last 30 mins digging through the stack trace haha

RubickOP•8mo ago

I also digged into packed babel.js file but not realized that the empty object is the fallback of this missing package, thanks a lot for your time!

bigmistqke•8mo ago

i am playing around with transpiling solid in the browser too (https://github.com/bigmistqke/repl) and found the easiest way to import the babel-preset-solid plugin straight from esm.sh cdn. that way the plugin itself and all of its dependencies are esm-friendly.

GitHub

GitHub - bigmistqke/repl: 🗒️ Unstyled building blocks to compose ty...

🗒️ Unstyled building blocks to compose typescript playgrounds ⚡ Powered by monaco-editor and solid-js. - bigmistqke/repl

bigmistqke•8mo ago

there are some performance benefits to bundling it yourself though so grain of salt

Gaming

Programming

Using babel-preset-solid in browser