Invalid Element when following Quick-Start Guide

Byrniee commented 4 years ago

I have followed the quick-start guide here to integrate CKEditor with my existing ReactJs project.

I followed the instructions running npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic to install. This gave me the compile error:

ERROR in ./ts/ui/components/RootComponent.tsx
Module not found: Error: Can't resolve 'style-loader' in [PROJECT-PATH]'
 @ ./ts/ui/components/RootComponent.tsx 30:0-50
 @ ./ts/ui/App.tsx
 @ ./init.tsx

I was able to resolve this by running npm install --save style-loader. The project now compiles, however I get an error in the browser:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function 
(for composite components) but got: undefined. You likely forgot to export your component from the 
file it's defined in, or you might have mixed up default and named imports.

I am using a webpack. Please let me know if you need any other information.

My class looks like this (pretty much copied from the quick start guide):

import * as React from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export class App extends React.Component
{
  /** @inheritDoc */
  render()
  {
    return (
      <div className="App">
        <h2>Using CKEditor 5 build in React</h2>
        <CKEditor
          editor={ClassicEditor}
          data="<p>Hello from CKEditor 5!</p>"
          onInit={(editor) =>
          {
            // You can store the "editor" and use when it is needed.
            console.log('Editor is ready to use!', editor);
          }}
          onChange={(event, editor) =>
          {
            const data = editor.getData();
            console.log({ event, editor, data });
          }}
          onBlur={(event, editor) =>
          {
            console.log('Blur.', editor);
          }}
          onFocus={(event, editor) =>
          {
            console.log('Focus.', editor);
          }}
        />
      </div>
    );
  }
}

FilipTokarski commented 4 years ago

Hi, I tried your code and the only thing I had to change was:

export default class App extends React.Component

instead of

export class App extends React.Component

I would advise checking all imports, because TBH it looks like something on your side and not a bug in the editor. But, if that does not help, we'll need some more information ( step by step description, package.json, webpack config, etc. ) to reproduce the issue.

Byrniee commented 4 years ago

Hi @FilipTokarski

Changing to a default export didn't help for me. As for a step-by-step, i'm not sure what more I can add. I followed the quick-start instructions on the page i linked in my previous comment. I guess it's because i'm adding it into an existing project?

package.json:

