grapesjs/cli

GrapesJS CLI helper for the development

cli's Issues

copy-webpack-plugin doesn't work

I'm trying to copy some files from node_modules into my dist directory with copy-webpack-plugin but it gives the following error:

> grapesjs-cli build --patch=false


Start building the library...

/home/amir/projects/DigiNote/GrapesJsComponents/node_modules/grapesjs-cli/src/build.js:106
            const result = stats.toString(statConf);
                                 ^

TypeError: Cannot read properties of undefined (reading 'toString')
    at /home/amir/projects/DigiNote/GrapesJsComponents/node_modules/grapesjs-cli/src/build.js:106:34
    at /home/amir/projects/DigiNote/GrapesJsComponents/node_modules/webpack/lib/webpack.js:148:8
    at /home/amir/projects/DigiNote/GrapesJsComponents/node_modules/webpack/lib/HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (/home/amir/projects/DigiNote/GrapesJsComponents/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/amir/projects/DigiNote/GrapesJsComponents/node_modules/tapable/lib/Hook.js:18:14)
    at Cache.shutdown (/home/amir/projects/DigiNote/GrapesJsComponents/node_modules/webpack/lib/Cache.js:150:23)
    at /home/amir/projects/DigiNote/GrapesJsComponents/node_modules/webpack/lib/Compiler.js:1225:15
    at Hook.eval [as callAsync] (eval at create (/home/amir/projects/DigiNote/GrapesJsComponents/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/amir/projects/DigiNote/GrapesJsComponents/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.close (/home/amir/projects/DigiNote/GrapesJsComponents/node_modules/webpack/lib/Compiler.js:1218:23)

And this is how I'm using the copy-webpack-plugin:

...
  plugins: [
      ...config.plugins,
      new CopyPlugin({
        patterns: [
          {
            from: './node_modules/bootstrap/dist/css/bootstrap.min.css',
            to: './dist',
          },
        ],
      }),
    ],
...

Unexpected token '('

Hi,
I am running npx grapesjs-cli init -y --user=my-username on Mac OS and I am getting
Unexpected token '('

Any pointers in how to resolve the issue?
Best

Building locales fails on windows.

I tried moving grapesjs-mjml to the cli, but having the following issue:

Issue is this line: https://github.com/artf/grapesjs-cli/blob/master/src/build.js#L29

Start building locale files...
(node:14876) UnhandledPromiseRejectionWarning: Error: Command failed: rm -rf locale
'rm' is not recognized as an internal or external command,
operable program or batch file.

    at ChildProcess.exithandler (child_process.js:308:12)
    at ChildProcess.emit (events.js:314:20)
    at ChildProcess.EventEmitter.emit (domain.js:486:12)
    at maybeClose (internal/child_process.js:1047:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)

Process finished with exit code 0

should probably use something like rimraf package to make it crossplatform

Input code in build process

Hello Artf!

Here at my work, my web app loads all the files first at client-side, so i need to put a variable at the end of js files so the system knows it was loaded. Something like:
ControlLoading.isLoading = true;

Is there a way to edit the webpack builder of a plugin to add this while building?

Failing webpack/declaration build does not cause cli process to exit with non-zero code

We noticed when the webpack build fails or the typescript declaration emitting step fails, the cli process does not exit with a non-zero code. This is problematic in a CI context as the CI pipeline will continue running the next steps in the job/next job as it doesn't detect the failure.

The following updates should probably be made:

• Catch errors thrown by buildDeclaration
• If an error is caught by buildDeclaration or the errors variable has a truthy value, add code to call process.exit with a non-zero code.

SyntaxError: Invalid or unexpected token?

getting /grapesjs-my-plugin/node_modules/path-scurry/node_modules/lru-cache/dist/cjs/index.js:52
this.signal.onabort?.(reason);
^

SyntaxError: Invalid or unexpected token
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)

does not provide an export named 'default'

I'm trying to use the cli to build a plugin for my own use, copying the dist folder and trying to import it returns the error:

Uncaught SyntaxError: The requested module '/src/plugins/cubosuite-form/dist/index.js?t=1671817004952' does not provide an export named 'default'.

I'm trying to use it with vite, how would I make it use the default export?

Ability to extend webpack config

Hi @artf, awesome project.

It would be cool to use grapesjs-cli within the grapesjs-mjml project, however I don't think this is currently possible since we don't have a way to extend the webpack config with additional options.

Is this something still on the roadmap?

@vue/cli does something like this using webpack-merge: https://cli.vuejs.org/guide/webpack.html#simple-configuration

Bug on startup the cli

Set to false when asked about choose between add custom component and add custom block, it generates the file with the include.

I can open a PR ASAP.

Init new plugin

when i try to init the project
i have this error

/Volumes/SSDInternal/Node/editorgrapejs/samplePlugin/node_modules/path-scurry/node_modules/lru-cache/dist/cjs/index.js:52
this.signal.onabort?.(reason);
^

SyntaxError: Invalid or unexpected token
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)

