'bit add', 'bit build' and 'bit test' fail when README.md added to Vue component

[renshawdev]

Describe the bug

Trying to include a README.md in the component folder as per the instructions shown in an empty collection, but fails due to an error related to the README file. Everything works as expected without one.

Steps to Reproduce

1. start with a working vue component (added, built, tested, tagged, exported all okay' e.g.

   src/components/HelloWorld/
       HelloWorld.vue
   

2. add README.md in component folder e.g.

   src/components/HelloWorld/
       HelloWorld.vue
       README.md
   

   Readme.md

   # Some heading
   

3. bit add src/components/HelloWorld/* --main src/components/HelloWorld/HelloWorld.vue -t tests/unit/{PARENT}/*.spec.ts (same as used without README.md)

Alternatively:

1. add README to already tracked component e.g.

   bit add src/components/HelloWorld/README.md --id hello-world
   

2. run bit build or bit test or bit tag
3. wait for failure

Expected Behavior

Component tests and build complete without errors when following instructions. NB same thing happens with index.js file in component folder and not specifying --main in add command

Screenshots, exceptions and logs

• bit add with README.md in component folder

Specifications

• Bit version: 14.7.4
• Node version: 12.13.1
• npm version: 6.12.1
• Platform: Windows 10
• Bit compiler (include version): [email protected]
• Bit tester (include version): [email protected]

Additional context

• Without README

• bit tag after adding to already tracked component (stalls on building component)

• bit test after adding to already tracked component

[davidfirst]

@paulrenshaw , when you run bit add with /*, it tries to create a component from each one of the files in that directory. In your case, when you have two files, only one of them is the main file, so it fails on the readme saying the main-file is missing.

Just change your bit add command to the following: bit add src/components/HelloWorld --main src/components/HelloWorld/HelloWorld.vue -t tests/unit/{PARENT}/*.spec.ts.

[renshawdev]

@paulrenshaw , when you run bit add with /*, it tries to create a component from each one of the files in that directory. In your case, when you have two files, only one of them is the main file, so it fails on the readme saying the main-file is missing.

Just change your bit add command to the following: bit add src/components/HelloWorld --main src/components/HelloWorld/HelloWorld.vue -t tests/unit/{PARENT}/*.spec.ts.

@davidfirst Same result

[davidfirst]

Oh I see, so that's an issue with bit test not with bit add. Any chance that the README file was added for some reason as a test file? you can verify it by running bit show <id> or by looking into .bitmap file.

[renshawdev]

It's not added as a test file. I think it's an issue with the webpack config in the vue compiler. I think it needs to use ignore-loader set to match .md files. I'll have a go at creating my own modified version.

[renshawdev]

It worked! I followed the instructions here https://discourse.bit.dev/t/can-i-modify-a-build-test-environments/28 as it says to in the readme for the vue compiler here https://github.com/teambit/envs/blob/master/packages/vue/readme.md

i.e. I initialised a new bit workspace in a new directory, installed the bit.envs/bundlers/vue component (without the --compiler flag), installed the ignore-loader npm package (in the vue component folder: components/bundlers/vue/vue) and added to the webpack config to match .md files:

"rules": [
    {
        "loader": "ignore-loader",
        "test": /\.md&/
    }
...

tagged it, exported to my own collection, went back to my original vue project and installed the component from my collection as the compiler, ran 'bit tag' and the build stage passed etc.

output:

$ bit import paulrenshaw.vue/bundlers/vue --compiler
the following component environments were installed
- paulrenshaw.vue/bundlers/[email protected]

$ bit add src/components/HelloWorld/README.md --id hello-world
tracking component [email protected]:
added src/components/HelloWorld/HelloWorld.vue
added src/components/HelloWorld/README.md
added tests/unit/HelloWorld/HelloWorld.spec.ts

$ bit tag hello-world
√ building component - [email protected]
1 component(s) tagged
(use "bit export [collection]" to push these components to a remote")
(use "bit untag" to unstage versions)

changed components
(components that got a version bump)
     > [email protected]

It worked!

[renshawdev]

P.S. I think this should be added to the bit.envs/bundlers/vue component on bit so that others don't have to figure this out in future. Unless some people do want webpack to try to parse .md files in vue component folders.

[davidfirst]

@paulrenshaw , thanks for the update! I re-opened it for now, to make sure we handle it. I'm going to move it to the bit.envs repo. @JoshK2 , can you take a look, it looks like a bug in the Vue compiler.