``` { "name": "project-name", "description": "project", "version": "1.0.0", "private": true, "scripts": { "start": "webpack-dev-server --port 9000 --host 0.0.0.0 --inline --progress --profile --colors --watch --content-base src/ --config webpack.config.dev.js", "build": "webpack --config webpack.config.dev.js -p", "build:prod": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js --config webpack.config.prod.js -p", "test-vix": "karma start karma.vix.config.js", "test-ui": "jest", "test": "npm run test-ui" }, "devDependencies": { "@types/bootstrap": "^4.2.0", "@types/codemirror": "^0.0.76", "@types/dat.gui": "^0.7.2", "@types/datatables.net": "^1.10.14", "@types/debounce": "^1.2.0", "@types/enzyme": "^3.1.15", "@types/geojson": "^7946.0.7", "@types/jasmine": "2.8.7", "@types/jquery": "^3.3.29", "@types/node": "^12.12.11", "@types/plotly.js": "1.44.24", "@types/rc-slider": "^8.6.5", "@types/react": "^16.9.2", "@types/react-color": "^3.0.1", "@types/react-dom": "^16.8.5", "@types/react-grid-layout": "^0.16.7", "@types/react-select": "^3.0.8", "@types/react-sticky": "^6.0.3", "@types/topojson-client": "^3.0.0", "@types/tweenjs": "^1.0.0", "@types/uuid": "^3.4.5", "@types/webgl2": "0.0.5", "@types/webpack": "^4.39.1", "@types/yup": "^0.26.27", "@typescript-eslint/parser": "^3.10.1", "awesome-typescript-loader": "5.2.1", "clean-webpack-plugin": "2.0.1", "copy-webpack-plugin": "^5.1.1", "css-loader": "^1.0.1", "enzyme": "^3.8.0", "enzyme-adapter-react-16": "1.14.0", "eslint": "^7.7.0", "file-loader": "^2.0.0", "fsevents": "^2.1.2", "html-webpack-plugin": "^3.2.0", "imports-loader": "^0.8.0", "is-docker": "^1.1.0", "jasmine-core": "3.1.0", "jest": "^25.1.0", "jest-canvas-mock": "^2.0.0-beta.1", "karma": "^4.4.1", "karma-chrome-launcher": "^2.2.0", "karma-jasmine": "1.1.2", "karma-webpack": "3.0.0", "mini-css-extract-plugin": "^0.4.4", "node-sass": "^4.13.1", "react-test-renderer": "^16.9.0", "sass-loader": "^7.1.0", "source-map-loader": "0.2.3", "style-loader": "^0.23.1", "terser-webpack-plugin": "^2.3.5", "ts-jest": "^23.10.5", "tslint": "5.10.0", "tslint-loader": "3.6.0", "typescript": "^3.7.3", "url-loader": "^1.1.2", "webpack": "4.39.3", "webpack-cli": "3.3.7", "webpack-dev-server": "3.10.3", "webpack-filter-warnings-plugin": "^1.2.1", "webpack-glsl-loader": "^1.0.1" }, "dependencies": { "@ckeditor/ckeditor5-build-classic": "^22.0.0", "@ckeditor/ckeditor5-react": "^2.1.0", "@createjs/tweenjs": "^2.0.0-beta.4", "array-flat-polyfill": "^1.0.1", "codemirror": "^5.48.4", "d3": "3.5.17", "d3-scale": "^3.1.0", "d3-tip": "^0.9.1", "debounce": "^1.2.0", "deck.gl": "^7.3.3", "diff": "^4.0.2", "file-saver": "^2.0.2", "formik": "^1.5.8", "i18next": "^17.0.13", "i18next-browser-languagedetector": "^3.0.3", "i18next-xhr-backend": "^3.1.2", "immutability-helper": "^3.0.1", "isomorphic-fetch": "2.2.1", "json2csv": "^4.5.2", "jspolyfill-array.prototype.find": "^0.1.3", "mobx": "4.8.0", "mobx-react": "5.4.2", "moment": "^2.24.0", "plotly.js": "^1.49.4", "popper.js": "^1.14.6", "promise-polyfill": "8.1.0", "rc-slider": "^8.7.1", "react": "^16.9.0", "react-chart-editor": "0.41.0", "react-codemirror2": "^6.0.0", "react-color": "^2.17.3", "react-dnd": "^9.4.0", "react-dnd-html5-backend": "^9.4.0", "react-dom": "^16.9.0", "react-draggable": "^4.1.0", "react-dropzone": "^10.1.8", "react-flatpickr": "^3.10.6", "react-grid-layout": "^0.17.1", "react-helmet": "^5.2.1", "react-i18next": "^10.12.2", "react-map-gl": "^5.0.10", "react-pivottable": "^0.9.0", "react-plotly.js": "^2.3.0", "react-router-dom": "^5.1.2", "react-select": "^3.0.8", "react-sizeme": "^2.6.7", "react-sortablejs": "^1.5.1", "react-sticky": "^6.0.3", "react-toastify": "^5.3.2", "react-virtualized": "^9.21.1", "screenfull": "^4.2.1", "simpleheat": "^0.4.0", "superagent": "^4.0.0", "superagent-no-cache": "^0.1.1", "superagent-promise": "^1.1.0", "three": "^0.110.0", "topojson-client": "^3.0.0", "uuid": "^3.3.3", "yup": "^0.27.0" } } ```

webpack.config.dev.js:

