Webpack CUSTOM MDB UI KIT PRO ADVANCED

WordPress database error: [Can't create/write to file '/tmp/#sql-temptable-4db-191a2e-1a.MAI' (Errcode: 28 "No space left on device")]
SELECT p.* FROM wp_mdb_forum_posts AS p LEFT JOIN wp_mdb_forum_posts AS q ON( q.Id = p.ParentId AND p.Id = q.AcceptedAnswerId ) WHERE p.PostTypeId = 2 AND p.ParentId = 111934 GROUP BY p.Id ORDER BY CASE WHEN q.Id IS NOT NULL THEN 1 ELSE 0 END DESC, p.UpvoteCount DESC, p.CreationDate ASC

Topic: Webpack CUSTOM MDB UI KIT PRO ADVANCED

gdw96 asked 5 years ago

0 0

Hello,

I would like, with mdb-webpack-starter, to make a custom version of MDB UI KIT Pro Advanced as in the mdb-webpack-starter documentation.

Here is what I did and the result I get:

I started by cloning mdb-webpack-starter like this:

gh repo clone mdbootstrap/mdb-webpack-starter (GitHub CLI)

Then in "./mdb-webpack-starter" I did:

npm install

Then I installed the pro advanced version of mdb "mdb-ui-kit-pro-advanced" like this:

npm i git+https://oauth2:MY_ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced

Then I did (like in the webpack-starter-pack documentation):

npm run getMDBsrc

As indicated, I copy the content of "./mdb/mdb/scss/mdb.pro.scss" into "./src/scss/index.scss" (as my version is the "advanced" one the folder structure is different, in "./mdb" I don't have directly "./mdb/scss" and "./mdb/js" but "./mdb/mdb/scss" and in "./mdb/mdb/js". I also have "./mdb/plugins").Then I update the import paths.

I do the same for "./mdb/mdb/js/mdb.pro.js" in "./src/js/index.js" and I update the import paths.

And finally, I modify "./src/index.html" by replacing:

<span class="tag"><link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"css/index.min.css"</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
</span><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"js/index.min.js"</span><span class="tag">></script></span>

With:

<span class="tag"><link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"css/mdb.min.css"</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
</span><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"js/mdb.min.js"</span><span class="tag">></script></span>

Now I start the server with the command "npm run startMDB".

And there, I have errors that import not found. To correct this, I reinstall them:

<span class="pln">npm i </span><span class="lit">@popperjs</span><span class="pun">/</span><span class="pln">core
npm install chart</span><span class="pun">.</span><span class="pln">js chartjs</span><span class="pun">-</span><span class="pln">plugin</span><span class="pun">-</span><span class="pln">datalabels detect</span><span class="pun">-</span><span class="pln">autofill perfect</span><span class="pun">-</span><span class="pln">scrollbar</span>

I restart the server: "npm run startMDB" and I get the following errors:

<span class="pln">ERROR </span><span class="kwd">in</span><span class="pln"> </span><span class="pun">./</span><span class="pln">mdb</span><span class="pun">/</span><span class="pln">mdb</span><span class="pun">/</span><span class="pln">js</span><span class="pun">/</span><span class="pln">pro</span><span class="pun">/</span><span class="pln">timepicker</span><span class="pun">/</span><span class="pln">index</span><span class="pun">.</span><span class="pln">js </span><span class="lit">1762</span><span class="pun">:</span><span class="lit">31</span><span class="pln">
</span><span class="typ">Module</span><span class="pln"> parse failed</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Unexpected</span><span class="pln"> token </span><span class="pun">(</span><span class="lit">1762</span><span class="pun">:</span><span class="lit">31</span><span class="pun">)</span><span class="pln">
</span><span class="typ">You</span><span class="pln"> may need an appropriate loader to handle </span><span class="kwd">this</span><span class="pln"> file type</span><span class="pun">,</span><span class="pln"> currently </span><span class="kwd">no</span><span class="pln"> loaders are configured to process </span><span class="kwd">this</span><span class="pln"> file</span><span class="pun">.</span><span class="pln"> </span><span class="typ">See</span><span class="pln"> https</span><span class="pun">:</span><span class="com">//webpack.js.org/concepts#loaders</span><span class="pln">
</span><span class="pun">|</span><span class="pln">   </span><span class="pun">}</span><span class="pln">
</span><span class="pun">|</span><span class="pln">
</span><span class="pun">></span><span class="pln">   _toggleBackgroundColorCircle </span><span class="pun">=</span><span class="pln"> </span><span class="pun">(</span><span class="pln">classes</span><span class="pun">)</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="pun">|</span><span class="pln">     </span><span class="kwd">const</span><span class="pln"> tips </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">_modal</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str">`.${classes}.${ACTIVE_CLASS}`</span><span class="pun">)</span><span class="pln"> </span><span class="pun">!==</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">;</span><span class="pln">
</span><span class="pun">|</span><span class="pln">
</span><span class="pun">@</span><span class="pln"> </span><span class="pun">./</span><span class="pln">src</span><span class="pun">/</span><span class="pln">js</span><span class="pun">/</span><span class="pln">index</span><span class="pun">.</span><span class="pln">js </span><span class="lit">22</span><span class="pun">:</span><span class="lit">0</span><span class="pun">-</span><span class="lit">57</span><span class="pln"> </span><span class="lit">41</span><span class="pun">:</span><span class="lit">0</span><span class="pun">-</span><span class="lit">43</span><span class="pun">:</span><span class="lit">269</span><span class="pln">

