SolidJS crashes with _tmpl$ not a function

Question

I am trying to run a SolidJS script, out of the blue the error below started appearing

caught TypeError: _tmpl$3 is not a function
    at App.tsx:58:3
    at App (App.tsx:63:72)
    at solid.js:1152:24
    at untrack (solid.js:414:12)
    at createComponent (solid.js:1152:10)
    at get children [as children] (index.tsx:7:9)
    at get children [as children] (index.js:706:20)
    at Object.fn (solid.js:919:35)
    at runComputation (solid.js:636:22)
    at updateComputation (solid.js:619:3)
(

When debugging, it turns out that it already crashes at the return of App.tsx. So I tried, replacing some things and it turns out that only an empty tag <>Hello</> gives me an output at App.tsx. Even when I return <div>Hello</div>, I already get an error similar to that above, always _tmpl is not a function. Even when I remove all the imports from App.tsx apart from SolidJS. So I tried going up to my main script:

import { Component } from 'solid-js'
import { render } from 'solid-js/web'
import { Router } from '@solidjs/router'
import App from './App'

const AppContainer: Component = () => (
 <Router>
 <App />
 </Router>
)

render(() => <AppContainer />, document.getElementById('root') as HTMLElement)

Which crashes as well even like so:

import { Component } from 'solid-js'
import { render } from 'solid-js/web'
import { Router } from '@solidjs/router'
import App from './App'

const AppContainer: Component = () => (
 <div>
 Hello
 </div>
)

render(() => <AppContainer />, document.getElementById('root') as HTMLElement)

The only way to get output is:

import { Component } from 'solid-js'
import { render } from 'solid-js/web'
import { Router } from '@solidjs/router'
import App from './App'

const AppContainer: Component = () => (
 <>
 Hello
 </>
)

render(() => <AppContainer />, document.getElementById('root') as HTMLElement)

tsc 3.8.3 solidjs 1.6.9 parcel 2.8.3

I am stuck.. Feels like one of my main scripts (node version 18,typescript) are not right version.

How have you set up your project? Using their [CLI](https://www.solidjs.com/guides/getting-started) `npx degit solidjs/templates/js my-app` / `npx degit solidjs/templates/ts my-app`? — Dominic, Apr 26 '23 at 17:58

score 1 · Answer 1 · answered Apr 26 '23 at 17:08

_tmpl related errors indicate that JSX is not compiled into Javascript properly. Running typecript will not be enough, you need to transpile JSX into regular JavaScript. Make sure babel installed and runs as expected.

Are you using webpack? If so it is best to switch to vite unless you know what you are doing. Vite is faster to setup, easier to run and faster to execute.

https://www.solidjs.com/guides/getting-started

SolidJS crashes with _tmpl$ not a function

1 Answers1