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

renshawdev commented 4 years ago

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

start with a working vue component (added, built, tested, tagged, exported all okay' e.g.
```
src/components/HelloWorld/
    HelloWorld.vue
```

add README.md in component folder e.g.

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

Readme.md

# Some heading

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

Alternatively:

add README to already tracked component e.g.

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

run bit build or bit test or bit tag
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): vue@2.6.0
Bit tester (include version): jest@22.4.3

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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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/vue@2.6.21

$ bit add src/components/HelloWorld/README.md --id hello-world
tracking component hello-world@0.0.1:
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 - hello-world@0.0.1
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)
     > hello-world@0.0.2

It worked!

renshawdev commented 4 years ago

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 commented 4 years ago

@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.

teambit / envs