search

statamic / cms

The core Laravel CMS Composer package
https://statamic.com
Other
4.08k stars 533 forks source link

Statamic 3.3.X upgrade introduces Underscore.js regressions. #5627

Closed dniccum closed 2 years ago

dniccum commented 2 years ago

Bug description

After upgrading from Statamic 3.2.X to Statamic 3.3.X, I am now getting quite a few of Javascript errors within the CP views that indicate that there is an issue with the global inclusion of the Underscore.js library.

The errors that I have received:

  1. _.findWhere is not a function
  2. _.contains is not a function

How to reproduce

After upgrading a 3.2 Statamic website using the Peak Starter Kit to version 3.3, perform the necessary updates, and then compile all of your javascript.

Once the build is complete, visit any of the available collection entry edit views. I have also received this error some of the collection list views as well.

Logs

vue.common.prod.js:6 TypeError: _.findWhere is not a function
    at activeLocalization (PublishForm.vue:389:1)
    at fn.get (vue.common.prod.js:6:26596)
    at fn.evaluate (vue.common.prod.js:6:27746)
    at a.activeLocalization (vue.common.prod.js:6:29650)
    at a.<anonymous> (PublishForm.vue?f295:1:448)
    at a.e._render (vue.common.prod.js:6:35309)
    at a.r (vue.common.prod.js:6:67998)
    at fn.get (vue.common.prod.js:6:26596)
    at new fn (vue.common.prod.js:6:26514)
    at vue.common.prod.js:6:68012

vue.common.prod.js:6 TypeError: _.findWhere is not a function
    at activeLocalization (PublishForm.vue:389:1)
    at fn.get (vue.common.prod.js:6:26596)
    at fn.evaluate (vue.common.prod.js:6:27746)
    at a.activeLocalization (vue.common.prod.js:6:29650)
    at a.<anonymous> (PublishForm.vue?f295:1:448)
    at a.e._render (vue.common.prod.js:6:35309)
    at a.r (vue.common.prod.js:6:67998)
    at fn.get (vue.common.prod.js:6:26596)
    at fn.run (vue.common.prod.js:6:27480)
    at cn (vue.common.prod.js:6:25588)

Versions

Statamic 3.3.2 Pro
Laravel 8.83.5
PHP 8.0.12
aryehraber/statamic-logbook 2.0.2
doublethreedigital/duplicator 2.1.1
joetannenbaum/antlers-stack-tags 0.1.0
octoper/statamic-blade-components 1.0.1
rias/statamic-redirect 2.1.1
ritson/placid-statamic 3.1.0
schierproducts/statamic-announcement-manager dev-main
webographen/statamic-admin-log 1.0.6

Installation

Starter Kit using via CLI

Antlers Parser

regex (default)

Additional details

My package.json file:

{
  "private": true,
  "scripts": {
    "dev": "npm run build-app && cd ./ && mix",
    "development": "npm run build-app && cd ./ && mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "npm run build-app-prod && mix --production",
    "build-app": "cd resources/js/application && npm run dev && cd ../../../",
    "build-app-prod": "cd resources/js/application && npm run production && cd ../../../"
  },
  "author": "Studio 1902",
  "license": "MIT",
  "dependencies": {
    "@alpinejs/collapse": "^3.9.2",
    "@alpinejs/focus": "^3.9.2",
    "@alpinejs/persist": "^3.9.2",
    "@types/moment-timezone": "^0.5.30",
    "alpinejs": "^3.9.2",
    "focus-visible": "^5.2.0",
    "lodash": "^4.17.21",
    "moment-timezone": "^0.5.33"
  },
  "devDependencies": {
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/forms": "^0.5.0",
    "@tailwindcss/typography": "^0.5.2",
    "autoprefixer": "^10.4.4",
    "axios": "^0.26.1",
    "browser-sync": "^2.27.9",
    "browser-sync-webpack-plugin": "^2.3.0",
    "cross-env": "^7.0.3",
    "glob-all": "^3.3.0",
    "laravel-mix": "^6.0.43",
    "postcss": "^8.4.12",
    "postcss-focus-visible": "^6.0.4",
    "postcss-import": "^14.1.0",
    "postcss-nested": "^5.0.6",
    "resolve-url-loader": "^4.0.0",
    "sass": "^1.49.9",
    "sass-loader": "^12.6.0",
    "tailwindcss": "^3.0.23",
    "underscore": "^1.13.2",
    "vue": "^2.6.14",
    "vue-loader": "^15.9.7",
    "vue-template-compiler": "^2.6.14"
  }
}

My mix file

const mix = require('laravel-mix')
const tailwindcss = require('tailwindcss');

mix.js('resources/js/site.js', 'public/js/site.js')
    .sourceMaps(true)

if (mix.inProduction()) {
    mix.version()
        .copy('resources/js/application/dist/js/*', 'public/js')
} else {
    // Yes, this is a little hacky, but it's a workaround.
    mix.combine(['public/js/app-build.js'], 'public/js/app.js');
}

// FOR ADDONS
mix.js('resources/js/cp.js', 'public/vendor/app/js')
    .sourceMaps(true)
    .vue(2)
mix.sass('resources/scss/cp.scss', 'public/vendor/app/css')
//

mix.sass('resources/scss/site.scss', 'public/css/site.css')
    .options({
        processCssUrls: false,
        postCss: [
            require('postcss-import'),
            tailwindcss('tailwind.config.js'),
            require('postcss-nested'),
            require('autoprefixer'),
            require('postcss-focus-visible'),
        ],
    })

// FOR VENDOR PLUGINS
mix.combine([
        'resources/css/vendor/**.css',
    ], 'public/css/vendor.css')
    .combine([
        //
    ], 'public/js/vendor.js', false);
//

mix.options({
    cssNano: { minifyFontValues: false }
});

mix.browserSync({
    proxy: process.env.APP_URL,
    files: [
        'resources/views/**/*.html',
        'resources/js/application/**/*.js',
        'public/**/*.(css|js)',
    ],
    // Option to open in non default OS browser.
    // browser: "firefox",
    notify: false
})
jasonvarga commented 2 years ago

You're compiling the Statamic JavaScript?

dniccum commented 2 years ago

You're compiling the Statamic JavaScript?

No I am not. I do have a custom field type that is being compiled in the cp.js file.

jasonvarga commented 2 years ago

Is your fieldtype using underscore?

dniccum commented 2 years ago

Is your fieldtype using underscore?

No it is not.

afonic commented 2 years ago

If you're using lodash in that fieldtype it probably conflicts with Underscore that Statamic uses. Probably it's trying to take over the _.

jasonvarga commented 2 years ago

Oh yeah, you probably shouldn't use lodash. If we could go back in time, we would pick lodash. But we're stuck now.

michaelr0 commented 2 years ago

We have experienced this issue just recently, in our particular example, it appears to be from https://github.com/jezzdk/statamic-wp-import/issues/2

In Chrome Dev Tools, you can view JS via the network tab and right click on any JS file/request and block the url, then refresh and that'll help narrow down the suspect JS, which in our particular case was public/vendor/statamic-wp-import/js/addon.js

nadinengland commented 1 year ago

@dniccum not sure if you ever sorted this, but I got around this by calling _.noConflict() in my cp.js:

import _ from 'lodash';

_.noConflict();

window.Statamic.booting(() => {
    // ...
});

Hope that helps!