Npx frontity dev suddenly not working

Hi everyone,

Have been playing with Frontity for the last week with no issues but ran into some unexpected wierdness today.

Did the following as per step-by-step guide:

npx frontity create hello-frontity
cd hello-frontity
npx frontity dev

Receiving following error:

SERVER STARTED -- Listening @ http://localhost:3000
  - mode: development
  - target: module
  - public-path: /static/

(node:4748) Warning: Closing file descriptor 25 on garbage collection
(Use `node --trace-warnings ...` to show where the warning was created)
(node:4748) [DEP0137] DeprecationWarning: Closing a FileHandle object on garbage collection is deprecated. Please close FileHandle objects explicitly using FileHandle.prototype.close(). In the future, an error will be thrown if a file descriptor is closed during garbage collection.

Error: ./node_modules/@loadable/component/dist/loadable.esm.js 2:112
Module parse failed: Unexpected token (2:112)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import"core-js/modules/es.object.assign.js";import"core-js/modules/es.promise.js";import React from'react';import _objectWithoutPropertiesLoose from'@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';import _extends from'@babel/runtime/helpers/esm/extends';import _assertThisInitialized from'@babel/runtime/helpers/esm/assertThisInitialized';import _inheritsLoose from'@babel/runtime/helpers/esm/inheritsLoose';import{isValidElementType}from'react-is';import hoistNonReactStatics from'hoist-non-react-statics';/* eslint-disable import/prefer-default-export */function invariant(condition,message){if(condition)return;var error=new Error("loadable: "+message);error.framesToPop=1;'Invariant Violation';throw error;}function warn(message){// eslint-disable-next-line no-console
> console.warn("loadable: "+message);}var Context=/*#__PURE__*/React.createContext();Context.displayName="Context"var LOADABLE_REQUIRED_CHUNKS_KEY='__LOADABLE_REQUIRED_CHUNKS__';function getRequiredChunkKey(namespace){return""+namespace+LOADABLE_REQUIRED_CHUNKS_KEY;}var sharedInternals=/*#__PURE__*/Object.freeze({__proto__:null,getRequiredChunkKey:getRequiredChunkKey,invariant:invariant,Context:Context});var LOADABLE_SHARED={initialChunks:{}};var STATUS_PENDING='PENDING';var STATUS_RESOLVED='RESOLVED';var STATUS_REJECTED='REJECTED';function resolveConstructor(ctor){if(typeof ctor==='function'){return{requireAsync:ctor,resolve:function resolve(){return undefined;},chunkName:function chunkName(){return undefined;}};}return ctor;}var withChunkExtractor=function withChunkExtractor(Component){var LoadableWithChunkExtractor=function LoadableWithChunkExtractor(props){return/*#__PURE__*/React.createElement(Context.Consumer,null,function(extractor){return/*#__PURE__*/React.createElement(Component,Object.assign({__chunkExtractor:extractor},props));});};if(Component.displayName){LoadableWithChunkExtractor.displayName=Component.displayName+"WithChunkExtractor";}return LoadableWithChunkExtractor;};var identity=function identity(v){return v;};function createLoadable(_ref){var _ref$defaultResolveCo=_ref.defaultResolveComponent,defaultResolveComponent=_ref$defaultResolveCo===void 0?identity:_ref$defaultResolveCo,_render=_ref.render,onLoad=_ref.onLoad;function loadable(loadableConstructor,options){if(options===void 0){options={};}var ctor=resolveConstructor(loadableConstructor);var cache={};/**
|      * Cachekey represents the component to be loaded
|      * if key changes - component has to be reloaded
 @ ./node_modules/@frontity/core/src/client/index.tsx 1:170-217 12:128-141
 @ ./build/bundling/entry-points/hello-frontity/client.ts
 @ multi webpack-hot-middleware/client ./build/bundling/entry-points/hello-frontity/client.ts

Scratching my head here. Followed a few similar posts and tried removing mars-theme and replacing with my-first-theme but eventually hit the same error. Output from npx frontity info:

## System:
 - OS: macOS 11.5.1
 - CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
 - Memory: 2.17 GB / 16.00 GB
 - Shell: 5.8 - /bin/zsh
## Binaries:
 - Node: 14.15.4 - /usr/local/bin/node
 - npm: 7.6.0 - /usr/local/bin/npm
## Browsers:
 - Chrome: 92.0.4515.131
 - Edge: Not Found
 - Firefox: Not Found
 - Safari: 14.1.2
## npmPackages:
 - @frontity/core: ^1.14.3 => 1.14.3 
 - @frontity/html2react: ^1.7.0 => 1.7.0 
 - @frontity/mars-theme: ./packages/mars-theme => 1.6.1 
 - @frontity/tiny-router: ^1.4.4 => 1.4.4 
 - @frontity/wp-source: ^1.11.5 => 1.11.5 
 - frontity: ^1.17.0 => 1.17.0 
## npmGlobalPackages:
 - frontity: Not Found
 - npx: Not Found

Any help is much appreciated.

I ran into the same issue. After removing package-lock.json file it solved the issue while running the build locally. But when trying to deploy the app I get the same issue and fails the build.

Hi @dawson.custonscole, @lucy

Please try the troubleshooting steps here.

Do please let us know how you get on.

Hi @lucy, @mburridge

Thank you both for your replies. So yesterday I ran through the tutorial again and did the minor npm update when prompted. Not sure if it was whether I ran the project in a parent folder away from other installations or if it was the minor npm update but it worked!

Now back on track building out a component library using as many Wp blocks as possible.

1 Like