Splitting up project with react & webpack4; html tags are unexpected tokens

Question

Background

I\'m using react, babel, webpack4, and es6(or maybe es7)

I have some modules that are reused by multiple react projects. For this r

Answer 1

You're 1st problem here is that babel is not parsing code from you're packages (error say that it try to exec not transpiled jsx code).

Maybe the babel presets is not accessible in you're package directory. You can try copying them or set them directly in the webpack config

                    {
                        loader : 'babel-loader',
                        options: {
                            presets       : [
                                ['@babel/preset-env',
                                    {// here the presets params
                                    }],
                                '@babel/preset-react'
                            ],
                            plugins       : [
                                ['@babel/plugin-proposal-class-properties', {
                                    "loose": true
                                }]
                            ]
                        }
                    },

Possibly the exclude regexp of babel exclude the packages from where you want importing scripts :

     exclude: /(node_modules|bower_components)/,

So you can use a custom function like that :

     exclude: {test:(pathName)=>(isInternalCode(pathName))),

Or use negative lookahead in the reg exp like :

/(node_modules(?!\b(?:OneFolder|AnotherIncluded))|bower_modules)/

That's said the usual way is to compile independently you're packages ( by externalizing all theirs deps from the builds & adding them to "peerDependencies" or "dependencies" )

Also; there a plugin to make "inheritable" packages; layer-pack.

It allow making "inheritable" projects, & deal with node_modules & webpack to make inheritable "code layers" & even work when compiling node scripts or using monorepo structure

Using it you can simply put you're components in a shared inheritable package

it come with some nice features like glob resolving, which help including an unknown number of files.

There is samples here & doc here

Hope it help :)