title: Building Typescript: [!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
body: <p>I've encountered problem building typescript packages with rollup inside lerna managed monorepo.</p>
  
  <p><a href="https://gist.github.com/moki/89e935193b7d5911b7b0452e0de3e0a6" rel="noreferrer">Error</a>:</p>
  
  <pre><code>lerna ERR! rollup --config ../../rollup.config.js stderr:
  loaded ../../rollup.config.js with warnings
  (!) Unused external imports
  terser imported from external module 'rollup-plugin-terser' but never used
  
  index.ts → dist/esm...
  [!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
  ../mokui-base/component.ts (3:7)
  1: const root = Symbol("root");
  2: 
  3: export type Component&lt;T extends object = {}&gt; = T &amp; {
            ^
  4:         [root]: Element;
  5:         attach(element: Element): Component&lt;T&gt;;
  Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
      at error (/****/****/code/js/mokui/node_modules/rollup/dist/rollup.js:5351:30)
      at Module.error (/****/****/code/js/mokui/node_modules/rollup/dist/rollup.js:9643:9)
      at tryParse (/****/****/code/js/mokui/node_modules/rollup/dist/rollup.js:9552:16)
      at Module.setSource (/****/****/code/js/mokui/node_modules/rollup/dist/rollup.js:9868:33)
      at Promise.resolve.catch.then.then.then (/****/****/code/js/mokui/node_modules/rollup/dist/rollup.js:12148:20)
  
  
  lerna ERR! rollup --config ../../rollup.config.js exited 1 in '@moki.codes/mokui-header'
  </code></pre>
  
  <p>Error points at "export type" tokens which is well... confusing, how come typescript doesn't understand own constructs i am not sure.</p>
  
  <p>One will be able to reproduce error by cloning <a href="https://github.com/moki/mokui" rel="noreferrer">repository</a> and running <code>yarn build:packages</code>
  @master branch.</p>
  
  <p>Interestingly enough <code>mokui-base</code> package which defines <code>Component</code> builds just fine by itself, giving the error above on build only when one depend on it like i do inside the <code>mokui-header</code>. Reproducible by adding</p>
  
  <pre><code>if (process.env.LERNA_PACKAGE_NAME === "@moki.codes/mokui-header")
      process.exit(0);
  </code></pre>
  
  <p>at the top of the <code>rollup.config.js</code> and running <code>yarn build:packages</code>.</p>
  
  <p>I also have another build target "dev" one can try with <code>yarn build:dev</code> which builds from <code>stories/index.ts</code>, and serves at <code>localhost:3000</code>. It is relevant to the question because there, <code>mokui-header</code> <code>Header</code> builds just fine depending on the <code>mokui-base</code> <code>Component</code>, <code>Header</code> factory is used inside <code>index.ts</code> and gives no errors, works as intented and provides defined behavior.</p>
  
  <p>My first instinct was to opt out of the cjs build because thats the main difference between two builds(build:packages and build:dev), but that didn't make any difference, so that leaves with the <code>@organization/package</code> resolution problem i guess, i am not sure... not like i know where to go from there if that's the case. Removing <code>export</code> at <code>export type Component =...</code> inside <code>component.ts</code> source gets rid of the error, but of course that spawns the new error inside the <code>mokui-header</code> <code>HeaderComponent</code> complaining that <code>Component is a value but used as type</code>, because well... there is no <code>Component</code> type export to consume anymore.</p>
  
  <p>So yeah, if you have any ideas where should i go from here or know exactly how i should go about building typescript package, which depends on the other sibling one please do share them.</p>
  
  <p>I am sorry if i come off as rude but please don't recommend me opting out of the custom build and use preconfigured boilerplate or something of that sort.</p>
  
  <p>Thanks in advance!</p>