``` const webpackConfig = require('./webpack.config.prod.js'); module.exports = function(env) { const config = webpackConfig(env); config.module.rules = [ /**************** * PRE-LOADERS *****************/ { enforce: 'pre', test: /\.js$/, use: 'source-map-loader' }, { enforce: 'pre', test: /\.ts$/, exclude: /node_modules/, use: 'tslint-loader' }, /**************** * LOADERS *****************/ { test: /\.css$/, use: ['style-loader', 'css-loader'], }, { test: /\.(scss)$/, use: [ // fallback to style-loader in development process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader, "css-loader", "sass-loader" ] }, { test: /\.glsl$/, loader: 'webpack-glsl-loader' }, { test: /\.woff(2)?(\?[a-z0-9]+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, { test: /\.(ttf|eot|svg|jpg|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: [{ loader: 'file-loader' }] }, { test: /\.(ts|tsx|jsx)$/, exclude: [ /node_modules/ ], use: 'awesome-typescript-loader' } ]; config.devServer = { proxy: { '/api': { target: 'http://localhost:5001/', secure: false } } }; config.devtool = 'cheap-module-source-map'; config.mode = 'development'; config.watchOptions = { ignored: /node_modules/ }; return config; }; ```

webpack.config.prod.js:

``` const path = require('path'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const FilterWarningsPlugin = require('webpack-filter-warnings-plugin'); const TerserPlugin = require('terser-webpack-plugin'); const ROOT = path.resolve( __dirname, 'src' ); const DESTINATION = path.resolve( __dirname, 'dist' ); module.exports = function () { return { context: ROOT, mode: 'production', entry: { 'main': './init.tsx' }, output: { filename: 'js/[name].[chunkhash].js', chunkFilename: 'js/[name].[chunkhash].js', path: DESTINATION }, optimization: { runtimeChunk: { name: 'vendor' }, minimizer: [ new TerserPlugin({ cache: false, parallel: true }), ], splitChunks: { cacheGroups: { default: false, commons: { test: /node_modules/, name: 'vendor', chunks: 'all' } } } }, resolve: { extensions: [".ts", ".tsx", ".js", ".json"], modules: [ ROOT, 'node_modules' ] }, plugins: [ new CleanWebpackPlugin(), new FilterWarningsPlugin({ exclude: /node_modules[\\/]react-colorscales/ }), new CopyWebpackPlugin([ {from: 'static', to: 'static'} ]), new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional filename: "[name].css", chunkFilename: "[id].css" }), new HtmlWebpackPlugin({template: path.join(__dirname, './src/index.html')}), ], module: { rules: [ /**************** * LOADERS *****************/ { test: /\.css$/, use: ['style-loader', 'css-loader'], }, { test: /\.(scss)$/, include: path.resolve(__dirname, 'src'), use: [ // fallback to style-loader in development process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader, "css-loader", "sass-loader" ] }, { test: /\.glsl$/, include: path.resolve(__dirname, 'src'), loader: 'webpack-glsl-loader' }, { test: /\.woff(2)?(\?[a-z0-9]+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, { test: /\.(ttf|eot|svg|jpg|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/, include: path.resolve(__dirname, 'src'), use: [{ loader: 'file-loader' }] }, { test: /\.(ts|tsx|jsx)$/, include: path.resolve(__dirname, 'src'), exclude: [/node_modules/], use: ['awesome-typescript-loader'] } ] }, stats: { timings: true }, }; }; ```

FilipTokarski commented 4 years ago

cc @pomek could you take a look at this?

pomek commented 4 years ago

I'll try to reproduce the issue.

pomek commented 4 years ago

I created an app using CRA. Most probably it was version 3+ since after ejecting, I've got only one webpack config file.

I followed the steps listed in our documentation – https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html#modifying-webpack-configuration – and my app successfully compiled and the editor is displayed on the page.

I'll share files that I had to change/update:

`package.json`