ERROR </span><span class="kwd">in</span><span class="pln"> </span><span class="pun">./</span><span class="pln">mdb</span><span class="pun">/</span><span class="pln">mdb</span><span class="pun">/</span><span class="pln">js</span><span class="pun">/</span><span class="pln">pro</span><span class="pun">/</span><span class="pln">chips</span><span class="pun">/</span><span class="pln">index</span><span class="pun">.</span><span class="pln">js </span><span class="lit">346</span><span class="pun">:</span><span class="lit">21</span><span class="pln">
</span><span class="typ">Module</span><span class="pln"> parse failed</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Unexpected</span><span class="pln"> token </span><span class="pun">(</span><span class="lit">346</span><span class="pun">:</span><span class="lit">21</span><span class="pun">)</span><span class="pln">
</span><span class="typ">You</span><span class="pln"> may need an appropriate loader to handle </span><span class="kwd">this</span><span class="pln"> file type</span><span class="pun">,</span><span class="pln"> currently </span><span class="kwd">no</span><span class="pln"> loaders are configured to process </span><span class="kwd">this</span><span class="pln"> file</span><span class="pun">.</span><span class="pln"> </span><span class="typ">See</span><span class="pln"> https</span><span class="pun">:</span><span class="com">//webpack.js.org/concepts#loaders</span><span class="pln">
</span><span class="pun">|</span><span class="pln">   </span><span class="pun">}</span><span class="pln">
</span><span class="pun">|</span><span class="pln">
</span><span class="pun">></span><span class="pln">   _handleChangeInput </span><span class="pun">=</span><span class="pln"> </span><span class="pun">({</span><span class="pln"> target </span><span class="pun">})</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="pun">|</span><span class="pln">     </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">allChips</span><span class="pun">.</span><span class="pln">length </span><span class="pun">+</span><span class="pln"> </span><span class="lit">1</span><span class="pln"> </span><span class="pun">></span><span class="pln"> </span><span class="lit">0</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="pun">|</span><span class="pln">       </span><span class="typ">Manipulator</span><span class="pun">.</span><span class="pln">addClass</span><span class="pun">(</span><span class="pln">target</span><span class="pun">,</span><span class="pln"> CLASSNAME_ACTIVE</span><span class="pun">);</span><span class="pln">
</span><span class="pun">@</span><span class="pln"> </span><span class="pun">./</span><span class="pln">src</span><span class="pun">/</span><span class="pln">js</span><span class="pun">/</span><span class="pln">index</span><span class="pun">.</span><span class="pln">js </span><span class="lit">39</span><span class="pun">:</span><span class="lit">0</span><span class="pun">-</span><span class="lit">58</span><span class="pln"> </span><span class="lit">41</span><span class="pun">:</span><span class="lit">0</span><span class="pun">-</span><span class="lit">43</span><span class="pun">:</span><span class="lit">269</span><span class="pln">
</span><span class="typ">Child</span><span class="pln"> </span><span class="typ">HtmlWebpackCompiler</span><span class="pun">:</span><span class="pln">
    </span><span class="lit">1</span><span class="pln"> asset
    </span><span class="typ">Entrypoint</span><span class="pln"> </span><span class="typ">HtmlWebpackPlugin_0</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> __child</span><span class="pun">-</span><span class="typ">HtmlWebpackPlugin_0</span><span class="pln">
    </span><span class="pun">[./</span><span class="pln">node_modules</span><span class="pun">/</span><span class="pln">html</span><span class="pun">-</span><span class="pln">webpack</span><span class="pun">-</span><span class="pln">plugin</span><span class="pun">/</span><span class="pln">lib</span><span class="pun">/</span><span class="pln">loader</span><span class="pun">.</span><span class="pln">js</span><span class="pun">!./</span><span class="pln">src</span><span class="pun">/</span><span class="pln">index</span><span class="pun">.</span><span class="pln">html</span><span class="pun">]</span><span class="pln"> </span><span class="lit">2.02</span><span class="pln"> </span><span class="typ">KiB</span><span class="pln"> </span><span class="pun">{</span><span class="typ">HtmlWebpackPlugin_0</span><span class="pun">}</span><span class="pln"> </span><span class="pun">[</span><span class="pln">built</span><span class="pun">]</span><span class="pln">
