Hey, I think this may be considered ‘general’ advice to be asking, hopefully get a pointer still:
I have created a custom mu-plugin:
Inside my plugin directory I am including the GetStream JS via CDN:
wp_enqueue_script('getstream', '//cdn.jsdelivr.net/npm/getstream/dist/js_min/getstream.js', null, null, true);
However, when attempting to
const stream = require('getstream');
Uncaught ReferenceError: require is not defined
Uncaught SyntaxError: Cannot use import statement outside a module
A friend mentioned this earlier:
"Your original main.js is going through a babel-like transpiler and converting ES6 to vanilla JS, so import works there, I imagine you haven’t set one up inside your plugins
Right now I am just trying to get a proof of concept up and running, any advice how to be able to run:
const stream = require('getstream'); without having to do a whole install of babel-like transpiler inside the plugin too. Even a vanilla JS approach would do just to test with.
Just throw it through Laravel Mix. It takes two seconds.
In your plugin directory, start by installing Laravel Mix:
$ yarn add laravel-mix
Once that is done we can follow up with a simple config (change paths as needed):
const mix = require('laravel-mix');
The above assumes your source file is located at
assets/js/app.js which will then be compiled to
public/js/app.js (which you would enqueue).
Once that is done, we can wrap it up with adding the following scripts to
"build": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"build:production": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"start": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --watch"
After that, you are free to build / watch.
$ yarn build
$ yarn start
If you’d like to see a real world example, take a look at https://github.com/Log1x/modern-login
Thanks @Log1x! Worked perfectly and a great suggestion, will use this going forward.
This topic was automatically closed after 42 days. New replies are no longer allowed.