( node 18.16.0 , macos )

[ERROR] Compilation Error During Serve

I took this compilation error during serve. How can I fix this error?

Start the development server...

(node:4468) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'createSnapshot' of undefined
    at C:\Users\Furkan\Desktop\template editor\node_modules\html-webpack-plugin\lib\webpack5\file-watcher-api.js:13:36
    at new Promise (<anonymous>)
    at Object.createSnapshot (C:\Users\Furkan\Desktop\template editor\node_modules\html-webpack-plugin\lib\webpack5\file-watcher-api.js:12:10)
    at C:\Users\Furkan\Desktop\template editor\node_modules\html-webpack-plugin\lib\cached-child-compiler.js:219:35
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:4468) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)
(node:4468) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
i ｢wds｣: Project is running at http://localhost:8081/
i ｢wds｣: webpack output is served from undefined
i ｢wds｣: Content not from webpack is served from C:\Users\Furkan\Desktop\template editor

Starting server on http://localhost:8081

C:\Users\Furkan\Desktop\template editor\node_modules\webpack\lib\Dependency.js:311
                throw new Error(
                ^

Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead)
    at ProvidedDependency.set (C:\Users\Furkan\Desktop\template editor\node_modules\webpack\lib\Dependency.js:311:9)
    at iterationDependencies (C:\Users\Furkan\Desktop\template editor\node_modules\grapesjs-cli\node_modules\webpack\lib\Compilation.js:940:21)
    at C:\Users\Furkan\Desktop\template editor\node_modules\grapesjs-cli\node_modules\webpack\lib\Compilation.js:950:8
    at C:\Users\Furkan\Desktop\template editor\node_modules\grapesjs-cli\node_modules\webpack\lib\NormalModuleFactory.js:409:6
    at C:\Users\Furkan\Desktop\template editor\node_modules\grapesjs-cli\node_modules\webpack\lib\NormalModuleFactory.js:155:13
    at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (C:\Users\Furkan\Desktop\template editor\node_modules\grapesjs-cli\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:4:1)
    at C:\Users\Furkan\Desktop\template editor\node_modules\grapesjs-cli\node_modules\webpack\lib\NormalModuleFactory.js:138:29
    at C:\Users\Furkan\Desktop\template editor\node_modules\grapesjs-cli\node_modules\webpack\lib\NormalModuleFactory.js:346:9
    at processTicksAndRejections (internal/process/task_queues.js:79:11)

Unexpected token 'export' on webpack.config.js

Error log:

❯ npx grapesjs-cli serve


Start the development server...


