Can't Source Shared Library/Resources for Bryntum Scheduler in React Project When Calling Webpack

Question

Ok, so I'm working with the Bryntum Scheduler trial version 3.1.1. I created a new react project folder and ran the installer to pull the Bryntum stuff into the project. I also copied the Bryntum shared resources into the main project folder (not the folder of the individual project) (folder: _shared_b). I also copied the "simple" example project source files into my new project. I also ran the build onto the shared resources located under the examples folder (the copy in my main project structure is also built) (folder: _shared_a). And I copied the build folder from the main trial folder into the project top level (folder: _build). So, I have a structure like this:

+ Projects
-- _build
-- _shared_a
-- _shared_b
-- react_scheduler

In my package.json in the dependencies I have the following to refer to these folders:

"dependencies": {
  "@testing-library/jest-dom": "^4.2.4",
  "@testing-library/react": "^9.5.0",
  "@testing-library/user-event": "^7.2.1",
  "bryntum-react-shared": "file:../../_shared_a/build",
  "bryntum-resources": "file:../../_shared_b",
  "bryntum-scheduler": "file:../../_build",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
  "react-scripts": "3.4.1"
}

And here's my webpack.config.js:

module.exports = {
    output: {
        filename: "scheduler.js",
        path: __dirname + "/dist"
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        cacheDirectory: true,
                        babelrc: false,
                        presets: [
                            "@babel/env",
                            "@babel/react"
                        ],
                        plugins: [
                            "@babel/plugin-proposal-class-properties"
                        ]
                    }
                }
            },
            {
                test: /\.html$/,
                use: {
                    loader: "html-loader"
                }
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [
                    {
                        loader: 'file-loader',
                    }
                ]
            },
            {
                test: /\.(ttf|woff|woff2|eot)$/i,
                use: [
                    {
                        loader: 'file-loader',
                    }
                ]
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                        'style-loader',
                    // Translates CSS into CommonJS
                        'css-loader',
                    // Compiles Sass to CSS
                        'sass-loader'
                ]
            }
        ]
    }
};

For comparison the path references by default in the "simple" example looks like this:

"bryntum-react-shared": "file:../../_shared/build",
"bryntum-resources": "file:../../../_shared",
"bryntum-scheduler": "file:../../../../build",

The source project has the following path:

\scheduler-3.1.1-trial\examples\react\javascript\simple

The original _shared_a has the following path:

\scheduler-3.1.1-trial\examples\react_shared

The original _shared_b has this path:

\scheduler-3.1.1-trial\examples_shared

And the original _build has this path:

\scheduler-3.1.1-trial\build

However, when I run webpack (using npx webpack --mode production) to have the whole thing built and packaged, I get these errors:

ERROR in ./src/components/Header.js
Module not found: Error: Can't resolve 'bryntum-react-shared' in 'C:\Projects\react-scheduler\src\components'
 @ ./src/components/Header.js 23:0-78 51:47-52 54:39-52 60:39-52 67:39-52 76:39-55
 @ ./src/containers/Main.js
 @ ./src/App.js
 @ ./src/index.js

ERROR in ./src/containers/Main.js
Module not found: Error: Can't resolve 'bryntum-react-shared' in 'C:\Projects\react-scheduler\src\containers'
 @ ./src/containers/Main.js 26:0-56 122:43-59
 @ ./src/App.js
 @ ./src/index.js

ERROR in ./src/App.js
Module not found: Error: Can't resolve 'bryntum-react-shared/resources/shared.scss' in 'C:\Projects\react-scheduler\src'
 @ ./src/App.js 8:0-52
 @ ./src/index.js

So, what is it I'm missing?

Answer 1

The easiest way is to generate React app with Create React App. There is a video guide showing the whole process in Bryntum React Integration Guide.

The minimum files for the empty Scheduler to appear in the browser are:

App.js:

import React from 'react';
import './App.css';
import { BryntumScheduler } from 'bryntum-react-shared';

function App() {
  return (
    <BryntumScheduler />
  );
}

export default App;

and App.css:

@import "~bryntum-scheduler/scheduler.stockholm.css"

If you cannot or do not want to use CRA scripts, you can run npm run eject in bryntum-demo directory afterwards. The workable webpack.config.js is to be found in config directory created by eject.

Then you can either add what you need into it or you can merge it with your webpack.config.js.

Note: I've created many React apps with CRA and so far I haven't found the reason why should I eject or use a custom Webpack configuration. Maybe you can go with CRA as well.