```json { "name": "ckeditor5-eject", "version": "0.1.0", "private": true, "dependencies": { "@babel/core": "7.9.0", "@ckeditor/ckeditor5-basic-styles": "^22.0.0", "@ckeditor/ckeditor5-editor-classic": "^22.0.0", "@ckeditor/ckeditor5-essentials": "^22.0.0", "@ckeditor/ckeditor5-paragraph": "^22.0.0", "@ckeditor/ckeditor5-react": "^2.1.0", "@ckeditor/ckeditor5-theme-lark": "^22.0.0", "@svgr/webpack": "4.3.3", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@typescript-eslint/eslint-plugin": "^2.10.0", "@typescript-eslint/parser": "^2.10.0", "babel-eslint": "10.1.0", "babel-jest": "^24.9.0", "babel-loader": "8.1.0", "babel-plugin-named-asset-import": "^0.3.6", "babel-preset-react-app": "^9.1.2", "camelcase": "^5.3.1", "case-sensitive-paths-webpack-plugin": "2.3.0", "css-loader": "3.4.2", "dotenv": "8.2.0", "dotenv-expand": "5.1.0", "eslint": "^6.6.0", "eslint-config-react-app": "^5.2.1", "eslint-loader": "3.0.3", "eslint-plugin-flowtype": "4.6.0", "eslint-plugin-import": "2.20.1", "eslint-plugin-jsx-a11y": "6.2.3", "eslint-plugin-react": "7.19.0", "eslint-plugin-react-hooks": "^1.6.1", "file-loader": "4.3.0", "fs-extra": "^8.1.0", "html-webpack-plugin": "4.0.0-beta.11", "identity-obj-proxy": "3.0.0", "jest": "24.9.0", "jest-environment-jsdom-fourteen": "1.0.1", "jest-resolve": "24.9.0", "jest-watch-typeahead": "0.4.2", "mini-css-extract-plugin": "0.9.0", "optimize-css-assets-webpack-plugin": "5.0.3", "pnp-webpack-plugin": "1.6.4", "postcss-flexbugs-fixes": "4.1.0", "postcss-loader": "3.0.0", "postcss-normalize": "8.0.1", "postcss-preset-env": "6.7.0", "postcss-safe-parser": "4.0.1", "react": "^16.13.1", "react-app-polyfill": "^1.0.6", "react-dev-utils": "^10.2.1", "react-dom": "^16.13.1", "resolve": "1.15.0", "resolve-url-loader": "3.1.1", "sass-loader": "8.0.2", "semver": "6.3.0", "style-loader": "^1.2.1", "terser-webpack-plugin": "2.3.5", "ts-pnp": "1.1.6", "url-loader": "2.3.0", "webpack": "4.42.0", "webpack-dev-server": "3.10.3", "webpack-manifest-plugin": "2.2.0", "workbox-webpack-plugin": "4.3.1" }, "devDependencies": { "@ckeditor/ckeditor5-dev-utils": "^23.5.1", "raw-loader": "3" }, "scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", "test": "node scripts/test.js" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "jest": { "roots": [ "/src" ], "collectCoverageFrom": [ "src/**/*.{js,jsx,ts,tsx}", "!src/**/*.d.ts" ], "setupFiles": [ "react-app-polyfill/jsdom" ], "setupFilesAfterEnv": [ "/src/setupTests.js" ], "testMatch": [ "/src/**/__tests__/**/*.{js,jsx,ts,tsx}", "/src/**/*.{spec,test}.{js,jsx,ts,tsx}" ], "testEnvironment": "jest-environment-jsdom-fourteen", "transform": { "^.+\\.(js|jsx|ts|tsx)$": "/node_modules/babel-jest", "^.+\\.css$": "/config/jest/cssTransform.js", "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "/config/jest/fileTransform.js" }, "transformIgnorePatterns": [ "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$", "^.+\\.module\\.(css|sass|scss)$" ], "modulePaths": [], "moduleNameMapper": { "^react-native$": "react-native-web", "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy" }, "moduleFileExtensions": [ "web.js", "js", "web.ts", "ts", "web.tsx", "tsx", "json", "web.jsx", "jsx", "node" ], "watchPlugins": [ "jest-watch-typeahead/filename", "jest-watch-typeahead/testname" ] }, "babel": { "presets": [ "react-app" ] } } ```

There are new entries (dependencies and dev dependencies) after installing the required packages. Generated by Yarn.

`config/webpack.config.js`

