[Bug]: Problem building app using tldraw with rollup

[mmacphail]

What happened?

I've packaged tldraw inside my vue app. I'm encountering a problem building it using vite / rollup in the debug-flags.mjs file. The error I'm getting is the following :

vite v4.5.0 building for production...
[plugin:replace] @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
✓ 489 modules transformed.
✓ built in 1.56s
Unexpected token (Note that you need plugins to import files that are not JavaScript)
file: /home/mmacphail/workbench1/node_modules/@tldraw/editor/dist-esm/lib/utils/debug-flags.mjs:119:30
117: }
118: function getDefaultValue(def) {
119:   const env = readEnv(() => process.env.TLDRAW_ENV) ?? readEnv(() => process.env.VERCEL_PUBLIC_TLDRAW_ENV) ?? readEnv...
                                   ^
120:   switch (env) {
121:     case "production":
error during build:
RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (file:///home/mmacphail/workbench1/node_modules/rollup/dist/es/shared/node-entry.js:2287:30)
    at Module.error (file:///home/mmacphail/workbench1/node_modules/rollup/dist/es/shared/node-entry.js:13745:16)
    at Module.tryParse (file:///home/mmacphail/workbench1/node_modules/rollup/dist/es/shared/node-entry.js:14476:25)
    at Module.setSource (file:///home/mmacphail/workbench1/node_modules/rollup/dist/es/shared/node-entry.js:14077:39)
    at ModuleLoader.addModuleSource (file:///home/mmacphail/workbench1/node_modules/rollup/dist/es/shared/node-entry.js:24649:20)

I've tried rollup replace plugin to no avail. I'm not sure what's going here exactly. I'm wondering if anybody encountered a similar issue and could help me find out what's wrong...

How can we reproduce the bug?

No response

What browsers are you seeing the problem on?

No response

Contact Details

[email protected]

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[Jilesh980]

Hello @mmacphail, Can i work to fix this bug and provide you with updated solution code. Thank you.

[steveruizok]

Could you share your vite config?

[mmacphail]

Here is my config :

// Plugins
import vue from '@vitejs/plugin-vue'
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
import ViteFonts from 'unplugin-fonts/vite'

// Utilities
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: { transformAssetUrls }
    }),
    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
    vuetify({
      autoImport: true,
    }),
    ViteFonts({
      google: {
        families: [{
          name: 'Roboto',
          styles: 'wght@100;300;400;500;700;900',
        }],
      },
    }),
  ],
  define: { 'process.env': {} },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
    extensions: [
      '.js',
      '.json',
      '.jsx',
      '.mjs',
      '.ts',
      '.tsx',
      '.vue',
    ],
  },
  server: {
    port: 3000,
  },
})

[platform-kit]

@mmacphail did you ever solve the use case of using tldraw in vue?

[raviteja83]

'process.env': `(${JSON.stringify(process.env)})` wrapping in () worked in webpack. do try if it helps.