Official Next.js Installation Instructions

[goobz22]

Recently came upon a handful of errors when importing in goobs-repo namely

#6
#11
#12
#13

I have been trying to find ways to resolve this within the goobs-repo itself but need to find a better way to go about it as I keep having issues in the meantime however I have a workaround that I am fine with for now and dont see that much of an issue with

here is the workaround

install the latest version of goobs-repo which you can see here - https://www.npmjs.com/package/goobs-repo?activeTab=readme

then after that follow this guide

Integrating goobs-repo with Next.js

This guide explains how to integrate the goobs-repo package with a Next.js project, resolving any compatibility issues that may arise.

Step 1: Install the required dependencies

In your Next.js project directory, run the following command to install the necessary dependencies:

yarn add --dev next-transpile-modules babel-loader @babel/preset-react @babel/preset-typescript
npm install --save-dev next-transpile-modules babel-loader @babel/preset-react @babel/preset-typescript

This command installs the following packages as dev dependencies:

• next-transpile-modules: A package that enables transpilation of modules from the node_modules directory using the Next.js Babel configuration.
• babel-loader: The Babel loader for webpack, which allows transpiling JavaScript files using Babel and webpack.
• @babel/preset-react: The Babel preset for React, which includes the necessary plugins for transpiling React code.
• @babel/preset-typescript: The Babel preset for TypeScript, which includes the necessary plugins for transpiling TypeScript code.

Step 2: Update the next.config.js file
Replace the contents of your next.config.js file with the following code or add the following transpile code:

/** @type {import('next').NextConfig} */
// next.config.js

import transpileModules from 'next-transpile-modules';

const withTM = transpileModules(['goobs-repo']);

const nextConfig = {
  reactStrictMode: true,
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        fs: false,
        path: false,
        os: false,
      };
    }

    config.module.rules.push({
      test: /\.tsx?$/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-typescript'],
          },
        },
      ],
    });

    return config;
  },
};

export default withTM(nextConfig);

This configuration does the following:

It uses the next-transpile-modules package to transpile the goobs-repo package, ensuring compatibility with Next.js.

It modifies the webpack configuration to handle .tsx files using the babel-loader with the @babel/preset-react and @babel/preset-typescript presets, enabling the transpilation of TypeScript and React code.

It adds fallback configurations to resolve certain Node.js modules (fs, path, os) on the client-side, preventing potential issues.

After installing those packages and yarn build will compile as expected. Will link future fix here also but this is fine to get everything to v1 in my opinion but input is welcome on what others think

[goobz22]

as of version .7.11-beta this is different and we are now using SWC and not webpack or babel as I understand nextjs a bit better now

here is the updated way to handle this in the repositories that we import this library into and I hope to update this even more to make it so we dont have to transpile on the destination side

/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  transpilePackages: ['goobs-repo'],
};

export default nextConfig;