Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$
Light
Dark
System
Ask  Question

Failed to compile npm_version bundle! unable to resolve draggable.bundle.js


I've downloaded the package twice and gone through the quick start instructions but I can not get past this error:

> keenthemes@1.0.0 build
> webpack

>> Building npm_version bundle...
>> Failed to compile npm_version bundle!

resolve '@shopify/draggable/lib/draggable.bundle.js' in 'C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\webpack\plugins\custom\draggable'
Parsed request is a module
using description file: C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\package.json (relative path: ./webpack/plugins/custom/draggable)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\webpack\plugins\custom\draggable\node_modules doesn't exist or is not a directory
C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\webpack\plugins\custom\node_modules doesn't exist or is not a directory
C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\webpack\plugins\node_modules doesn't exist or is not a directory
C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\webpack\node_modules doesn't exist or is not a directory
looking for modules in C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\node_modules
existing directory C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\node_modules\@shopify\draggable
using description file: C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\node_modules\@shopify\draggable\package.json (relative path: .)
using description file: C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\node_modules\@shopify\draggable\package.json (relative path: ./lib/draggable.bundle.js)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\node_modules\@shopify\draggable\lib\draggable.bundle.js doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\node_modules\@shopify\draggable\lib\draggable.bundle.js.js doesn't exist
.scss
Field 'browser' doesn't contain a valid alias configuration
C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\node_modules\@shopify\draggable\lib\draggable.bundle.js.scss doesn't exist
as directory
C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\node_modules\@shopify\draggable\lib\draggable.bundle.js doesn't exist
C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\node_modules doesn't exist or is not a directory
C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\node_modules doesn't exist or is not a directory
C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\node_modules doesn't exist or is not a directory
C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\node_modules doesn't exist or is not a directory
C:\Users\*\Downloads\node_modules doesn't exist or is not a directory
C:\Users\*\node_modules doesn't exist or is not a directory
C:\Users\node_modules doesn't exist or is not a directory
C:\node_modules doesn't exist or is not a directory
WARNING in ../src/demo30/sass/style.scss (../src/demo30/sass/style.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!../src/demo30/sass/style.scss)
Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(100%)
To emit a CSS abs() now: abs(#{100%})
More info: https://sass-lang.com/d/abs-percent

node_modules\bootstrap\scss\vendor\_rfs.scss 57:14 divide()
node_modules\bootstrap\scss\mixins\_grid.scss 59:12 row-cols()
node_modules\bootstrap\scss\mixins\_grid.scss 85:13 @content
node_modules\bootstrap\scss\mixins\_breakpoints.scss 68:5 media-breakpoint-up()
node_modules\bootstrap\scss\mixins\_grid.scss 72:5 make-grid-columns()
node_modules\bootstrap\scss\_grid.scss 38:3 @import
node_modules\bootstrap\scss\bootstrap.scss 20:9 @import
..\src\demo30\sass\components\components.scss 9:9 @import
..\src\demo30\sass\style.scss 9:9 root stylesheet


ERROR in ./webpack/plugins/custom/draggable/draggable.js 3:0-53
Module not found: Error: Can't resolve '@shopify/draggable/lib/draggable.bundle.js' in 'C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\webpack\plugins\custom\draggable'

ERROR in ./webpack/plugins/custom/draggable/draggable.js 4:0-60
Module not found: Error: Can't resolve '@shopify/draggable/lib/draggable.bundle.legacy.js' in 'C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\webpack\plugins\custom\draggable'

ERROR in ./webpack/plugins/custom/draggable/draggable.js 5:0-46
Module not found: Error: Can't resolve '@shopify/draggable/lib/draggable.js' in 'C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\webpack\plugins\custom\draggable'

ERROR in ./webpack/plugins/custom/draggable/draggable.js 6:18-63
Module not found: Error: Can't resolve '@shopify/draggable/lib/sortable.js' in 'C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\webpack\plugins\custom\draggable'

ERROR in ./webpack/plugins/custom/draggable/draggable.js 7:19-65
Module not found: Error: Can't resolve '@shopify/draggable/lib/droppable.js' in 'C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\webpack\plugins\custom\draggable'

ERROR in ./webpack/plugins/custom/draggable/draggable.js 8:19-65
Module not found: Error: Can't resolve '@shopify/draggable/lib/swappable.js' in 'C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\webpack\plugins\custom\draggable'

ERROR in ./webpack/plugins/custom/draggable/draggable.js 9:0-44
Module not found: Error: Can't resolve '@shopify/draggable/lib/plugins.js' in 'C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\webpack\plugins\custom\draggable'

ERROR in ./webpack/plugins/custom/draggable/draggable.js 10:0-55
Module not found: Error: Can't resolve '@shopify/draggable/lib/plugins/collidable.js' in 'C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\webpack\plugins\custom\draggable'

ERROR in ./webpack/plugins/custom/draggable/draggable.js 11:0-58
Module not found: Error: Can't resolve '@shopify/draggable/lib/plugins/resize-mirror.js' in 'C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\webpack\plugins\custom\draggable'

ERROR in ./webpack/plugins/custom/draggable/draggable.js 12:0-54
Module not found: Error: Can't resolve '@shopify/draggable/lib/plugins/snappable.js' in 'C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\webpack\plugins\custom\draggable'

ERROR in ./webpack/plugins/custom/draggable/draggable.js 13:0-59
Module not found: Error: Can't resolve '@shopify/draggable/lib/plugins/swap-animation.js' in 'C:\Users\*\Downloads\metronic_asp.net-core_v8.2.0\asp.net-core\Starterkit\_keenthemes\tools\webpack\plugins\custom\draggable'

webpack compiled with 11 errors and 1 warning

********************************

The only file in the draggable folder is draggable.js:


// Draggable - a lightweight, responsive, modern drag & drop library: https://shopify.github.io/draggable/

require("@shopify/draggable/lib/draggable.bundle.js");
require("@shopify/draggable/lib/draggable.bundle.legacy.js");
require("@shopify/draggable/lib/draggable.js");
window.Sortable = require("@shopify/draggable/lib/sortable.js");
window.Droppable = require("@shopify/draggable/lib/droppable.js");
window.Swappable = require("@shopify/draggable/lib/swappable.js");
require("@shopify/draggable/lib/plugins.js");
require("@shopify/draggable/lib/plugins/collidable.js");
require("@shopify/draggable/lib/plugins/resize-mirror.js");
require("@shopify/draggable/lib/plugins/snappable.js");
require("@shopify/draggable/lib/plugins/swap-animation.js");


G
Guest 1 year ago
Webpack Metronic Asp.Net Core
3 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

G
Guest 1 year ago

I'm also experiencing this in Keen 3.0.5. It only seems to affect the `--prod` build.

With Gulp (v4.0.2 as suggested in the docs), I get the following error instead:


import { cleanTask } from "./gulp/clean.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
 at internalCompileFunction (node:internal/vm:73:18)
 at wrapSafe (node:internal/modules/cjs/loader:1178:20)
 at Module._compile (node:internal/modules/cjs/loader:1220:27)
 at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
 at Module.load (node:internal/modules/cjs/loader:1119:32)
 at Module._load (node:internal/modules/cjs/loader:960:12)
 at Module.require (node:internal/modules/cjs/loader:1143:19)
 at require (node:internal/modules/cjs/helpers:121:18)
 at requireOrImport (/Users/norch/.nvm/versions/node/v18.17.1/lib/node_modules/gulp-cli/lib/shared/require-or-import.js:19:11)
 at execute (/Users/norch/.nvm/versions/node/v18.17.1/lib/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js:37:3)



% gulp --version
CLI version: 2.3.0
Local version: 4.0.2


Update:

Gulp does work after restoring "type": "module" to package.json, which I had to remove to make the webpack build work at all.


user
Lauris Stepanovs Author1 year ago

Hi,

Thank you for your feedback.

We have already reproduced this error and are currently working on a fix. We will release a quick fix as soon as possible. Please note that this error is related only to the Webpack script, and Gulp is running without any errors.

As a temporary workaround, you can use our Gulp script to bundle assets. Here are the steps:

  1. Navigate to Starterkit/_keenthemes/tools.
  2. Execute yarn install or npm install to install the required dependencies.
  3. Run the gulp command to build assets.



For more guidance on using Gulp, please refer to our Gulp documentation:
https://preview.keenthemes.com/html/metronic/docs/getting-started/build/gulp

We apologize for any inconvenience this may have caused and appreciate your patience as we work to resolve this issue.

Regards,
Lauris Stepanovs,
Keenthemes Support Team
user
Searcher for 9 months ago

Your gulp script does not work either


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(