%PDF-
%PDF-
Mini Shell
Mini Shell
<!doctype html>
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Configuring bundlers & common issues | vuejs-datatable</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<header>
<div class="tsd-page-toolbar">
<div class="container">
<div class="table-wrap">
<div class="table-cell" id="tsd-search" data-index="../assets/js/search.js" data-base="..">
<div class="field">
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
<input id="tsd-search-field" type="text" />
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
<a href="../index.html" class="title">vuejs-datatable</a>
</div>
<div class="table-cell" id="tsd-widgets">
<div id="tsd-filter">
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
<div class="tsd-filter-group">
<div class="tsd-select" id="tsd-filter-visibility">
<span class="tsd-select-label">All</span>
<ul class="tsd-select-list">
<li data-value="public">Public</li>
<li data-value="protected">Public/Protected</li>
<li data-value="private" class="selected">All</li>
</ul>
</div>
<input type="checkbox" id="tsd-filter-inherited" checked />
<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
<input type="checkbox" id="tsd-filter-externals" checked />
<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
<input type="checkbox" id="tsd-filter-only-exported" />
<label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label>
</div>
</div>
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
</div>
</div>
</div>
</div>
<div class="tsd-page-title">
<div class="container">
<ul class="tsd-breadcrumb">
</ul>
<h1> Configuring bundlers & common issues</h1>
</div>
</div>
</header>
<div class="container container-main">
<div class="row">
<div class="col-8 col-content">
<div class="tsd-panel tsd-typography">
<a href="#common-issues" id="common-issues" style="color: inherit; text-decoration: none;">
<h2>Common issues</h2>
</a>
<a href="#all-bundlers" id="all-bundlers" style="color: inherit; text-decoration: none;">
<h3>All bundlers</h3>
</a>
<a href="#codeunknown-custom-element-ltdatatable-headergt---did-you-register-the-component-correctly-for-recursive-components-make-sure-to-provide-the-quotnamequot-optioncode" id="codeunknown-custom-element-ltdatatable-headergt---did-you-register-the-component-correctly-for-recursive-components-make-sure-to-provide-the-quotnamequot-optioncode" style="color: inherit; text-decoration: none;">
<h3><code>Unknown custom element: <datatable-header> - did you register the component correctly? For recursive components, make sure to provide the "name" option.</code></h3>
</a>
<p>This usually means that <em>vuejs-datatable</em> is not correctly installed on the instance of <em>vue</em> you are trying to use.</p>
<a href="#if-you-are-using-the-iife-build" id="if-you-are-using-the-iife-build" style="color: inherit; text-decoration: none;">
<h4>If you are using the IIFE build</h4>
</a>
<p>Make sure that your application is not shipping its own copy of <em>vue</em>. Scripts should be loaded in the following order:</p>
<ol>
<li>Vue</li>
<li>Vuejs-datatable</li>
<li>Your application code</li>
</ol>
<a href="#if-you-are-using-the-esm-build" id="if-you-are-using-the-esm-build" style="color: inherit; text-decoration: none;">
<h4>If you are using the ESM build</h4>
</a>
<p>Make sure that your application code & <em>vuejs-datatable</em> share the same instance of Vue.</p>
<p>This library simply imports the module <code>vue</code>, so make sure that your application imports <code>vue</code> also.</p>
<pre><code class="language-ts"><span class="hljs-comment">// Wrong</span>
<span class="hljs-keyword">const</span> Vue = <span class="hljs-built_in">require</span>( <span class="hljs-string">'vue/dist/vue.esm.js'</span> );
<span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue/dist/vue.min.js'</span>;
<span class="hljs-comment">// Right</span>
<span class="hljs-keyword">const</span> Vue = <span class="hljs-built_in">require</span>( <span class="hljs-string">'vue'</span> );
<span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;</code></pre>
<p>Instead of targeting the right build in your code, configure your bundler to alias the <code>vue</code> module as your desired <code>vue</code> dist file. Check below for <a href="#alias-the-vue-module">how to alias <code>vue</code></a>.</p>
<a href="#codeyou-are-using-the-runtime-only-build-of-vue-where-the-template-compiler-is-not-available-either-pre-compile-the-templates-into-render-functions-or-use-the-compiler-included-buildcode" id="codeyou-are-using-the-runtime-only-build-of-vue-where-the-template-compiler-is-not-available-either-pre-compile-the-templates-into-render-functions-or-use-the-compiler-included-buildcode" style="color: inherit; text-decoration: none;">
<h4><code>You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.</code></h4>
</a>
<a href="#rollup" id="rollup" style="color: inherit; text-decoration: none;">
<h3>Rollup</h3>
</a>
<a href="#code39get39-is-not-exported-by-node_modulesobject-pathindexjscode-amp-code39set39-is-not-exported-by-node_modulesobject-pathindexjscode" id="code39get39-is-not-exported-by-node_modulesobject-pathindexjscode-amp-code39set39-is-not-exported-by-node_modulesobject-pathindexjscode" style="color: inherit; text-decoration: none;">
<h4><code>'get' is not exported by node_modules/object-path/index.js</code> & <code>'set' is not exported by node_modules/object-path/index.js</code></h4>
</a>
<p><code>object-path</code> being a <em>commonjs</em> module, you need to configure rollup to handle it properly. First, install the <a href="https://www.npmjs.com/package/rollup-plugin-commonjs">plugin <code>rollup-plugin-commonjs</code></a>.</p>
<pre><code class="language-bash">npm install --save-dev rollup-plugin-commonjs</code></pre>
<p>Then, set up rollup:</p>
<pre><code class="language-js"><span class="hljs-comment">// ...</span>
<span class="hljs-keyword">import</span> commonjs <span class="hljs-keyword">from</span> <span class="hljs-string">'rollup-plugin-commonjs'</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
<span class="hljs-comment">// ...</span>
plugins: [
<span class="hljs-comment">// ...</span>
commonjs( {
<span class="hljs-attr">namedExports</span>: {
<span class="hljs-string">'object-path'</span>: [ <span class="hljs-string">'get'</span>, <span class="hljs-string">'set'</span> ],
}
} ),
<span class="hljs-comment">// ...</span>
],
};</code></pre>
<a href="#tips-amp-tricks" id="tips-amp-tricks" style="color: inherit; text-decoration: none;">
<h2>Tips & tricks</h2>
</a>
<a href="#alias-the-codevuecode-module" id="alias-the-codevuecode-module" style="color: inherit; text-decoration: none;">
<h3>Alias the <code>vue</code> module</h3>
</a>
<p>Because <em>vuejs-datatable</em> imports bare <code>vue</code>, you should configure your bundler to alias the distribution you want to use.</p>
<a href="#rollup-1" id="rollup-1" style="color: inherit; text-decoration: none;">
<h4>Rollup</h4>
</a>
<p>Install the <a href="https://www.npmjs.com/package/rollup-plugin-commonjs">plugin <code>rollup-plugin-alias</code></a>.</p>
<pre><code class="language-bash">npm install --save-dev rollup-plugin-alias</code></pre>
<p>Configure rollup to alias <code>vue</code> to the distribution you want.</p>
<pre><code class="language-js"><span class="hljs-keyword">import</span> alias <span class="hljs-keyword">from</span> <span class="hljs-string">'rollup-plugin-alias'</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
<span class="hljs-comment">// ...</span>
plugins: [
<span class="hljs-comment">// ...</span>
alias( {
<span class="hljs-attr">entries</span>: [
{ <span class="hljs-attr">find</span>:<span class="hljs-string">'vue'</span>, <span class="hljs-attr">replacement</span>: <span class="hljs-built_in">require</span>.resolve( <span class="hljs-string">'vue/dist/vue.esm.js'</span> ) },
]
} ),
<span class="hljs-comment">// ...</span>
],
};</code></pre>
</div>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class="globals ">
<a href="../globals.html"><em>Globals</em></a>
</li>
<li class="current ">
<a href="index.html">Tutorial index</a>
<ul>
<li class="current ">
<a href="bundlers.html">Configuring bundlers & common issues</a>
</li>
<li class=" ">
<a href="basic.html">Basic table</a>
</li>
<li class=" ">
<a href="pager-types.html">Pager types</a>
</li>
<li class=" ">
<a href="ajax/index.html">Ajax table</a>
</li>
<li class=" ">
<a href="customize/index.html">Tables customization</a>
</li>
<li class=" ">
<a href="multiple-tables.html">Multiple tables</a>
</li>
<li class=" ">
<a href="no-pager.html">No pager</a>
</li>
<li class=" ">
<a href="limit-rows-processing.html">Limit rows processing</a>
</li>
</ul>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
</ul>
</nav>
</div>
</div>
</div>
<footer class="with-border-bottom">
<div class="container">
<h2>Legend</h2>
<div class="tsd-legend-group">
<ul class="tsd-legend">
<li class="tsd-kind-module"><span class="tsd-kind-icon">Module</span></li>
<li class="tsd-kind-object-literal"><span class="tsd-kind-icon">Object literal</span></li>
<li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li>
<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
<li class="tsd-kind-function tsd-has-type-parameter"><span class="tsd-kind-icon">Function with type parameter</span></li>
<li class="tsd-kind-index-signature"><span class="tsd-kind-icon">Index signature</span></li>
<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
<li class="tsd-kind-type-alias tsd-has-type-parameter"><span class="tsd-kind-icon">Type alias with type parameter</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
<li class="tsd-kind-enum-member"><span class="tsd-kind-icon">Enumeration member</span></li>
<li class="tsd-kind-property tsd-parent-kind-enum"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-enum"><span class="tsd-kind-icon">Method</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
<li class="tsd-kind-interface tsd-has-type-parameter"><span class="tsd-kind-icon">Interface with type parameter</span></li>
<li class="tsd-kind-constructor tsd-parent-kind-interface"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li>
<li class="tsd-kind-index-signature tsd-parent-kind-interface"><span class="tsd-kind-icon">Index signature</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
<li class="tsd-kind-class tsd-has-type-parameter"><span class="tsd-kind-icon">Class with type parameter</span></li>
<li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><span class="tsd-kind-icon">Accessor</span></li>
<li class="tsd-kind-index-signature tsd-parent-kind-class"><span class="tsd-kind-icon">Index signature</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static property</span></li>
<li class="tsd-kind-call-signature tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static method</span></li>
</ul>
</div>
</div>
</footer>
<div class="container tsd-generator">
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
</div>
<div class="overlay"></div>
<script src="../assets/js/main.js"></script>
<script>if (location.protocol == 'file:') document.write('<script src="../assets/js/search.js"><' + '/script>');</script>
</body>
</html>
Zerion Mini Shell 1.0