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

3 messages · Page 1 of 1 (latest)

grave viper
#

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 npx create-payload-app and starting moving my existing v2 collections, fields and components to the v3 environment. I figured I still need to run payload generate:types . 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 index.scss file for my colorPicker..
In payload v2 I believe this was handled with a webpack bundler and now NextJS compiles my .scss... Any suggestions?

rotund pecanBOT
#
New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

grave viper