</span><span class="typ">Child</span><span class="pln"> mini</span><span class="pun">-</span><span class="pln">css</span><span class="pun">-</span><span class="pln">extract</span><span class="pun">-</span><span class="pln">plugin node_modules</span><span class="pun">/</span><span class="pln">css</span><span class="pun">-</span><span class="pln">loader</span><span class="pun">/</span><span class="pln">dist</span><span class="pun">/</span><span class="pln">cjs</span><span class="pun">.</span><span class="pln">js</span><span class="pun">!</span><span class="pln">node_modules</span><span class="pun">/</span><span class="pln">postcss</span><span class="pun">-</span><span class="pln">loader</span><span class="pun">/</span><span class="pln">src</span><span class="pun">/</span><span class="pln">index</span><span class="pun">.</span><span class="pln">js</span><span class="pun">!</span><span class="pln">node_modules</span><span class="pun">/</span><span class="pln">sass</span><span class="pun">-</span><span class="pln">loader</span><span class="pun">/</span><span class="pln">dist</span><span class="pun">/</span><span class="pln">cjs</span><span class="pun">.</span><span class="pln">js</span><span class="pun">!</span><span class="pln">src</span><span class="pun">/</span><span class="pln">scss</span><span class="pun">/</span><span class="pln">index</span><span class="pun">.</span><span class="pln">scss</span><span class="pun">:</span><span class="pln">
    </span><span class="typ">Entrypoint</span><span class="pln"> mini</span><span class="pun">-</span><span class="pln">css</span><span class="pun">-</span><span class="pln">extract</span><span class="pun">-</span><span class="pln">plugin </span><span class="pun">=</span><span class="pln"> </span><span class="pun">*</span><span class="pln">
    </span><span class="pun">[./</span><span class="pln">node_modules</span><span class="pun">/</span><span class="pln">css</span><span class="pun">-</span><span class="pln">loader</span><span class="pun">/</span><span class="pln">dist</span><span class="pun">/</span><span class="pln">cjs</span><span class="pun">.</span><span class="pln">js</span><span class="pun">!./</span><span class="pln">node_modules</span><span class="pun">/</span><span class="pln">postcss</span><span class="pun">-</span><span class="pln">loader</span><span class="pun">/</span><span class="pln">src</span><span class="pun">/</span><span class="pln">index</span><span class="pun">.</span><span class="pln">js</span><span class="pun">!./</span><span class="pln">node_modules</span><span class="pun">/</span><span class="pln">sass</span><span class="pun">-</span><span class="pln">loader</span><span class="pun">/</span><span class="pln">dist</span><span class="pun">/</span><span class="pln">cjs</span><span class="pun">.</span><span class="pln">js</span><span class="pun">!./</span><span class="pln">src</span><span class="pun">/</span><span class="pln">scss</span><span class="pun">/</span><span class="pln">index</span><span class="pun">.</span><span class="pln">scss</span><span class="pun">]</span><span class="pln"> </span><span class="pun">./</span><span class="pln">node_modules</span><span class="pun">/</span><span class="pln">css</span><span class="pun">-</span><span class="pln">loader</span><span class="pun">/</span><span class="pln">dist</span><span class="pun">/</span><span class="pln">cjs</span><span class="pun">.</span><span class="pln">js</span><span class="pun">!./</span><span class="pln">node_modules</span><span class="pun">/</span><span class="pln">postcss</span><span class="pun">-</span><span class="pln">loader</span><span class="pun">/</span><span class="pln">src</span><span class="pun">!./</span><span class="pln">node_modules</span><span class="pun">/</span><span class="pln">sass</span><span class="pun">-</span><span class="pln">loader</span><span class="pun">/</span><span class="pln">dist</span><span class="pun">/</span><span class="pln">cjs</span><span class="pun">.</span><span class="pln">js</span><span class="pun">!./</span><span class="pln">src</span><span class="pun">/</span><span class="pln">scss</span><span class="pun">/</span><span class="pln">index</span><span class="pun">.</span><span class="pln">scss </span><span class="lit">390</span><span class="pln"> </span><span class="typ">KiB</span><span class="pln"> </span><span class="pun">{</span><span class="pln">mini</span><span class="pun">-</span><span class="pln">css</span><span class="pun">-</span><span class="pln">extract</span><span class="pun">-</span><span class="pln">plugin</span><span class="pun">}</span><span class="pln"> </span><span class="pun">[</span><span class="pln">built</span><span class="pun">]</span><span class="pln">
    </span><span class="pun">[./</span><span class="pln">node_modules</span><span class="pun">/</span><span class="pln">css</span><span class="pun">-</span><span class="pln">loader</span><span class="pun">/</span><span class="pln">dist</span><span class="pun">/</span><span class="pln">runtime</span><span class="pun">/</span><span class="pln">api</span><span class="pun">.</span><span class="pln">js</span><span class="pun">]</span><span class="pln"> </span><span class="lit">2.46</span><span class="pln"> </span><span class="typ">KiB</span><span class="pln"> </span><span class="pun">{</span><span class="pln">mini</span><span class="pun">-</span><span class="pln">css</span><span class="pun">-</span><span class="pln">extract</span><span class="pun">-</span><span class="pln">plugin</span><span class="pun">}</span><span class="pln"> </span><span class="pun">[</span><span class="pln">built</span><span class="pun">]</span><span class="pln">
i </span><span class="pun">｢</span><span class="pln">wdm</span><span class="pun">｣:</span><span class="pln"> </span><span class="typ">Failed</span><span class="pln"> to compile</span><span class="pun">.</span>

Do you have an idea?

Thanks

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

User: Pro
Premium support: No
Technology: MDB Standard
MDB Version: 3.2.0
Device: Any
Browser: Any
OS: Any
Provided sample code: No
Provided link: No

gdw96

Pro User

85Support score
10Questions 3Answers

0Snippets likes 3Snippets