How to tell webpack to preprocess a yarn package with flow annotations? - reactjs

Question

I am currently having a client side application which uses React, flow types and I package it using webpack 3.11 and everything is working great so far.
Just because the app is starting to get a little too big, I decided to move some React components to their own package by moving them to their own folder, setting up a package.json and then installing them by doing yarn add ./path/to/package --dev and after that webpack started complaining because it could not parse my flow annotations.
Error example
Module parse failed: Unexpected token (15:7)
You may need an appropriate loader to handle this file type.
| import "./BaseTree.css";
|
| export type Tree = {
| name: NodeName,
| parent: ?NodeName,
I've read about compiling my assets and using the stripped down javascript in my app but that's an extra building step I'd rather avoid since I don't plan on using this package anywhere else and my webpack setup already handles flow types just fine on it's own.
.babelrc
{
"presets": [
[
"env",
{
"targets": {
"node": "current",
"browsers": ["last 3 versions"]
}
}
],
"jest",
"react",
"flow"
],
"plugins": ["transform-class-properties"]
}
webpack.config.js (as generated by #symfony/webpack-encore)
{
"context": "/vhosts/app",
"entry": {
"main": "./assets/modules/main.js",
},
"output": {
"path": "/vhosts/app/public/build",
"filename": "[name].js",
"publicPath": "/build/",
"pathinfo": true
},
"module": {
"rules": [
{
"test": {},
"exclude": {},
"use": [
{
"loader": "babel-loader",
"options": {
"cacheDirectory": true
}
}
]
},
{
"test": {},
"use": [
{
"loader": "/vhosts/app/node_modules/extract-text-webpack-plugin/dist/loader.js",
"options": {
"omit": 1,
"remove": true
}
},
{
"loader": "style-loader?sourceMap"
},
{
"loader": "css-loader",
"options": {
"minimize": false,
"sourceMap": true,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"sourceMap": true
}
}
]
},
{
"test": {},
"loader": "file-loader",
"options": {
"name": "images/[name].[hash:8].[ext]",
"publicPath": "/build/"
}
},
{
"test": {},
"loader": "file-loader",
"options": {
"name": "fonts/[name].[hash:8].[ext]",
"publicPath": "/build/"
}
}
]
},
"plugins": [
{
"filename": "[name].css",
"id": 1,
"options": {
"allChunks": false
}
},
{
"entriesToDelete": []
},
{
"opts": {
"basePath": "build/",
"publicPath": "/build/",
"fileName": "manifest.json",
"stripSrc": null,
"transformExtensions": {},
"writeToFileEmit": true,
"cache": null
}
},
{
"options": {
"debug": true,
"options": {
"context": "/vhosts/app",
"output": {
"path": "/vhosts/app/public/build"
}
},
"test": {}
}
},
{
"options": {}
},
{
"definitions": {
"$": "jquery",
"jQuery": "jquery",
"window.jQuery": "jquery"
}
},
{
"paths": [
"**/*"
],
"options": {
"root": "/vhosts/app/public/build",
"verbose": false,
"allowExternal": false,
"dry": false
}
},
{
"definitions": {
"process.env": {
"NODE_ENV": "\"development\""
}
}
},
{
"compilationSuccessInfo": {
"messages": []
},
"shouldClearConsole": false,
"formatters": [
null,
null,
null,
null,
null,
null
],
"transformers": [
null,
null,
null,
null,
null,
null
]
},
{
"outputPath": "public/build",
"friendlyErrorsPlugin": {
"compilationSuccessInfo": {
"messages": []
},
"shouldClearConsole": false,
"formatters": [
null,
null,
null,
null,
null,
null
],
"transformers": [
null,
null,
null,
null,
null,
null
]
}
}
],
"devtool": "inline-source-map",
"performance": {
"hints": false
},
"stats": {
"hash": false,
"version": false,
"timings": false,
"assets": false,
"chunks": false,
"maxModules": 0,
"modules": false,
"reasons": false,
"children": false,
"source": false,
"errors": false,
"errorDetails": false,
"warnings": false,
"publicPath": false
},
"resolve": {
"extensions": [
".js",
".jsx",
".vue",
".ts",
".tsx"
],
"alias": {}
},
"externals": {}
}
TL;DR version
Have app written using flow types.
Also have own npm package written using flow types to be used just on that app.
Can I set up webpack so that it strips the types for both my app code and the package?