Shared component error: 'Always use lowercase HTML tags in React.'

[pauldcollins]

Is this a bug report?

No

The issue

Firstly, I apologise if this is not the correct place for this issue, but I think it's a React issue based on the error and my searches so far to resolve it.

I have my components in a separate components folder, as a sibling to my install of CRA. I'm using Storybook for this components folder, but (I think) this is irrelevant.

As you can't import files from outside of the src folder for CRA, I've had to eject and remove ModuleScopePlugin from webpack.dev.config, based on this post. (I would prefer not to eject, but that's the only way I could find).

It's working for some components, but when I import some them from the components folder, I get this error:

Warning: </static/media/MyComponent.02d0442d.jsx /> is using uppercase HTML. Always use lowercase HTML tags in React.

If I move this same component directly into the src folder of my CRA install, it works. It seems like shared components is a common topic of discussion, but I can't see anyone experiencing this problem. I'd prefer to solve the original shared component problem without ejecting, of course.

Thanks for any help.

[gaearon]

I have my components in a separate components folder, as a sibling to my install of CRA.

Can you explain why? This is going to be somewhat complicated because the config assumes all source code lives inside src.

[pauldcollins]

Hi @gaearon, thanks very much for the quick reply.

It's so I can have a shared component library, and run multiple instances of CRA that consume the components. A structure like this:

├── app1
│   ├── package.json
│   ├── ...
├── app2
│   ├── package.json
│   ├── ...
├── components
│   ├── myComponentNr1
│   ├── ...

If I'm doing it wrong, perhaps I'm searching for the wrong criteria. Should I only have one instance of CRA?

[gaearon]

Yeah, so there's no really good way to do this at the moment. I know it's a pain point and we'll address it eventually. The crux of the issue is that Babel needs to know which folders to compile, but compiling everything is unsafe (and also very slow) so we only compile src. You'd have to change include option in the webpack config to also include ../components, and make sure you do something similar with Jest config.

Alternatively you could build components completely without CRA. Compile them with Babel manually by using Babel CLI, and then npm link them into your main project.

[pauldcollins]

Thanks for taking the time to explain this @gaearon. That makes a lot more sense now and it's good to know the best options.

Going with option 1 sounds the most straightforward for now for me. It's a shame to eject, but I'd prefer not to make it too complicated for other developers by setting up an NPM module and going the npm link route.

Thanks again, and thanks for the great work with CRA. I'll close now.

[pauldcollins]

I hope it's OK to reopen this, I've stumbled onto another issue related to the above that I can't resolve...

I updated my paths.js file to also include the components folder:

appSrc: [resolveApp('src'), resolveApp('../components')],

I then got the following error:

./src/index.js
Module build failed: Error: No ESLint configuration found.

I installed the Airbnb linter, which threw up a bunch of errors and to be honest, I'm happy with PrettierJS and really don't want to use it. So I deleted it.

Instead, I tried to remove the Linter from Webpack, by commenting out the following code block (from line 100) in webpack.dev.config:

      {
        test: /\.(js|jsx|mjs)$/,
        enforce: 'pre',
        use: [
          {
            options: {
              formatter: eslintFormatter,
              eslintPath: require.resolve('eslint')
            },
            loader: require.resolve('eslint-loader')
          }
        ],
        include: paths.appSrc
      },

I then got the following error:

../components/MySharedComponent.jsx

Syntax error: Unexpected token (49:22)

49 | static defaultProps = {

If I comment that out, it throws errors on my render() methods next. Which appears to me like it's trying to lint the code before Babelefying it? I could be wrong.

If I copy the MySharedComponent component into the CRA src folder and import though, it works fine.

Thanks again for any help!

[pauldcollins]

OK, this maybe a red herring, but thought it's worth mentioning...

I decided to do another clean install of CRA and delete the old one. I then installed PrettierJS before ejecting, to have the settings the same as the shared component library.

After doing this and ejecting, then changing the paths.js again to appSrc: [resolveApp('src'), resolveApp('../components')],, I'm getting this error:

path.js:7
    throw new TypeError('Path must be a string. Received ' + inspect(path));

This might be more of a Webpack issue now - I guess it doesn't like the array value for appSrc? I still have my old version backed up, so the above post still stands if that's the better one to solve!

Thanks again!

[gaearon]

I'm sorry—we can't possibly provide support here for every modification people might want to do to webpack configs. So I'll close this. Some of the resources here might be helpful: https://reactjs.org/community/support.html

The error you're seeing looks like an error from Node.js when you give it an invalid value instead of the path. The stack trace should show where the bad value is coming from.

[pauldcollins]

No problem, thanks @gaearon. I wasn't sure whether to reopen or not.

At least I know it's a Node.js issue now and I also didn't know about the discussion forum for React. So that's great.

Appreciate your help.

[bradfordlemley]

@pauldcollins See https://github.com/bradfordlemley/cra-share for a fork of CRA that supports the directory structure you specified above -- if the directory structure is the only extra functionality you need, using a fork like this might be preferable to ejecting. (Also, see #3436).

[pauldcollins]

@bradfordlemley That looks like exactly what I'm after. Thanks heaps for this, I've been tearing my hair out trying to get it working!!!

Will try an implement this weekend, thanks again.