I am currently working on a typescript project with the following structure:
root/
packges/
client/ <-- Built with CRA
server/
domain/
src/models
package.json
tsconfig.json
webpack.config.js
When trying to import a model such as
@project/domain/src/models/some-model.ts
into the client project, it seems to be accepted by the linter. However, upon running the app, an error occurs:
../domain/src/models/some-model.ts 12:7
[1] Module parse failed: Unexpected token (12:7)
[1] File was processed with these loaders:
[1] * ../../node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
[1] You may need an additional loader to handle the result of these loaders.
[1] > export enum SomeEnum {
[1] | VALUE1,
[1] | VALUE2
My assumption is that the error arises because the domain 'app' itself is not executed, only referenced, causing its webpack configuration to be ignored. How can I address this issue and make it work correctly?
Here is a snippet from the webpack.config.js file:
module.exports = {
module: {
rules: [{ test: /\.ts$/, use: 'ts-loader', exclude: '/node_modules/' }]
}
}
And this is the content of the tsconfig.json file:
{
"compilerOptions": {
"target": "es6",
"module": "esnext",
...
},
"include": ["src"]
Additionally, I have a couple of other questions:
- I do not plan to include shared code, other than models, in the
domain
directory. Is it mandatory for the domain to have a src folder? Can it be minimal or does it need to be a fully functional sub-project? - Do I need to use node references in the package.json file when utilizing yarn workspaces?