[ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".scss" for /home/node/app/src/components/...

Howdy!

I am upgrading Payload v2 to v3 and I am stuck following the [Migration Guide](

) .

I have setup a new Payload v3 environment with

and starting moving my existing v2 collections, fields and components to the v3 environment. I figured I still need to run

. However, when I run this I get the following error:

node:internal/process/promises:394
    triggerUncaughtException(err, true /* fromPromise */);
    ^
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".scss" for /home/node/app/src/components/colorPicker/index.scss
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:218:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:244:36)
    at defaultLoad (node:internal/modules/esm/load:122:22)
    at async nextLoad (node:internal/modules/esm/hooks:748:22)
    at async load (file:///home/node/app/node_modules/tsx/dist/esm/index.mjs?1736167812779:2:1762)
    at async nextLoad (node:internal/modules/esm/hooks:748:22)
    at async Hooks.load (node:internal/modules/esm/hooks:385:20)
    at async handleMessage (node:internal/modules/esm/worker:199:18) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

My custom colorPicker component looks like this:

'use client'

import React, { CSSProperties, useState } from 'react';
import { (...) } from '@mantine/core';
import { FieldLabel, TextInputProps, useField } from '@payloadcms/ui';

import './index.scss';

const ColorPicker: React.FC<TextInputProps> = (props) => {
  (...)
};

export default ColorPicker;

It seems that PayloadCMS v3 cannot figure out how to compile my

file for my colorPicker..

In payload v2 I believe this was handled with a webpack bundler and now NextJS compiles my .scss... Any suggestions?

I found the solution of this problem in a different post:

The problem was that I have to ALSO update direct imports of my components in not only my

file