2

I've been trying to use Bitsrc to share front-end components throughout multiple applications. I'm able to create the components and export them to bitsrc, however when trying to import them and use them I run into errors.

I've set up a new aurelia application with au new, using Typescript and RequireJS. I have then created a simple component consisting of just plain HTML.

- src
| - components
  | - rocketship
    | - rocketship.ts
    | - rocketship.html
    | - index.ts

When building this component using bit build with the typescript compiler (@0.0.5), the index.js.map compiles to the following:

{"version":3,"file":"module.js","sourceRoot":"","sources":["module.tsx"],"names":[],"mappings":";;AAAA,2CAAsC;AAA7B,kCAAA,SAAO,EAAA"}

This references a file module.js which is not defined anywhere, which leads me to believe that that is cause the issue I'm having.

When I install the component through NPM, and add it to aurelia.json like this:

{
  "name": "@bit/user.workspace.components.rocketship",
  "path": "../node_modules/@bit/user.workspace.components.rocketship/dist",
  "main": "index"
}

And run the app using au run -w, I get the error:

Error: An error occurred while trying to read the map file at C:\Git\Aurelia test application\node_modules\@bit\user.workspace.components.rocketship\dist\module.js.map
Error: ENOENT: no such file or directory, open 'C:\Git\Aurelia test application\node_modules\@bit\user.workspace.components.rocketship\dist\module.js.map'
    at readFromFileMap (C:\Git\Aurelia test application\node_modules\aurelia-cli\lib\build\convert-source-map\index.js:32:11)
    at new Converter (C:\Git\Aurelia test application\node_modules\aurelia-cli\lib\build\convert-source-map\index.js:39:32)
    at Object.exports.fromMapFileComment (C:\Git\Aurelia test application\node_modules\aurelia-cli\lib\build\convert-source-map\index.js:112:10)
    at Object.exports.fromMapFileSource (C:\Git\Aurelia test application\node_modules\aurelia-cli\lib\build\convert-source-map\index.js:131:22)
    at acquireSourceMapForDependency (C:\Git\Aurelia test application\node_modules\aurelia-cli\lib\build\bundle.js:184:33)
    at work.then (C:\Git\Aurelia test application\node_modules\aurelia-cli\lib\build\bundle.js:206:25)
    at <anonymous>

So the Aurelia CLI is trying to read a file module.js.map in the component's folder, which does not exist. Is there something wrong with the Typescript transpiler? Or is Aurelia not capable of handling the result of the transpiled component?

The transpiler I'm using is

bit.envs/compilers/typescript@0.0.5
Jesse
  • 3,522
  • 6
  • 25
  • 40
  • I don't know bitsrc. But I know when using ts compiler directly using api `ts.transpileModule(...)`, if you didn't supply file name, it uses "module.ts" and "module.js" in source map json. Can you try turn off souceMap generation in bitsrc (tsconfig?)? – huocp Sep 14 '18 at 04:17
  • Another thing is you don't need to rename the scope package. Just use `"name": "@bit/user.workspace.components.rocketship",` – huocp Sep 14 '18 at 04:18
  • A temporary fix is to turn off sourcemaps in aurelia.json `"options": {"sourcemaps": false, ...}` – huocp Sep 14 '18 at 04:20
  • @huocp I already changed the naming after posting this question, I'll update it real quick. There's no tsconfig or anything in bitsrc that I can see, but the temporary fix you've provided does get rid of the error when building the app. Now I'm having trouble using the element with `require`, but that's another problem. – Jesse Sep 14 '18 at 06:58

2 Answers2

1

the current typescript compiler is working with hard coded configuration assuming you are using this: https://bitsrc.io/bit/envs/compilers/typescript/code If you would like to configure the compilerOptions you will need to fork the components and configure it the way you would like.

Fork means importing the component, making changes, tagging and export to a new scope.

qballer
  • 2,033
  • 2
  • 22
  • 40
1

The issue is that the Bit environment you are using has its own configuration, which differs from the one set in your project. This is because at the moment Bit comes with its own set of hard-coded configurations.

Here's a suggested workflow to fork and reconfigure an existing Bit environment:

  1. Create a new directory and an empty workspace in it using bit init
  2. Import the environment you want to modify (but without the --compiler/tester flag)
  3. Open and modify the config file of the component
  4. Tag and export the new version of the component to your own Scope

Now you have your own compiler with a modified set of plugins. The next step is to head back to your project, and modify the bit.json file to point to the new compiler. Afterwards rerun bit status to see that all components are now modified (due to the modified compiler). Tag and export a new version, with the new compiler.

itaymendel
  • 694
  • 7
  • 20