Using External NPM Registry in NextJS results in Errors

Technical Questions
,
1

Update

I’ve narrowed this down to a NextJS issue, seems there have been a number of questions on this over the last few months.

Issue

Building a proof of concept (PoC) utilising the Builder IO scripting tool to create an out of the box NextJS solution.

As part of the PoC I’m connecting the codebase to an internal NPM registry. Connection to the registry works fine but when adding a simple component against registerComponent I’m greeted by the following error:

./node_modules/<NodeModulesPackage>/src/components/Display/StatusLight.tsx
Module parse failed: Unexpected token (13:1)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   variant,
|   disabled,
> }: StatusLightProps) => (
|   <span
|     data-size={size}

Looking through the documentation I’ve tried pulling in Babel and updating the Webpack configuration (amongst other things). Each attempt has been fruitless and caused other issues elsewhere in the pipeline.

Any advice on resolving would be great.

Code stack you are integrating Builder with

  • NextJS: v14.0.4
  • React: v18.2.0
  • @builder.io/dev-tools: 0.2.6
  • @builder.io/react: ^3.1.1
  • @builder.io/sdk: ^2.1.1

Reproducible code example

File: builder-registry.ts

'use client';
import { Builder } from '@builder.io/react';
import Counter from './components/Counter/Counter';
import { StatusLight } from '<NodeModulesPackage>/src/components/Display/StatusLight';

Builder.registerComponent(Counter, {
  name: 'Counter',
  inputs: [
    {
      name: 'initialCount',
      type: 'number',
    },
  ],
});

Builder.registerComponent(StatusLight, {
  name: 'StatusLight',
  inputs: [
    {
      name: 'label',
      type: 'text',
    },
    {
      name: 'size',
      type: 'text',
    },
    {
      name: 'variant',
      type: 'text',
    },
  ],
});

File: Status Light

  • Attempted with and without use client
  • Attempted with and without export default StatusLight
  • Adding this code into it’s own file within the Builder IO repo with no reference to the external registry seems to resolve the issue
import React from 'react';
import classNames from 'classnames';
import { StatusLightProps } from '../../types/display/statusLight';

export const StatusLight = ({
  label,
  size,
  variant,
  disabled,
}: StatusLightProps) => (
  <span
    data-size={size}
    data-type="status-light"
    className={classNames('badge', {
      disabled: disabled,
      [`badge-${variant}`]: variant,
    })}
  >
    {label}
  </span>
);
2

Resolved the issue.

If anyone comes across this in future it’s because we aren’t doing a compilation of the packages. Because of this and the under the hood mechanisms it’s throwing exceptions as we aren’t telling Builder IO and NextJS to transpile our packages.

In order to resolve this, this is the full config we added in the end:

const nextConfig = withBuilderDevTools({
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader'],
    });

    return config;
  },
  transpilePackages: [
    '<Package One>',
    '<Package Two>',
    '<Package Three>',
  ],
});
1 Like