Npx frontity dev suddenly not working

🙋Get Help
1

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;error.name='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.

2

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.

3

Hi @dawson.custonscole, @lucy

Please try the troubleshooting steps here.

Do please let us know how you get on.

4

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