```js 'use strict'; const fs = require('fs'); const path = require('path'); const webpack = require('webpack'); const resolve = require('resolve'); const PnpWebpackPlugin = require('pnp-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin'); const TerserPlugin = require('terser-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const safePostCssParser = require('postcss-safe-parser'); const ManifestPlugin = require('webpack-manifest-plugin'); const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent'); const paths = require('./paths'); const modules = require('./modules'); const getClientEnvironment = require('./env'); const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin'); const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin'); const typescriptFormatter = require('react-dev-utils/typescriptFormatter'); const { styles } = require( '@ckeditor/ckeditor5-dev-utils' ); const postcssNormalize = require('postcss-normalize'); const appPackageJson = require(paths.appPackageJson); // Source maps are resource heavy and can cause out of memory issue for large source files. const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; // Some apps do not need the benefits of saving a web request, so not inlining the chunk // makes for a smoother build process. const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false'; const isExtendingEslintConfig = process.env.EXTEND_ESLINT === 'true'; const imageInlineSizeLimit = parseInt( process.env.IMAGE_INLINE_SIZE_LIMIT || '10000' ); // Check if TypeScript is setup const useTypeScript = fs.existsSync(paths.appTsConfig); // style files regexes const cssRegex = /\.css$/; const cssModuleRegex = /\.module\.css$/; const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/; // This is the production and development configuration. // It is focused on developer experience, fast rebuilds, and a minimal bundle. module.exports = function(webpackEnv) { const isEnvDevelopment = webpackEnv === 'development'; const isEnvProduction = webpackEnv === 'production'; // Variable used for enabling profiling in Production // passed into alias object. Uses a flag if passed into the build command const isEnvProductionProfile = isEnvProduction && process.argv.includes('--profile'); // We will provide `paths.publicUrlOrPath` to our app // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz. // Get environment variables to inject into our app. const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1)); // common function to get style loaders const getStyleLoaders = (cssOptions, preProcessor) => { const loaders = [ isEnvDevelopment && require.resolve('style-loader'), isEnvProduction && { loader: MiniCssExtractPlugin.loader, // css is located in `static/css`, use '../../' to locate index.html folder // in production `paths.publicUrlOrPath` can be a relative path options: paths.publicUrlOrPath.startsWith('.') ? { publicPath: '../../' } : {}, }, { loader: require.resolve('css-loader'), options: cssOptions, }, { // Options for PostCSS as we reference these options twice // Adds vendor prefixing based on your specified browser support in // package.json loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebook/create-react-app/issues/2677 ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), require('postcss-preset-env')({ autoprefixer: { flexbox: 'no-2009', }, stage: 3, }), // Adds PostCSS Normalize as the reset css with default options, // so that it honors browserslist config in package.json // which in turn let's users customize the target behavior as per their needs. postcssNormalize(), ], sourceMap: isEnvProduction && shouldUseSourceMap, }, }, ].filter(Boolean); if (preProcessor) { loaders.push( { loader: require.resolve('resolve-url-loader'), options: { sourceMap: isEnvProduction && shouldUseSourceMap, }, }, { loader: require.resolve(preProcessor), options: { sourceMap: true, }, } ); } return loaders; }; return { mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development', // Stop compilation early in production bail: isEnvProduction, devtool: isEnvProduction ? shouldUseSourceMap ? 'source-map' : false : isEnvDevelopment && 'cheap-module-source-map', // These are the "entry points" to our application. // This means they will be the "root" imports that are included in JS bundle. entry: [ // Include an alternative client for WebpackDevServer. A client's job is to // connect to WebpackDevServer by a socket and get notified about changes. // When you save a file, the client will either apply hot updates (in case // of CSS changes), or refresh the page (in case of JS changes). When you // make a syntax error, this client will display a syntax error overlay. // Note: instead of the default WebpackDevServer client, we use a custom one // to bring better experience for Create React App users. You can replace // the line below with these two lines if you prefer the stock client: // require.resolve('webpack-dev-server/client') + '?/', // require.resolve('webpack/hot/dev-server'), isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'), // Finally, this is your app's code: paths.appIndexJs, // We include the app code last so that if there is a runtime error during // initialization, it doesn't blow up the WebpackDevServer client, and // changing JS code would still trigger a refresh. ].filter(Boolean), output: { // The build folder. path: isEnvProduction ? paths.appBuild : undefined, // Add /* filename */ comments to generated require()s in the output. pathinfo: isEnvDevelopment, // There will be one main bundle, and one file per asynchronous chunk. // In development, it does not produce real files. filename: isEnvProduction ? 'static/js/[name].[contenthash:8].js' : isEnvDevelopment && 'static/js/bundle.js', // TODO: remove this when upgrading to webpack 5 futureEmitAssets: true, // There are also additional JS chunk files if you use code splitting. chunkFilename: isEnvProduction ? 'static/js/[name].[contenthash:8].chunk.js' : isEnvDevelopment && 'static/js/[name].chunk.js', // webpack uses `publicPath` to determine where the app is being served from. // It requires a trailing slash, or the file assets will get an incorrect path. // We inferred the "public path" (such as / or /my-project) from homepage. publicPath: paths.publicUrlOrPath, // Point sourcemap entries to original disk location (format as URL on Windows) devtoolModuleFilenameTemplate: isEnvProduction ? info => path .relative(paths.appSrc, info.absoluteResourcePath) .replace(/\\/g, '/') : isEnvDevelopment && (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')), // Prevents conflicts when multiple webpack runtimes (from different apps) // are used on the same page. jsonpFunction: `webpackJsonp${appPackageJson.name}`, // this defaults to 'window', but by setting it to 'this' then // module chunks which are built will work in web workers as well. globalObject: 'this', }, optimization: { minimize: isEnvProduction, minimizer: [ // This is only used in production mode new TerserPlugin({ terserOptions: { parse: { // We want terser to parse ecma 8 code. However, we don't want it // to apply any minification steps that turns valid ecma 5 code // into invalid ecma 5 code. This is why the 'compress' and 'output' // sections only apply transformations that are ecma 5 safe // https://github.com/facebook/create-react-app/pull/4234 ecma: 8, }, compress: { ecma: 5, warnings: false, // Disabled because of an issue with Uglify breaking seemingly valid code: // https://github.com/facebook/create-react-app/issues/2376 // Pending further investigation: // https://github.com/mishoo/UglifyJS2/issues/2011 comparisons: false, // Disabled because of an issue with Terser breaking valid code: // https://github.com/facebook/create-react-app/issues/5250 // Pending further investigation: // https://github.com/terser-js/terser/issues/120 inline: 2, }, mangle: { safari10: true, }, // Added for profiling in devtools keep_classnames: isEnvProductionProfile, keep_fnames: isEnvProductionProfile, output: { ecma: 5, comments: false, // Turned on because emoji and regex is not minified properly using default // https://github.com/facebook/create-react-app/issues/2488 ascii_only: true, }, }, sourceMap: shouldUseSourceMap, }), // This is only used in production mode new OptimizeCSSAssetsPlugin({ cssProcessorOptions: { parser: safePostCssParser, map: shouldUseSourceMap ? { // `inline: false` forces the sourcemap to be output into a // separate file inline: false, // `annotation: true` appends the sourceMappingURL to the end of // the css file, helping the browser find the sourcemap annotation: true, } : false, }, cssProcessorPluginOptions: { preset: ['default', { minifyFontValues: { removeQuotes: false } }], }, }), ], // Automatically split vendor and commons // https://twitter.com/wSokra/status/969633336732905474 // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366 splitChunks: { chunks: 'all', name: false, }, // Keep the runtime chunk separated to enable long term caching // https://twitter.com/wSokra/status/969679223278505985 // https://github.com/facebook/create-react-app/issues/5358 runtimeChunk: { name: entrypoint => `runtime-${entrypoint.name}`, }, }, resolve: { // This allows you to set a fallback for where webpack should look for modules. // We placed these paths second because we want `node_modules` to "win" // if there are any conflicts. This matches Node resolution mechanism. // https://github.com/facebook/create-react-app/issues/253 modules: ['node_modules', paths.appNodeModules].concat( modules.additionalModulePaths || [] ), // These are the reasonable defaults supported by the Node ecosystem. // We also include JSX as a common component filename extension to support // some tools, although we do not recommend using it, see: // https://github.com/facebook/create-react-app/issues/290 // `web` extension prefixes have been added for better support // for React Native Web. extensions: paths.moduleFileExtensions .map(ext => `.${ext}`) .filter(ext => useTypeScript || !ext.includes('ts')), alias: { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 'react-native': 'react-native-web', // Allows for better profiling with ReactDevTools ...(isEnvProductionProfile && { 'react-dom$': 'react-dom/profiling', 'scheduler/tracing': 'scheduler/tracing-profiling', }), ...(modules.webpackAliases || {}), }, plugins: [ // Adds support for installing with Plug'n'Play, leading to faster installs and adding // guards against forgotten dependencies and such. PnpWebpackPlugin, // Prevents users from importing files from outside of src/ (or node_modules/). // This often causes confusion because we only process files within src/ with babel. // To fix this, we prevent you from importing files out of src/ -- if you'd like to, // please link the files into your node_modules/ and let module-resolution kick in. // Make sure your source files are compiled, as they will not be processed in any way. new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]), ], }, resolveLoader: { plugins: [ // Also related to Plug'n'Play, but this time it tells webpack to load its loaders // from the current package. PnpWebpackPlugin.moduleLoader(module), ], }, module: { strictExportPresence: true, rules: [ // Disable require.ensure as it's not a standard language feature. { parser: { requireEnsure: false } }, // First, run the linter. // It's important to do this before Babel processes the JS. { test: /\.(js|mjs|jsx|ts|tsx)$/, enforce: 'pre', use: [ { options: { cache: true, formatter: require.resolve('react-dev-utils/eslintFormatter'), eslintPath: require.resolve('eslint'), resolvePluginsRelativeTo: __dirname, }, loader: require.resolve('eslint-loader'), }, ], include: paths.appSrc, }, { // "oneOf" will traverse all following loaders until one will // match the requirements. When no loader matches it will fall // back to the "file" loader at the end of the loader list. oneOf: [ // "url" loader works like "file" loader except that it embeds assets // smaller than specified limit in bytes as data URLs to avoid requests. // A missing `test` is equivalent to a match. { test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], loader: require.resolve('url-loader'), options: { limit: imageInlineSizeLimit, name: 'static/media/[name].[hash:8].[ext]', }, }, // Process application JS with Babel. // The preset includes JSX, Flow, TypeScript, and some ESnext features. { test: /\.(js|mjs|jsx|ts|tsx)$/, include: paths.appSrc, loader: require.resolve('babel-loader'), options: { customize: require.resolve( 'babel-preset-react-app/webpack-overrides' ), plugins: [ [ require.resolve('babel-plugin-named-asset-import'), { loaderMap: { svg: { ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]', }, }, }, ], ], // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/babel-loader/ // directory for faster rebuilds. cacheDirectory: true, // See #6846 for context on why cacheCompression is disabled cacheCompression: false, compact: isEnvProduction, }, }, // Process any JS outside of the app with Babel. // Unlike the application JS, we only compile the standard ES features. { test: /\.(js|mjs)$/, exclude: /@babel(?:\/|\\{1,2})runtime/, loader: require.resolve('babel-loader'), options: { babelrc: false, configFile: false, compact: false, presets: [ [ require.resolve('babel-preset-react-app/dependencies'), { helpers: true }, ], ], cacheDirectory: true, // See #6846 for context on why cacheCompression is disabled cacheCompression: false, // Babel sourcemaps are needed for debugging into node_modules // code. Without the options below, debuggers like VSCode // show incorrect code and set breakpoints on the wrong lines. sourceMaps: shouldUseSourceMap, inputSourceMap: shouldUseSourceMap, }, }, // "postcss" loader applies autoprefixer to our CSS. // "css" loader resolves paths in CSS and adds assets as dependencies. // "style" loader turns CSS into JS modules that inject

ckeditor / ckeditor5-react

Invalid Element when following Quick-Start Guide #180

`package.json`

`config/webpack.config.js`