Looking for help installing or getting started with CKEditor in an SPFx SharePoint online React Functional Component.

After installing, uninstalling and reinstalling, I continue to have the following [partial error]

�[31m./node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js 6:473701�[39m
�[31mModule parse failed: Unexpected token (6:473701)�[39m
�[31mYou may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

Providing additional details in hope that someone can point be to either a solution or a proper forum for this type of issue.

My Node version is v18.20.4

My package.json looks as follows:

{
“name”: “approvals”,
“version”: “2024.02.29”,
“private”: true,
“engines”: {
“node”: “>=16.13.0 <17.0.0 || >=18.17.1 <19.0.0”
},
“main”: “lib/index.js”,
“scripts”: {
“build”: “gulp bundle”,
“clean”: “gulp clean”,
“test”: “gulp test”,
“typecheck”: “tsc”,
“typecheck:watch”: “tsc -w”,
“serve”: “fast-serve”
},
“dependencies”: {
“@ckeditor/ckeditor5-build-classic”: “^42.0.2”,
“@ckeditor/ckeditor5-react”: “^8.0.0”,
“@emotion/react”: “^11.11.4”,
“@emotion/styled”: “^11.11.5”,
“@fluentui/react”: “^7.204.0”,
“@microsoft/sp-component-base”: “1.18.0”,
“@microsoft/sp-core-library”: “1.18.0”,
“@microsoft/sp-lodash-subset”: “1.18.0”,
“@microsoft/sp-office-ui-fabric-core”: “1.18.0”,
“@microsoft/sp-property-pane”: “1.18.0”,
“@microsoft/sp-webpart-base”: “1.18.0”,
“@mui/material”: “^5.15.20”,
“@pnp/graph”: “^3.12.1”,
“@pnp/logging”: “^3.18.0”,
“@pnp/sp”: “^3.6.0”,
“@pnp/sp-commonjs”: “^2.15.0”,
“@pnp/spfx-controls-react”: “3.15.0”,
“ckeditor4”: “^4.24.0”,
“immer”: “^10.0.3”,
“react”: “17.0.1”,
“react-dom”: “17.0.1”,
“react-scripts”: “^5.0.1”,
“react-tooltip”: “^5.27.0”,
“tslib”: “2.3.1”
},
“devDependencies”: {
“@babel/core”: “^7.25.2”,
“@babel/plugin-proposal-class-properties”: “^7.18.6”,
“@babel/preset-env”: “^7.25.2”,
“@babel/preset-react”: “^7.24.7”,
“@microsoft/eslint-config-spfx”: “1.18.0”,
“@microsoft/eslint-plugin-spfx”: “1.18.0”,
“@microsoft/rush-stack-compiler-4.7”: “0.1.0”,
“@microsoft/sp-build-web”: “1.18.0”,
“@microsoft/sp-module-interfaces”: “1.18.0”,
“@rushstack/eslint-config”: “2.5.1”,
“@types/react”: “17.0.45”,
“@types/react-dom”: “17.0.17”,
“@types/react-tooltip”: “^4.2.4”,
“@types/webpack-env”: “~1.15.2”,
“ajv”: “^6.12.5”,
“babel-loader”: “^8.3.0”,
“css-loader”: “^6.7.0”,
“eslint”: “8.7.0”,
“eslint-plugin-react-hooks”: “4.3.0”,
“gulp”: “4.0.2”,
“raw-loader”: “^4.0.2”,
“sass-loader”: “^13.3.0”,
“spfx-fast-serve-helpers”: “~1.18.0”,
“style-loader”: “^3.3.0”,
“typescript”: “4.7.4”
}
}

My project does not have either .babelrc file nor babel.config.js

I do not have a webpack.config but have the following webpack.extend.js

const path = require(‘path’);

module.exports = function (buildOptions, webpackConfig) {
// Rule to handle JavaScript and JSX files with Babel
webpackConfig.module.rules.push({
test: /.(js|jsx|mjs)$/,
exclude: /node_modules/,
use: {
loader: ‘babel-loader’,
options: {
presets: [‘@babel/preset-env’, ‘@babel/preset-react’],
plugins: [‘@babel/plugin-proposal-class-properties’]
}
}
});

};

/*
module.exports = function (buildOptions, webpackConfig) {
// Your custom webpack configurations go here. For example:
webpackConfig.resolve.alias = {
“react-dom$”: “react-dom/profiling”,
};
return webpackConfig;
};
*/

My tsconfig looks as follows:

{
“extends”: “./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json”,
“compilerOptions”: {
“target”: “es2017”,
“forceConsistentCasingInFileNames”: true,
“module”: “esnext”,
“moduleResolution”: “node”,
“jsx”: “react”,
“declaration”: true,
“sourceMap”: true,
“experimentalDecorators”: true,
“skipLibCheck”: true,
“outDir”: “lib”,
“inlineSources”: false,
“noImplicitAny”: true,
“noUnusedParameters”: false,
“noUnusedLocals”: false,
“allowSyntheticDefaultImports”: true,
“esModuleInterop”: true,
“typeRoots”: [
“./node_modules/@types“,
“./node_modules/@microsoft“,
],
“types”: [
“webpack-env”,
],
“lib”: [
“es2017”,
“dom”,
“es2015.collection”,
“es2015.promise”
]
},
“include”: [
“src//*.ts”,
“src//.tsx”,
“declaration.d.ts”
],
“exclude”: [
“node_modules”,
“**/.spec.ts”
]
}

I also use SPFx-fast-server and have a gulpfile.js as follows:

“use strict”;

const build = require(“@microsoft/sp-build-web”);

build.addSuppression(Warning – [sass] The local CSS class ‘ms-Grid’ is not camelCase and will not be type-safe.);

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
var result = getTasks.call(build.rig);

};
build.tslintCmd.enabled = false;
/* fast-serve /
const { addFastServe } = require(“spfx-fast-serve-helpers”);
addFastServe(build);
/ end of fast-serve */

build.initialize(require(‘gulp’));

build.configureWebpack.mergeConfig({
additionalConfiguration: (wpcfg) => {
// if dev build, mod config for profiling react
if (wpcfg.mode === “development”) {

});

​Looking for help installing or getting started with CKEditor in an SPFx SharePoint online React Functional Component.After installing, uninstalling and reinstalling, I continue to have the following [partial error]�[31m./node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js 6:473701�[39m�[31mModule parse failed: Unexpected token (6:473701)�[39m�[31mYou may need an appropriate loader to handle this file type, currently no loaders are configured to process this fileProviding additional details in hope that someone can point be to either a solution or a proper forum for this type of issue.My Node version is v18.20.4My package.json looks as follows:{“name”: “approvals”,”version”: “2024.02.29”,”private”: true,”engines”: {“node”: “>=16.13.0 <17.0.0 || >=18.17.1 <19.0.0″},”main”: “lib/index.js”,”scripts”: {“build”: “gulp bundle”,”clean”: “gulp clean”,”test”: “gulp test”,”typecheck”: “tsc”,”typecheck:watch”: “tsc -w”,”serve”: “fast-serve”},”dependencies”: {“@ckeditor/ckeditor5-build-classic”: “^42.0.2″,”@ckeditor/ckeditor5-react”: “^8.0.0″,”@emotion/react”: “^11.11.4″,”@emotion/styled”: “^11.11.5″,”@fluentui/react”: “^7.204.0″,”@microsoft/sp-component-base”: “1.18.0”,”@microsoft/sp-core-library”: “1.18.0”,”@microsoft/sp-lodash-subset”: “1.18.0”,”@microsoft/sp-office-ui-fabric-core”: “1.18.0”,”@microsoft/sp-property-pane”: “1.18.0”,”@microsoft/sp-webpart-base”: “1.18.0”,”@mui/material”: “^5.15.20″,”@pnp/graph”: “^3.12.1″,”@pnp/logging”: “^3.18.0″,”@pnp/sp”: “^3.6.0″,”@pnp/sp-commonjs”: “^2.15.0″,”@pnp/spfx-controls-react”: “3.15.0”,”ckeditor4″: “^4.24.0″,”immer”: “^10.0.3″,”react”: “17.0.1”,”react-dom”: “17.0.1”,”react-scripts”: “^5.0.1″,”react-tooltip”: “^5.27.0″,”tslib”: “2.3.1”},”devDependencies”: {“@babel/core”: “^7.25.2″,”@babel/plugin-proposal-class-properties”: “^7.18.6″,”@babel/preset-env”: “^7.25.2″,”@babel/preset-react”: “^7.24.7″,”@microsoft/eslint-config-spfx”: “1.18.0”,”@microsoft/eslint-plugin-spfx”: “1.18.0”,”@microsoft/rush-stack-compiler-4.7″: “0.1.0”,”@microsoft/sp-build-web”: “1.18.0”,”@microsoft/sp-module-interfaces”: “1.18.0”,”@rushstack/eslint-config”: “2.5.1”,”@types/react”: “17.0.45”,”@types/react-dom”: “17.0.17”,”@types/react-tooltip”: “^4.2.4″,”@types/webpack-env”: “~1.15.2″,”ajv”: “^6.12.5″,”babel-loader”: “^8.3.0″,”css-loader”: “^6.7.0″,”eslint”: “8.7.0”,”eslint-plugin-react-hooks”: “4.3.0”,”gulp”: “4.0.2”,”raw-loader”: “^4.0.2″,”sass-loader”: “^13.3.0″,”spfx-fast-serve-helpers”: “~1.18.0″,”style-loader”: “^3.3.0″,”typescript”: “4.7.4”}}My project does not have either .babelrc file nor babel.config.jsI do not have a webpack.config but have the following webpack.extend.jsconst path = require(‘path’);module.exports = function (buildOptions, webpackConfig) {// Rule to handle JavaScript and JSX files with BabelwebpackConfig.module.rules.push({test: /.(js|jsx|mjs)$/,exclude: /node_modules/,use: {loader: ‘babel-loader’,options: {presets: [‘@babel/preset-env’, ‘@babel/preset-react’],plugins: [‘@babel/plugin-proposal-class-properties’]}}});// Rule to handle `.mjs` files
webpackConfig.module.rules.push({
test: /.mjs$/,
include: /node_modules/,
type: ‘javascript/auto’,
});

// Rule to handle CSS files
webpackConfig.module.rules.push({
test: /.css$/,
use: [‘style-loader’, ‘css-loader’]
});

// Rule to handle SCSS files specifically for CKEditor
webpackConfig.module.rules.push({
test: /.scss$/,
include: path.resolve(__dirname, “node_modules/@ckeditor”),
use: [
‘style-loader’,
‘css-loader’,
‘sass-loader’
]
});

// Rule to handle SVG files specifically for CKEditor
webpackConfig.module.rules.push({
test: /.svg$/,
include: path.resolve(__dirname, “node_modules/@ckeditor”),
use: [‘raw-loader’]
});

// Add alias for the react-dom profiler
webpackConfig.resolve.alias = {
“react-dom$”: “react-dom/profiling”
};

return webpackConfig; };/*module.exports = function (buildOptions, webpackConfig) {// Your custom webpack configurations go here. For example:webpackConfig.resolve.alias = {“react-dom$”: “react-dom/profiling”,};return webpackConfig;};*/My tsconfig looks as follows:{“extends”: “./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json”,”compilerOptions”: {“target”: “es2017″,”forceConsistentCasingInFileNames”: true,”module”: “esnext”,”moduleResolution”: “node”,”jsx”: “react”,”declaration”: true,”sourceMap”: true,”experimentalDecorators”: true,”skipLibCheck”: true,”outDir”: “lib”,”inlineSources”: false,”noImplicitAny”: true,”noUnusedParameters”: false,”noUnusedLocals”: false,”allowSyntheticDefaultImports”: true,”esModuleInterop”: true,”typeRoots”: [“./node_modules/@types”,”./node_modules/@microsoft”,],”types”: [“webpack-env”,],”lib”: [“es2017″,”dom”,”es2015.collection”,”es2015.promise”]},”include”: [“src//*.ts”,”src//.tsx”,”declaration.d.ts”],”exclude”: [“node_modules”,”**/.spec.ts”]}I also use SPFx-fast-server and have a gulpfile.js as follows:”use strict”;const build = require(“@microsoft/sp-build-web”);build.addSuppression(Warning – [sass] The local CSS class ‘ms-Grid’ is not camelCase and will not be type-safe.);var getTasks = build.rig.getTasks;build.rig.getTasks = function () {var result = getTasks.call(build.rig);result.set(“serve”, result.get(“serve-deprecated”));

return result; };build.tslintCmd.enabled = false;/* fast-serve /const { addFastServe } = require(“spfx-fast-serve-helpers”);addFastServe(build);/ end of fast-serve */build.initialize(require(‘gulp’));build.configureWebpack.mergeConfig({additionalConfiguration: (wpcfg) => {// if dev build, mod config for profiling reactif (wpcfg.mode === “development”) { wpcfg.module.rules.push({
test: /.mjs$/,
include: /node_modules/,
type: ‘javascript/auto’,
});

// add alias for the react-dom profiler
wpcfg.resolve.alias = {
“react-dom$”: “react-dom/profiling”,
};

// remove externalization of react & react-dom

wpcfg.externals = wpcfg.externals.filter((external) => {
return external !== “react” && external !== “react-dom”;
});

}

return wpcfg;
}, });  Read More

​