Next.js Discord

Discord Forum

Rollup config build issue with supabase realtime

Unanswered
Barbary Lion posted this in #help-forum
Open in Discord
Avatar
Barbary LionOP
This my nextjs component where i am using supabase realtime
import { RealtimeClient } from '@supabase/realtime-js';

// import { storeMessageInDatabase } from '~/app/dashboard/[organization]/chatbots/[chatbot]/chat-history/components/chat/actions.server';
const NEXT_PUBLIC_CHATBOT_API_URL = process.env.NEXT_PUBLIC_CHATBOT_API_URL;

if (!NEXT_PUBLIC_CHATBOT_API_URL) {
  throw new Error(
    `The environment variable NEXT_PUBLIC_CHATBOT_API_URL is not set`,
  );
}

// Initialize Supabase client
const supabase = new RealtimeClient(
  process.env.NEXT_PUBLIC_SUPABASE_REALTIME_URL!,
  {
    params: {
      apikey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
    },
  },
);

6 Replies

Avatar
Barbary LionOP
It giving the issue without this supabase realtime i am able to bundle it 
rollup config.mjs
import { parseArgs } from 'node:util';
import nodeResolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import replace from '@rollup/plugin-replace';
import tsConfigPaths from 'rollup-plugin-tsconfig-paths';
import typescript from '@rollup/plugin-typescript';
import terser from '@rollup/plugin-terser';
import injectProcessEnv from 'rollup-plugin-inject-process-env';
import postcss from 'rollup-plugin-postcss';
import { visualizer } from 'rollup-plugin-visualizer';
import nodePolyfills from 'rollup-plugin-polyfill-node';
import json from '@rollup/plugin-json';
import { config } from 'dotenv';
const args = parseArgs({
  options: {
    environment: {
      type: 'string',
      short: 'e',
      default: 'development',
    },
    configuration: {
      type: 'string',
      short: 'c',
    },
  },
});
const env = args.values.environment;
let environmentVariablesPath = './.env';
const requiredEnvVariables = [
  'NEXT_PUBLIC_CHATBOT_API_URL',
  'WIDGET_CSS_URL',
  'CHATBOT_SDK_NAME',
  'WIDGET_SETTINGS_ENDPOINT',
  'NEXT_PUBLIC_PYTHON_API',
  'NEXT_PUBLIC_SITE_URL',
];
const ENV_VARIABLES = config({
  path: environmentVariablesPath,
}).parsed;
const injectedEnvVariables = Object.fromEntries(
Object.entries(ENV_VARIABLES).filter(([key]) =>
    requiredEnvVariables.includes(key),
  ),
);
export default {
  input: 'packages/widget/Chatbot.tsx',
  output: {
    file: `public/${ENV_VARIABLES.CHATBOT_SDK_NAME}`,
    format: 'iife',
    sourcemap: false,
    inlineDynamicImports: true,
    globals: {
      'react/jsx-runtime': 'jsxRuntime',
      'react-dom/client': 'ReactDOM',
      react: 'React',
    },
  },
plugins: [
    json(),
    tsConfigPaths({
      tsConfigPath: './packages/widget/tsconfig.json',
    }),
    replace({ preventAssignment: true }),
    typescript({
      tsconfig: './packages/widget/tsconfig.json',
    }),
    nodeResolve({ extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'] }),
    babel({
      babelHelpers: 'bundled',
      presets: [
        '@babel/preset-typescript',
        ['@babel/preset-react', { runtime: 'automatic' }],
      ],
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    }),
    postcss({
      config: {
        path: './postcss.config.js',
      },
      extensions: ['.css'],
      minimize: true,
      extract: true,
      inject: {
        insertAt: 'top',
      },
    }),
    commonjs(),
    nodePolyfills({
      exclude: ['crypto'],
    }),
    injectProcessEnv(injectedEnvVariables),
    terser({
      ecma: 2020,
      mangle: { toplevel: true },
      compress: {
        module: true,
        toplevel: true,
        unsafe_arrows: true,
        // drop_console: true,
        // drop_debugger: true
      },
      output: { quote_style: 1 },
    }),
    visualizer(),
  ],
};
Error -
(!) "this" has been rewritten to "undefined"
https://rollupjs.org/troubleshooting/#error-this-is-undefined
node_modules/@opentelemetry/api/build/esm/metrics/NoopMeter.js
15:  * limitations under the License.
16:  */
17: var __extends = this && this.__extends || function () {
              ^
18:   var extendStatics = function (d, b) {
19:     extendStatics = Object.setPrototypeOf || {
...and 1 other occurrence
node_modules/@opentelemetry/api/build/esm/api/context.js
15:  * limitations under the License.
16:  */
17: var __read = this && this.__read || function (o, n) {
                 ^
18:   var m = typeof Symbol === "function" && o[Symbol.iterator];
19:   if (!m) return o;
...and 3 other occurrences
node_modules/@opentelemetry/api/build/esm/api/diag.js
15:  * limitations under the License.
16:  */
17: var __read = this && this.__read || function (o, n) {
                 ^
18:   var m = typeof Symbol === "function" && o[Symbol.iterator];
19:   if (!m) return o;
...and 3 other occurrences

...and 13 other files
(!) Circular dependencies
node_modules/zod-to-json-o-json-schema/dist/esm/parsers/branded.js -> node_modules/zod-to-json-schema/dist/esm/parseDef.js
node_modules/zod-to-json-schema/dist/esm/parseDef.js -> node_modules/zod-to-json-schema/dist/esm/parsers/catch.js -> node_modules/zod-to-json-schema/dist/esm/parseDef.js
...and 20 more
(!) Missing global variable names
https://rollupjs.org/configuration-options/#output-globals
Use "output.globals" to specify browser global variable names corresponding to external modules:
worker_threads (guessing "require$$2$3")
node:util (guessing "node_util")
created public/get-kiosk-chatbot.js in 30.8s
i already tried using context window and this it can resolve this undefined error but worker threads not working with it