Getting enviornment variables into my build of my SolidJS app

Question

In a SolidJS template I have:

          {import.meta.env["VITE_VARIABLE_NAME"]}

and this works fine when I run

npm start

(which in package.js just runs vite)

When I try to do npm build (which is vite build in package.js) it throws the following error:

Unexpected token (Note that you need plugins to import files that are not JavaScript)
file: /file/path/here/src/App.tsx:52:26
50:         <div id="search-area">
51:           <input type="text" id="search" placeholder="Search" />
52:           {import.meta.env["VITE_VARIABLE_NAME"]}
                              ^
53:           <input type="submit" id="search-button" value="Search" />
54:         </div>
error during build:
RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript)

How do I get this to just put in the value for the variable in the template?

Answer 1

const VITE_VARIABLE_NAME = import.meta.env["VITE_VARIABLE_NAME"]

export function App() {
  return (
        <div id="search-area">
           <input type="text" id="search" placeholder="Search" />
           {VITE_VARIABLE_NAME }
                              ^
           <input type="submit" id="search-button" value="Search" />
         </div>
  )
}