/path-to-my-project/webpack.config.js:1
export default ({ config }) => {
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at z (/path-to-my-project/node_modules/grapesjs-cli/dist/cli.js:2:3246)
    at /path-to-my-project/node_modules/grapesjs-cli/dist/cli.js:2:5256

Plugin not found

Hi,
First, thank you for this amazing piece of work.
We are now in the process of developing a simple chart plugin. Our proof of concept works in development, but we are actually struggling to build and make it "seen" as a plugin.

The output of npx grapesjs-cli build -v is:

Start building the library...

Build config:
 { _: [ 'build' ],
  v: true,
  verbose: true,
  stats: '{}',
  patch: true,
  config: '{}',
  babel: '{}',
  targets: '> 0.25%, not dead',
  entry: 'src/index',
  output: 'dist',
  '$0': 'node_modules/.bin/grapesjs-cli' }

Patch the version

Webpack config:
 { entry: '/Users/xxx/Sites/grapesjs-zing-donut/src/index',
  mode: 'production',
  devtool: 'source-map',
  optimization:
   { minimizer:
      [ TerserPlugin {
          options:
           { test: /\.m?js(\?.*)?$/i,
             chunkFilter: [Function: chunkFilter],
             warningsFilter: [Function: warningsFilter],
             extractComments: false,
             sourceMap: true,
             cache: false,
             cacheKeys: [Function: cacheKeys],
             parallel: false,
             include: undefined,
             exclude: undefined,
             minify: undefined,
             terserOptions:
              { output:
                 { quote_style: 3,
                   preamble: '/*! grapesjs-zing-donut - 1.0.2 */' } } } } ] },
  output:
   { path: '/Users/xxx/Sites/grapesjs-zing-donut/dist',
     filename: 'grapesjs-zing-donut.min.js',
     library: 'grapesjs-zing-donut',
     libraryTarget: 'umd' },
  module:
   { rules:
      [ { test: /\.js$/,
          loader: 'babel-loader',
          include: /src/,
          options:
           { presets:
              [ [ '@babel/preset-env', { targets: '> 0.25%, not dead' } ] ],
             plugins: [ '@babel/plugin-transform-runtime' ],
             cacheDirectory: true } } ] },
  plugins: [] }

Stats config:
 { hash: false,
  colors: true,
  builtAt: false,
  entrypoints: false,
  modules: false }

Version: webpack 4.41.5
Time: 1000ms
                         Asset      Size  Chunks                   Chunk Names
    grapesjs-zing-donut.min.js  5.18 KiB       0  [emitted]        main
grapesjs-zing-donut.min.js.map  13.4 KiB       0  [emitted] [dev]  main


Start building locale files...

Locale files building completed successfully!


Building completed successfully!

Then in a CodePen https://codepen.io/yumyo/pen/wvByzpP we have:

<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
<script src="https://unpkg.com/grapesjs"></script>
<script src"https://s3-us-west-2.amazonaws.com/s.cdpn.io/67133/grapesjs-zing-donut.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      plugins: ["grapesjs-zing-donut"],
  });
</script>

As visible in console we get `"Plugin grapesjs-zing-donut not found".
The complete plugin code can be seen here https://github.com/yumyo/grapesjs-zing-donut
Any help would be highly appreciated!

[Feature] Install packages after create a new plugin.

Always, after a new plugin, i need to run npm install
It could be an option in the questions before create plugin, may i create a PR for it if you allow :)

How to configure webpack

Hello, I have cloned your repo and I am trying to integrate a react component within the components.js file, just to test that I can integrate a simple functional react component.
However, I am unable to update the webpack module rules to include presets for react.

Any tips?

after npm build locale file es.js getting replaced with initial code

I have put some translations on en.js whenever I build with npm build the contents in en.js is replaced with default contents .

Debugging grapesjs

What would be the recommended way of debugging the upstream grapesjs package to see how it interacts with your plugin? You can't really add any logging since it is being pulled in using a CDN.

This is just something I've ran into when trying to debug something in the grapes-mjml plugin.

Vite

Hi, is possible to use vue-cli with a vite application? When i try give me this error:
aught SyntaxError: The requested module '/src/plugins/about1Block/dist/index.js' does not provide an export named 'default'