While running Grunt task, getting following error.
Running "connect:client" (connect) task
Warning: root path must be a string Use --force to continue.
TypeError: root path must be a string
at Function.serveStatic (/Users/marif/Dev/JavaScript/JavaScript-Boilerplate/node_modules/grunt-contrib-connect/node_modules/connect/node_modules/serve-static/index.js:43:11)
at Object.livereloadMiddleware (/Users/marif/Dev/JavaScript/JavaScript-Boilerplate/GruntFile.js:25:23)
at Object.<anonymous> (/Users/marif/Dev/JavaScript/JavaScript-Boilerplate/node_modules/grunt-contrib-connect/tasks/connect.js:110:41)
at Object.<anonymous> (/Users/marif/Dev/JavaScript/JavaScript-Boilerplate/node_modules/grunt/lib/grunt/task.js:264:15)
at Object.thisTask.fn (/Users/marif/Dev/JavaScript/JavaScript-Boilerplate/node_modules/grunt/lib/grunt/task.js:82:16)
at Object.<anonymous> (/Users/marif/Dev/JavaScript/JavaScript-Boilerplate/node_modules/grunt/lib/util/task.js:301:30)
at Task.runTaskFn (/Users/marif/Dev/JavaScript/JavaScript-Boilerplate/node_modules/grunt/lib/util/task.js:251:24)
at Task.<anonymous> (/Users/marif/Dev/JavaScript/JavaScript-Boilerplate/node_modules/grunt/lib/util/task.js:300:12)
at /Users/marif/Dev/JavaScript/JavaScript-Boilerplate/node_modules/grunt/lib/util/task.js:227:11
at process._tickCallback (node.js:355:11)
Grunt task is as given below:
connect: {
client: {
options: {
// The server's port, and the folder to serve from:
// Ex: 'localhost:9000' would serve up 'client/index.html'
port: 9000,
// change this to '0.0.0.0' to access the server from outside
hostname: 'localhost',
base: '<%= jsb.app %>',
// Custom middleware for the HTTP server:
// The injected JavaScript reloads the page.
middleware: livereloadMiddleware
}
}
}
Have tried to uninstall and install the npm package but no luck so far.
Can someone please point, what exactly I am missing here?
It seems like my options.base in my middleware function was becoming an array because I have updated the npm package grunt-contrib-connect to latest which is 0.10.1.
Have to change the snippet rather:
connect.static(options.base),
// Make empty directories browsable.
connect.directory(options.base)
It must be an Array and it should start working:
connect.static(options.base[0]),
// Make empty directories browsable.
connect.directory(options.base[0])
Hope it also helps someone!
Related
I am not able to get the HMR with "wp-scripts start --hot" running. I tried this in several project, including rather empty projects.
As soon as I add the --hot flag to my npm script, I can still get the script running but I get this error message in my console:
ReactRefreshEntry.js:17 Uncaught TypeError: Cannot read properties of undefined (reading 'injectIntoGlobalHook')
at ./node_modules/#pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js (ReactRefreshEntry.js:17:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at startup:4:66
at __webpack_require__.O (chunk loaded:25:1)
at startup:9:1
at startup:9:1
It doesn't even load my Javascript as it seems to break at an earlier point.
I already changed Node Versions back and forth, deleted all node-modules and the package-lock.json, took out all my Javascript to see if this solves anything, but it doesn't.
My setup:
Local by Flyhweel as Wordpress local environment
Wordpress: 6.0.3
Node V 16.18.0
npm 8.19.2
#wordpress/scripts Version: 24.4.0
wp-config.php:
define('WP_DEBUG', false); define('SCRIPT_DEBUG', true);
Also I got the Gutenberg Plugin installed and activated as stated here: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#:~:text=%2D%2Dhot%20%E2%80%93%20enables%20%E2%80%9CFast%20Refresh%E2%80%9D.%20The%20page%20will%20automatically%20reload%20if%20you%20make%20changes%20to%20the%20code.%20For%20now%2C%20it%20requires%20that%20WordPress%20has%20the%20SCRIPT_DEBUG%20flag%20enabled%20and%20the%20Gutenberg%20plugin%20installed.
Does anyone else experience this bug or can anyone help with this?
Many thanks and cheers
Johannes
Alternative
I could not get react-refresh-webpack-plugin to work in #worpress/script so ended up using BrowserSyncPlugin, here is how i extended the #wordpress/script webpack config. Hope it helps someone
/**
* External Dependencies
*/
const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
/**
* WordPress Dependencies
*/
const defaultConfig = require('#wordpress/scripts/config/webpack.config.js');
module.exports = {
...defaultConfig,
...{
entry: {
theme: path.resolve(process.cwd(), 'src', 'theme.js'),
},
plugins: [
...defaultConfig.plugins,
new BrowserSyncPlugin({
// inspect docker network to get this container external ip
// then specify it in host
host: '172.44.0.3', //docker container host
port: 8887,
//server: { baseDir: ['public'] },
proxy: 'http://172.44.0.1:7020/', //docker container host
open: false
}),
]
}
}
and yarn run start
Disclaimer: Am developing in docker env. i know its not answer to the question, but if you are stuck, kindly try it out.
I was trying to deploy a Meteor app onto a DigitalOcean droplet, via its IP address (I have no domain name). I am doing this kind of thing for the first time, so was having a lot of issues with it.
This is my droplet on Digital Ocean:
I created a MUP (Meteor Up) directory outside my Meteor app’s repo using mup init, and this is the mup.js file that I have:
module.exports = {
servers: {
one: {
host: '162.243.57.207',
username: 'cs673f16',
pem: '/Users/gautambhat/.ssh/id_rsa'
// password:
// or leave blank for authenticate from ssh-agent
}
},
meteor: {
name: 'meetcute',
path: '/Users/gautambhat/Repos/CS673_team2',
servers: {
one: {}
},
buildOptions: {
serverOnly: true,
},
env: {
ROOT_URL: 'http://162.243.57.207',
PORT : 3000
//MONGO_URL: 'mongodb://localhost/meteor'
},
//dockerImage: 'kadirahq/meteord'
deployCheckWaitTime: 60
},
mongo: {
oplog: true,
port: 27017,
servers: {
one: {},
},
},
};
Also, I don't know my MONGO_URL, or where to find it, so I just commented it out. After running setup, and the running mup deploy, I get this:
=> Starting meteor app on port:80
assert.js:93
throw new assert.AssertionError({
^
AssertionError: "undefined" === "function"
at wrapPathFunction (/bundle/bundle/programs/server/mini-files.js:77:10)
at Object.<anonymous> (/bundle/bundle/programs/server/mini-files.js:108:24)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.<anonymous> (/bundle/bundle/programs/server/boot.js:9:13)
at Module._compile (module.js:456:26)
-----------------------------------STDOUT-----------------------------------
After researching a bit online on different sites, I found a fix here
The new kadirahq/mup
The default dockerImage is meteorhacks/meteord:base and thus still uses Node 0.10.43. If someone builds and publishes a new image from the base, it could be easily swapped in. I've gone ahead and provided an abernix/meteord:base image with the necessary changes to run Node 4.4.7 + the benefit of NPM 3 on an updated distro (jessie instead of wheezy). I'm not sure if this is something that kadira will provide soon themselves or not.
You can use my image by adding the following in your mup.js, inside the meteor object (see docs for details), and re-deploying with mup deploy:
dockerImage: 'abernix/meteord:base'
I tried to set up grandfile.js, did it under http://gruntjs.com/configuring-tasks and https://24ways.org/2013/grunt-is-not-weird-and-hard/ . So I wrote there:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
// 2. Configuration for concatinating files goes here.
dist: {
src: [
'css/bootstrap.css', // Bootstrap css in the libs folder
'css/normalize.css', // Normaliza.css in the libs folder
'css/style.css' // This specific file
],
dest: 'css/build/production.css',
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('concat');
};
Then I opened Teminal and wrote grunt.
Here what I got:
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected token )
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
I've not find any extra ) neither I create bad "default" task (default=concat).
What is wrong here?
Thanks.
Grunt expects you to register a default task (grunt.registerTask('default', [<task list here>]), but you do not have to. If you don't wish to register it, then just pass the --force option like it mentions, and it should still run your task(s)
I am trying to setup a simple Telescope Meteor app on an AWS EC2 instance and I am getting an error message when trying to run mup setup:
Here is my mup.json file:
{
// Server authentication info
"servers": [
{
"host": "ec2-54-191-197-203.us-west-2.compute.amazonaws.com",
"username": "ubuntu",
//"password": "password"
// or pem file (ssh based authentication)
//"pem": "/Users/apple/Coding/Contract Work/TelescopeApp.pem"
}
],
// Install MongoDB in the server, does not destroy local MongoDB on future setup
"setupMongo": true,
// WARNING: Node.js is required! Only skip if you already have Node.js installed on server.
"setupNode": true,
// WARNING: If nodeVersion omitted will setup 0.10.36 by default. Do not use v, only version number.
"nodeVersion": "0.10.36",
// Install PhantomJS in the server
"setupPhantom": true,
// Show a progress bar during the upload of the bundle to the server.
// Might cause an error in some rare cases if set to true, for instance in Shippable CI
"enableUploadProgressBar": true,
// Application name (No spaces)
"appName": "TelescopeApp",
// Location of app (local directory)
"app": "/Users/apple/Coding/Contract Work",
// Configure environment
"env": {
"PORT": 80,
"ROOT_URL": "http://ec2-54-191-197-203.us-west-2.compute.amazonaws.com",
"MONGO_URL" "mongodb://localhost:27017/Telescope-database"
},
// Meteor Up checks if the app comes online just after the deployment
// before mup checks that, it will wait for no. of seconds configured below
"deployCheckWaitTime": 15
}
Here is the error message:
Meteor Up: Production Quality Meteor Deployments
------------------------------------------------
/usr/local/lib/node_modules/mup/node_modules/cjson/index.js:226
throw err;
^
SyntaxError: Trailing comma in object at 10:5
}
^
File: "/Users/apple/Coding/Contract Work/Telescope/mup.json"
at SyntaxError (native)
at Object.parseJSON (/usr/local/lib/node_modules/mup/node_modules/jju/lib/parse.js:745:13)
at Object.parse (/usr/local/lib/node_modules/mup/node_modules/json-parse-helpfulerror/index.js:10:13)
at Object.exports.parse (/usr/local/lib/node_modules/mup/node_modules/cjson/index.js:90:28)
at Object.load (/usr/local/lib/node_modules/mup/node_modules/cjson/index.js:223:24)
at Object.exports.read (/usr/local/lib/node_modules/mup/lib/config.js:12:25)
at Object.<anonymous> (/usr/local/lib/node_modules/mup/bin/mup:20:23)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:456:32)
What am I doing wrong?
change
"username": "ubuntu",
to
"username": "ubuntu"
You probably commented the "password: "password" line and forgot to remove the additional comma after "username": "ubuntu",.
I've set up grunt successfully to watch sass and js file changes in my Gruntfile.js. The only thing its not picking up are the changes to my php files. Looking at the documentation for browser-sync for Wrodpress, i need to state options like so:
browserSync: {
files: {
src : [
'style.css',
'images/*',
'js/**/*.js',
'**/*.php'
],
},
options: {
// server: {
// host: "192.168.1.141:8888/bch",
// baseDir: "/", // "./",
// },
proxy: "localhost",
// port: 8888,
watchTask: true
}
}
I've tried the commented out options aswell as a slightly differnt sytax setup at http://www.browsersync.io/docs/grunt/ at the bottom of the page and for any option neither does the grunt-cli show any updates nor does the browser change on save. Is there an obvious component I'm missing?
For anyone fairly new to this as I am and wanted to know what i did:
browserSync: {
dev: {
options: {
proxy: "localhost:8888",
files: ['style.css', 'js/**/*.js', '**/*.php'],
watchTask: true,
}
}
}
Stating the port explicitly as per my quesiton example meant the browser sync wouldn't go to its default :3000 port for it to then run its sync magic
Although it does need a reference to the 8888 as its part of my base local URL. So instead i put it in the proxy: option and i can click through to any project from there in my htdocs folder.
Wrapping it in dev: {} to tell browser-sync i had my own server running (MAMP)
This also then stopped the annoying error of Fate Error: not running when trying to come out of the currently running 'grunt' command.
On Mac OSX Mavericks, with MAMP.