FullCalendar is not defined. Laravel 8 Fullcalendar-scheduler version 5.6 es6

Question

Uncaught ReferenceError: FullCalendar is not defined when npm install. If I use the cdn source inside my calendar blade. Calendar will display correctly. However, I change to npm install and I am stuck

composer install npm i npm run dev

webpack.mix.js

let mix = require("laravel-mix");
let productionSourceMaps = false;

mix.js('resources/js/app.js', 'public/js')

mix.sass('resources/sass/app.scss', 'public/css')
.sourceMaps()
if (mix.inProduction()) {
    mix.version();
}

app.js

import 'jquery';
require('./bootstrap');
import 'moment';
import 'fullcalendar-scheduler';

app.scss

@import "~bootstrap/dist/css/bootstrap.css";
@import "~fullcalendar-scheduler/main.css";
@import "~bootstrap-select/dist/css/bootstrap-select.min.css";
@import "~shop-item/dist/bootstrap/css/bootstrap.css";
@import "~font-awesome/css/font-awesome.css";
@import "variables";

package.json

{
    "private": true,
    "scripts": {
        "dev": "mix",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21.1",
        "css-loader": "^5.2.1",
        "laravel-mix": "^6.0.16",
        "lodash": "^4.17.21",
        "postcss": "^8.2.10",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.10",
        "sass-loader": "^11.0.1"
    },
    "dependencies": {
        "autoprefixer": "^10.2.5",
        "bootstrap": "^4.5.3",
        "bootstrap-datetimepicker": "0.0.7",
        "bootstrap-select": "^1.13.18",
        "chartjs": "^0.3.24",
        "datatables.net": "^1.10.24",
        "font-awesome": "^4.7.0",
        "fullcalendar-scheduler": "5.6.0",
        "jquery": "^3.6.0",
        "moment": "^2.29.1",
        "popper.js": "^1.16.1",
        "style-loader": "^2.0.0",
        "waypoints": "^4.0.1",
        "webpack": "^5.35.0",
        "webpack-cli": "^4.6.0"
    }
}

Answer 1

I finally got... I just had not learned enough yet.. But, hope this helps others. I needed both a webpack.config.js and a webpack.mix.js and a little work on the package.json. Here are the changes that worked for me. Also, I could never get npm i fullcalendar-scheduler to work in the build.. I had to use @fullcalendar

webpack.config.js

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './resources/fullcalendar/main.js',
  resolve: {
    extensions: [ '.js' ]
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          { loader: 'css-loader', options: { importLoaders: 1 } }
        ]
      }
    ]
  },
  output: {
    filename: 'main.js',
    path: path.join(__dirname, 'public/dist')
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'main.css'
    })
  ]
}

webpack.mix.js

let mix = require("laravel-mix");
mix
  .js("resources/js/app.js", "public/js")
  .sass("resources/sass/app.scss", "public/css");

package.json

{
  "private": true,
  "scripts": {
    "dev": "mix && npm run build",
    "development": "mix",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production",
    "build": "webpack",
    "watch": "webpack --watch",
    "clean": "rm -rf dist"
  },
  "devDependencies": {
    "css-loader": "^4.3.0",
    "laravel-mix": "^6.0.18",
    "mini-css-extract-plugin": "^1.2.0",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.32.11",
    "sass-loader": "^11.0.1",
    "webpack": "^5.3.0",
    "webpack-cli": "^4.1.0"
  },
  "dependencies": {
    "@fullcalendar/adaptive": "^5.6.0",
    "@fullcalendar/core": "^5.6.0",
    "@fullcalendar/daygrid": "^5.6.0",
    "@fullcalendar/interaction": "^5.6.0",
    "@fullcalendar/list": "^5.6.0",
    "@fullcalendar/resource-timeline": "^5.6.0",
    "@fullcalendar/timegrid": "^5.6.0",
    "autoprefixer": "^10.2.5",
    "bootstrap": "^4.6.0",
    "jquery": "^3.6.0",
    "webpack": "^5.35.0",
    "webpack-cli": "^4.6.0"
}

Answer 2

With Webpack, it's always better to use "require" instead of "import" in app.js

So try this:

var moment = require ('moment'); require ('fullcalendar-scheduler');