search

muxinc / strapi-plugin-mux-video-uploader

A Strapi plugin for managing uploads to Mux.
https://mux.com
23 stars 16 forks source link

Strapi v4 Upgrade #21

Closed erikpena closed 2 years ago

erikpena commented 2 years ago

This PR is to upgrade the plugin to support Strapi's v4 release.

erikpena commented 2 years ago

Hey @markkaylor, To make your teams advisement easier, I downgraded the project to standard JavaScript (no Typescript). Testing it, I'm still getting the same error, so I don't think it's a Typescript issue—

strapi_1    | $ strapi develop
strapi_1    | Building your admin UI with development configuration ...
strapi_1    | ℹ Compiling Webpack
strapi_1    | ModuleNotFoundError: Module not found: Error: Can't resolve '@strapi/helper-plugin' in '/srv/strapi-plugin-mux-video-uploader/admin/src'
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/Compilation.js:2011:28
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:795:13
strapi_1    |     at eval (eval at create (/srv/strapi/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:275:22
strapi_1    |     at eval (eval at create (/srv/strapi/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:431:22
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:124:11
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:667:25
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:852:8
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:972:5
strapi_1    |     at /srv/strapi/app/node_modules/neo-async/async.js:6883:13
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:955:45
strapi_1    |     at finishWithoutResolve (/srv/strapi/app/node_modules/enhanced-resolve/lib/Resolver.js:296:11)
strapi_1    |     at /srv/strapi/app/node_modules/enhanced-resolve/lib/Resolver.js:362:15
strapi_1    |     at /srv/strapi/app/node_modules/enhanced-resolve/lib/Resolver.js:410:5
strapi_1    |     at eval (eval at create (/srv/strapi/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
strapi_1    | resolve '@strapi/helper-plugin' in '/srv/strapi-plugin-mux-video-uploader/admin/src'
strapi_1    |   Parsed request is a module
strapi_1    |   using description file: /srv/strapi-plugin-mux-video-uploader/package.json (relative path: ./admin/src)
strapi_1    |     Field 'browser' doesn't contain a valid alias configuration
strapi_1    |     resolve as module
strapi_1    |       /srv/strapi-plugin-mux-video-uploader/admin/src/node_modules doesn't exist or is not a directory
strapi_1    |       /srv/strapi-plugin-mux-video-uploader/admin/node_modules doesn't exist or is not a directory
strapi_1    |       looking for modules in /srv/strapi-plugin-mux-video-uploader/node_modules
strapi_1    |         single file module
strapi_1    |           using description file: /srv/strapi-plugin-mux-video-uploader/package.json (relative path: ./node_modules/@strapi/helper-plugin)
strapi_1    |             no extension
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi-plugin-mux-video-uploader/node_modules/@strapi/helper-plugin doesn't exist
strapi_1    |             .js
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi-plugin-mux-video-uploader/node_modules/@strapi/helper-plugin.js doesn't exist
strapi_1    |             .jsx
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi-plugin-mux-video-uploader/node_modules/@strapi/helper-plugin.jsx doesn't exist
strapi_1    |             .react.js
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi-plugin-mux-video-uploader/node_modules/@strapi/helper-plugin.react.js doesn't exist
strapi_1    |         /srv/strapi-plugin-mux-video-uploader/node_modules/@strapi/helper-plugin doesn't exist
strapi_1    |       /srv/node_modules doesn't exist or is not a directory
strapi_1    |       /node_modules doesn't exist or is not a directory
strapi_1    |       looking for modules in /srv/strapi/app/node_modules/@strapi/admin/node_modules
strapi_1    |         single file module
strapi_1    |           using description file: /srv/strapi/app/node_modules/@strapi/admin/package.json (relative path: ./node_modules/@strapi/helper-plugin)
strapi_1    |             no extension
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi/app/node_modules/@strapi/admin/node_modules/@strapi/helper-plugin doesn't exist
strapi_1    |             .js
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi/app/node_modules/@strapi/admin/node_modules/@strapi/helper-plugin.js doesn't exist
strapi_1    |             .jsx
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi/app/node_modules/@strapi/admin/node_modules/@strapi/helper-plugin.jsx doesn't exist
strapi_1    |             .react.js
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi/app/node_modules/@strapi/admin/node_modules/@strapi/helper-plugin.react.js doesn't exist
strapi_1    |         /srv/strapi/app/node_modules/@strapi/admin/node_modules/@strapi/helper-plugin doesn't exist
strapi_1    | ModuleNotFoundError: Module not found: Error: Can't resolve '@strapi/helper-plugin' in '/srv/strapi-plugin-mux-video-uploader/admin/src'
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/Compilation.js:2011:28
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:795:13
strapi_1    |     at eval (eval at create (/srv/strapi/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:275:22
strapi_1    |     at eval (eval at create (/srv/strapi/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:431:22
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:124:11
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:667:25
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:852:8
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:972:5
strapi_1    |     at /srv/strapi/app/node_modules/neo-async/async.js:6883:13
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:955:45
strapi_1    |     at finishWithoutResolve (/srv/strapi/app/node_modules/enhanced-resolve/lib/Resolver.js:296:11)
strapi_1    |     at /srv/strapi/app/node_modules/enhanced-resolve/lib/Resolver.js:362:15
strapi_1    |     at /srv/strapi/app/node_modules/enhanced-resolve/lib/Resolver.js:410:5
strapi_1    |     at eval (eval at create (/srv/strapi/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
strapi_1    | resolve '@strapi/helper-plugin' in '/srv/strapi-plugin-mux-video-uploader/admin/src'
strapi_1    |   Parsed request is a module
strapi_1    |   using description file: /srv/strapi-plugin-mux-video-uploader/package.json (relative path: ./admin/src)
strapi_1    |     Field 'browser' doesn't contain a valid alias configuration
strapi_1    |     resolve as module
strapi_1    |       /srv/strapi-plugin-mux-video-uploader/admin/src/node_modules doesn't exist or is not a directory
strapi_1    |       /srv/strapi-plugin-mux-video-uploader/admin/node_modules doesn't exist or is not a directory
strapi_1    |       looking for modules in /srv/strapi-plugin-mux-video-uploader/node_modules
strapi_1    |         single file module
strapi_1    |           using description file: /srv/strapi-plugin-mux-video-uploader/package.json (relative path: ./node_modules/@strapi/helper-plugin)
strapi_1    |             no extension
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi-plugin-mux-video-uploader/node_modules/@strapi/helper-plugin doesn't exist
strapi_1    |             .js
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi-plugin-mux-video-uploader/node_modules/@strapi/helper-plugin.js doesn't exist
strapi_1    |             .jsx
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi-plugin-mux-video-uploader/node_modules/@strapi/helper-plugin.jsx doesn't exist
strapi_1    |             .react.js
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi-plugin-mux-video-uploader/node_modules/@strapi/helper-plugin.react.js doesn't exist
strapi_1    |         /srv/strapi-plugin-mux-video-uploader/node_modules/@strapi/helper-plugin doesn't exist
strapi_1    |       /srv/node_modules doesn't exist or is not a directory
strapi_1    |       /node_modules doesn't exist or is not a directory
strapi_1    |       looking for modules in /srv/strapi/app/node_modules/@strapi/admin/node_modules
strapi_1    |         single file module
strapi_1    |           using description file: /srv/strapi/app/node_modules/@strapi/admin/package.json (relative path: ./node_modules/@strapi/helper-plugin)
strapi_1    |             no extension
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi/app/node_modules/@strapi/admin/node_modules/@strapi/helper-plugin doesn't exist
strapi_1    |             .js
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi/app/node_modules/@strapi/admin/node_modules/@strapi/helper-plugin.js doesn't exist
strapi_1    |             .jsx
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi/app/node_modules/@strapi/admin/node_modules/@strapi/helper-plugin.jsx doesn't exist
strapi_1    |             .react.js
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi/app/node_modules/@strapi/admin/node_modules/@strapi/helper-plugin.react.js doesn't exist
strapi_1    |         /srv/strapi/app/node_modules/@strapi/admin/node_modules/@strapi/helper-plugin doesn't exist
strapi_1    | error Command failed with exit code 1.
strapi_1    | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
strapi_1 exited with code 1
markkaylor commented 2 years ago

I'm getting many errors related to the switch back to js I think:

// yarn develop --watch-admin
 error: Could not load js config file /Users/markkaylor/2022/Strapi/examples/getstarted/src/plugins/mux-video-uploader/strapi-server.js: Cannot use import statement outside a module
// yarn develop
ModuleNotFoundError: Module not found: Error: Can't resolve '../../../../types' in '/Users/markkaylor/2022/Strapi/examples/getstarted/src/plugins/mux-video-uploader/admin/src/components/modal-details'

On your side could you try in the Strapi application:

rm -rf build .cache node_modules && yarn

then in the plugin

rm -rf node_modules && yarn

@erikpena

erikpena commented 2 years ago

Hey @markkaylor, hmm that's odd because those references aren't actually being used so it shouldn't have been trying to load those type files.

At any rate, I commented out the imports for those references on the plugin. I then ran the command you specified—

% rm -rf node_modules && yarn install
yarn install v1.22.10
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
warning "@buffetjs/core > @buffetjs/utils@3.3.0" has unmet peer dependency "yup@^0.27.0".
warning "@buffetjs/core > react-dates@21.8.0" has unmet peer dependency "@babel/runtime@^7.0.0".
warning "@buffetjs/core > react-dates > react-with-styles@4.1.0" has unmet peer dependency "@babel/runtime@^7.0.0".
warning "@buffetjs/core > react-dates > react-with-styles-interface-css@6.0.0" has unmet peer dependency "@babel/runtime@^7.0.0".
warning " > styled-components@5.2.0" has unmet peer dependency "react-is@>= 16.8.0".
[5/5] 🔨  Building fresh packages...

✨  Done in 10.01s.

I then cleared the .cache and build directories on my Strapi install and brought it up. Without going too much into the weeds, I have a volume mount on my host machine into my Strapi's container (which is why I'm able to run the rm command)—

% rm -rf ./app/.cache ./app/build && docker compose up
[+] Running 3/0
 ⠿ Container v4_postgres_1  Created                                                                         0.0s
 ⠿ Container v4_smee_1      Created                                                                         0.0s
 ⠿ Container v4_strapi_1    Created                                                                         0.0s
Attaching to postgres_1, smee_1, strapi_1
smee_1      | Forwarding https://smee.io/erikp-mux to http://strapi:1337/mux-video-uploader/webhook-handler
smee_1      | Connected https://smee.io/erikp-mux
postgres_1  | 
postgres_1  | PostgreSQL Database directory appears to contain a database; Skipping initialization
postgres_1  | 
postgres_1  | 2022-01-21 04:20:08.679 UTC [1] LOG:  starting PostgreSQL 14.1 (Debian 14.1-1.pgdg110+1) on x86_64-pc-linux-gnu, compiled by gcc (Debian 10.2.1-6) 10.2.1 20210110, 64-bit
postgres_1  | 2022-01-21 04:20:08.680 UTC [1] LOG:  listening on IPv4 address "0.0.0.0", port 5432
postgres_1  | 2022-01-21 04:20:08.680 UTC [1] LOG:  listening on IPv6 address "::", port 5432
postgres_1  | 2022-01-21 04:20:08.687 UTC [1] LOG:  listening on Unix socket "/var/run/postgresql/.s.PGSQL.5432"
postgres_1  | 2022-01-21 04:20:08.711 UTC [30] LOG:  database system was shut down at 2022-01-21 04:11:05 UTC
postgres_1  | 2022-01-21 04:20:08.747 UTC [1] LOG:  database system is ready to accept connections
strapi_1    | yarn run v1.22.15
strapi_1    | $ strapi develop
strapi_1    | Building your admin UI with development configuration ...
strapi_1    | ℹ Compiling Webpack
strapi_1    | ModuleNotFoundError: Module not found: Error: Can't resolve '@strapi/helper-plugin' in '/srv/strapi-plugin-mux-video-uploader/admin/src'
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/Compilation.js:2011:28
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:795:13
strapi_1    |     at eval (eval at create (/srv/strapi/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:275:22
strapi_1    |     at eval (eval at create (/srv/strapi/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:431:22
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:124:11
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:667:25
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:852:8
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:972:5
strapi_1    |     at /srv/strapi/app/node_modules/neo-async/async.js:6883:13
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:955:45
strapi_1    |     at finishWithoutResolve (/srv/strapi/app/node_modules/enhanced-resolve/lib/Resolver.js:296:11)
strapi_1    |     at /srv/strapi/app/node_modules/enhanced-resolve/lib/Resolver.js:362:15
strapi_1    |     at /srv/strapi/app/node_modules/enhanced-resolve/lib/Resolver.js:410:5
strapi_1    |     at eval (eval at create (/srv/strapi/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
strapi_1    | resolve '@strapi/helper-plugin' in '/srv/strapi-plugin-mux-video-uploader/admin/src'
strapi_1    |   Parsed request is a module
strapi_1    |   using description file: /srv/strapi-plugin-mux-video-uploader/package.json (relative path: ./admin/src)
strapi_1    |     Field 'browser' doesn't contain a valid alias configuration
strapi_1    |     resolve as module
strapi_1    |       /srv/strapi-plugin-mux-video-uploader/admin/src/node_modules doesn't exist or is not a directory
strapi_1    |       /srv/strapi-plugin-mux-video-uploader/admin/node_modules doesn't exist or is not a directory
strapi_1    |       looking for modules in /srv/strapi-plugin-mux-video-uploader/node_modules
strapi_1    |         single file module
strapi_1    |           using description file: /srv/strapi-plugin-mux-video-uploader/package.json (relative path: ./node_modules/@strapi/helper-plugin)
strapi_1    |             no extension
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi-plugin-mux-video-uploader/node_modules/@strapi/helper-plugin doesn't exist
strapi_1    |             .js
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi-plugin-mux-video-uploader/node_modules/@strapi/helper-plugin.js doesn't exist
strapi_1    |             .jsx
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi-plugin-mux-video-uploader/node_modules/@strapi/helper-plugin.jsx doesn't exist
strapi_1    |             .react.js
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi-plugin-mux-video-uploader/node_modules/@strapi/helper-plugin.react.js doesn't exist
strapi_1    |         /srv/strapi-plugin-mux-video-uploader/node_modules/@strapi/helper-plugin doesn't exist
strapi_1    |       /srv/node_modules doesn't exist or is not a directory
strapi_1    |       /node_modules doesn't exist or is not a directory
strapi_1    |       looking for modules in /srv/strapi/app/node_modules/@strapi/admin/node_modules
strapi_1    |         single file module
strapi_1    |           using description file: /srv/strapi/app/node_modules/@strapi/admin/package.json (relative path: ./node_modules/@strapi/helper-plugin)
strapi_1    |             no extension
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi/app/node_modules/@strapi/admin/node_modules/@strapi/helper-plugin doesn't exist
strapi_1    |             .js
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi/app/node_modules/@strapi/admin/node_modules/@strapi/helper-plugin.js doesn't exist
strapi_1    |             .jsx
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi/app/node_modules/@strapi/admin/node_modules/@strapi/helper-plugin.jsx doesn't exist
strapi_1    |             .react.js
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi/app/node_modules/@strapi/admin/node_modules/@strapi/helper-plugin.react.js doesn't exist
strapi_1    |         /srv/strapi/app/node_modules/@strapi/admin/node_modules/@strapi/helper-plugin doesn't exist
strapi_1    | ModuleNotFoundError: Module not found: Error: Can't resolve '@strapi/helper-plugin' in '/srv/strapi-plugin-mux-video-uploader/admin/src'
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/Compilation.js:2011:28
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:795:13
strapi_1    |     at eval (eval at create (/srv/strapi/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:275:22
strapi_1    |     at eval (eval at create (/srv/strapi/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:431:22
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:124:11
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:667:25
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:852:8
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:972:5
strapi_1    |     at /srv/strapi/app/node_modules/neo-async/async.js:6883:13
strapi_1    |     at /srv/strapi/app/node_modules/webpack/lib/NormalModuleFactory.js:955:45
strapi_1    |     at finishWithoutResolve (/srv/strapi/app/node_modules/enhanced-resolve/lib/Resolver.js:296:11)
strapi_1    |     at /srv/strapi/app/node_modules/enhanced-resolve/lib/Resolver.js:362:15
strapi_1    |     at /srv/strapi/app/node_modules/enhanced-resolve/lib/Resolver.js:410:5
strapi_1    |     at eval (eval at create (/srv/strapi/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
strapi_1    | resolve '@strapi/helper-plugin' in '/srv/strapi-plugin-mux-video-uploader/admin/src'
strapi_1    |   Parsed request is a module
strapi_1    |   using description file: /srv/strapi-plugin-mux-video-uploader/package.json (relative path: ./admin/src)
strapi_1    |     Field 'browser' doesn't contain a valid alias configuration
strapi_1    |     resolve as module
strapi_1    |       /srv/strapi-plugin-mux-video-uploader/admin/src/node_modules doesn't exist or is not a directory
strapi_1    |       /srv/strapi-plugin-mux-video-uploader/admin/node_modules doesn't exist or is not a directory
strapi_1    |       looking for modules in /srv/strapi-plugin-mux-video-uploader/node_modules
strapi_1    |         single file module
strapi_1    |           using description file: /srv/strapi-plugin-mux-video-uploader/package.json (relative path: ./node_modules/@strapi/helper-plugin)
strapi_1    |             no extension
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi-plugin-mux-video-uploader/node_modules/@strapi/helper-plugin doesn't exist
strapi_1    |             .js
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi-plugin-mux-video-uploader/node_modules/@strapi/helper-plugin.js doesn't exist
strapi_1    |             .jsx
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi-plugin-mux-video-uploader/node_modules/@strapi/helper-plugin.jsx doesn't exist
strapi_1    |             .react.js
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi-plugin-mux-video-uploader/node_modules/@strapi/helper-plugin.react.js doesn't exist
strapi_1    |         /srv/strapi-plugin-mux-video-uploader/node_modules/@strapi/helper-plugin doesn't exist
strapi_1    |       /srv/node_modules doesn't exist or is not a directory
strapi_1    |       /node_modules doesn't exist or is not a directory
strapi_1    |       looking for modules in /srv/strapi/app/node_modules/@strapi/admin/node_modules
strapi_1    |         single file module
strapi_1    |           using description file: /srv/strapi/app/node_modules/@strapi/admin/package.json (relative path: ./node_modules/@strapi/helper-plugin)
strapi_1    |             no extension
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi/app/node_modules/@strapi/admin/node_modules/@strapi/helper-plugin doesn't exist
strapi_1    |             .js
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi/app/node_modules/@strapi/admin/node_modules/@strapi/helper-plugin.js doesn't exist
strapi_1    |             .jsx
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi/app/node_modules/@strapi/admin/node_modules/@strapi/helper-plugin.jsx doesn't exist
strapi_1    |             .react.js
strapi_1    |               Field 'browser' doesn't contain a valid alias configuration
strapi_1    |               /srv/strapi/app/node_modules/@strapi/admin/node_modules/@strapi/helper-plugin.react.js doesn't exist
strapi_1    |         /srv/strapi/app/node_modules/@strapi/admin/node_modules/@strapi/helper-plugin doesn't exist
strapi_1    | error Command failed with exit code 1.
strapi_1    | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
strapi_1 exited with code 1

Towards the top of the exception in the console I'm seeing this—

strapi_1    | ModuleNotFoundError: Module not found: Error: Can't resolve '@strapi/helper-plugin' in '/srv/strapi-plugin-mux-video-uploader/admin/src'
markkaylor commented 2 years ago

@erikpena I just created a fresh app with a new clone of your plugin and it worked (There were some errors on your form so I commented that and added back <CheckpagePermissions />). Could you try the same on your end?

Here's what I did:

yarn create strapi-app test-mux-plugin --quickstart
cd test-mux-plugin
yarn install
touch config/plugins.js

then add:

// config/plugins.js
module.exports = () => ({
  "mux-video-uploader": {
    enabled: true,
    resolve: "./src/plugins/mux-video-uploader",
  },
});

take src/plugins
git clone git@github.com:muxinc/strapi-plugin-mux-video-uploader.git mux-video-uploader
git checkout ep-strapi-v4-upgrade
yarn install

Back in the root strapi app

yarn develop --watch-admin

If that works then I'm wondering if the .cache and node_modules are being deleted and reinstalled properly on the docker container.

erikpena commented 2 years ago

Hey @markkaylor, thanks! Between your example of looking deeper at other examples, I figured out what was causing my issue. My problem was that I was following the migration guide and there were pieces that just didn't "flow" correctly (i.e. it didn't specify directly that the plugin itself needed to live in the plugins folder in the strapi project. Also, and this is a little my fault for forgetting from how it was done in v3, I needed to rename the folder as it lives in the plugins and remove the strapi-plugin- prefix.

As far as the forms go, not quite sure what happened there. It seems that now I've made the changes, the forms that were working are now no longer working. I switched them from using component style (<Formik />) to using hooks (useFormik) and that seemed to have worked.

All the above is proving to work on the typescript version of this plugin. So... 🎉

One thing that has popped up though: Thumbnail images hosted by image.mux.com no longer load due to CSP restrictions within the Admin UI. I've taken a look at documentation, Github and Discord and the only thing I can really find is a suggestion to modify the global strapi::security middleware to include image.mux.com. This would be awkward for customers to have to do in order to use the plugin. Is there a programmatic way for the plugin to augment the CSP allowed domains at register, run time?

markkaylor commented 2 years ago

@erikpena Awesome glad you got something working.

It was also my understanding that a local plugin could be located anywhere and the path resolved. Meaning it does not have to live in a Strapi project's plugins folder. Same with the naming of your plugin. I do not believe there is any convention that needs to be followed.

I will have to look into these issues and confirm the desired behavior with the team. For your images I don't have the answer off the top of my head so I will have to take some time to look into that as well. I will take a look at all of that this week.

markkaylor commented 2 years ago

Hi @erikpena for the CSP you will have to provide documentation for the users of your plugin. You can see how it is documented on these providers:

https://github.com/strapi/strapi/tree/master/packages/providers/upload-aws-s3#security-middleware-configuration,
https://github.com/strapi/strapi/tree/master/packages/providers/upload-cloudinary#security-middleware-configuration

Hope that helps!

erikpena commented 2 years ago

Hey @markkaylor, Thank you for checking on this. The documents you linked were something I looked at already in my research. However, I have an alternate path that I was keeping in my back pocket. I'd prefer to not have our users make manual changes to the global strapi middleware in order to utilize the plugin if necessary.

I'd like to get your feedback on the following alternate path which effectively proxies the image using a route/controller that has the sole purpose of piping the image. Since this is only for the Admin UI which would be only for the users of the plugin, I think this should be fine unless you can think of a reason why this wouldn't be advisable? I would prefer to have to do this, but at the same time, I want to maintain a high level of experience and this seems like a tolerable trade-off.

Here's the route that I added—

// server/routes/index.ts
{
  "method": "GET",
  "path": "/mux-video-uploader/thumbnail/:playbackId",
  "handler": "mux.thumbnail",
  "config": {
    "auth": false,
    "prefix": false
  }
}

And the controller—

// server/controllers/mux.ts
const thumbnail = async (ctx: Context) => {
  const { playbackId } = ctx.params;

  const response = await axios.get(
    `https://image.mux.com/${playbackId}/thumbnail.png`,
    {
      params: ctx.query,
      responseType: 'stream'
    }
  );

  ctx.response.set('content-type', response.headers['content-type']);
  ctx.body = response.data;
};

Preferably, it would be awesome to have a way to register image.mux.com (for images) and stream.mux.com (for videos) as CSP exceptions during the initialization of the plugin. Would this seem like a reasonable feature request?

markkaylor commented 2 years ago

Hi @erikpena I think that should be ok.

As for the feature request. You can submit one here using the template. I'm not really sure how likely it is to be accepted but this could give some visibility to your issue and have the community weigh in on the topic.

Hope that helps!

erikpena commented 2 years ago

Awesome, thank you @markkaylor. I'll take that feature request and file it after I've gotten through this release. I'm going to close this PR (not merge) in favor of the Typescript version (https://github.com/muxinc/strapi-plugin-mux-video-uploader/pull/22)