I have a project in typescript, with the structure like this:
root/
packges/
client/ <-- Built with CRA
server/
domain/
src/models
package.json
tsconfig.json
webpack.config.js
Importing a model such as @project/domain/src/models/some-model.ts
inside the client project seems to work fine (or at least the linter doesn't complain about it). However, when I run the app, I get this error:
../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
I'm guessing that this is because the domain 'app' itself isn't being run, just referenced, so its webpack config is ignored. But if that's the case then how can I get this to properly work?
webpack.config.js
module.exports = {
module: {
rules: [{ test: /\.ts$/, use: 'ts-loader', exclude: '/node_modules/' }]
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es6",
"module": "esnext",
...
},
"include": ["src"]
Some other relevant questions:
domain
, so is it necessary for it to have a src folder? Can I somehow get it as bare-bones as possible, or does it have to be a full-on runnable sub-project?After deciding not to program at 5am, I used a different search term and was finally able to google the answer. Basically, this error is due to CRA not allowing code outside the src directory. So the fix is either ejecting, using react-app-rewired
, or using craco
which is what I went with. To answer my own misc questions:
models
folder into the root of the domain
directory/package. I don't know if this is good practice per say but looking at the import path without src
makes me feel better.