Hey there, I'm diving into the world of webpack and finding myself in a bit of a pickle trying to troubleshoot an error during the build process. My goal is for the build to run smoothly regardless of my current working directory. I've experimented with various configurations using path, context, __dir, but haven't had any luck so far. Any advice or guidance on this matter would be greatly appreciated!
Just to give you an idea, here's how my project folders are organized:
MyApp-django
├─MyApp
│ ├───src
│ │ │ index.tsx
│ │ └───components
│ │ └───App.tsx
│ └── static
│ └───frontend
│ main.js
├─tsconfig.json
└─webpack.config.json
Here's a glimpse at my webpack configuration setup:
const path = require("path");
module.exports = {
context: path.resolve(__dirname, "MyApp"),
entry: {
app: [
path.join(__dirname, "./MyApp/frontend/src/index.tsx"),
path.join(__dirname, "./MyApp/frontend/src/components/App.tsx"),
],
},
mode: "development",
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: path.resolve(__dirname, "node_modules"),
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js", ".jsx"],
},
output: {
filename: "main.js",
path: path.join(__dirname, "./MyApp/frontend/static/frontend"),
},
};
This is how my tsconfig file looks like:
{
"compilerOptions": {
"noImplicitAny": false,
"module": "es6",
"target": "es6",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"strictNullChecks": false,
"sourceMap": true,
"skipLibCheck": true,
},
"include": ["./MyApp/frontend/src/**/*"],
"exclude": ["node_modules", "**/*.spec.ts"]
}
Lastly, here's the error message that pops up whenever I'm not in the root directory:
Module not found: Error: Can't resolve './src' in 'C:\absolutepath\MyApp-django\MyApp'
resolve './src' in 'C:\absolutepath\MyApp-django\MyApp'
using description file: C:\absolutepath\MyApp-django\package.json (relative path: ./MyApp)
Field 'browser' doesn't contain a valid alias configuration
using description file: C:\absolutepath\MyApp-django\package.json (relative path: ./MyApp/src)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\absolutepath\MyApp\MyApp\src doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\absolutepath\MyApp\MyApp\src.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
C:\absolutepath\MyApp\MyApp\src.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
C:\absolutepath\MyApp\MyApp\src.wasm doesn't exist
as directory
C:\absolutepath\MyApp\MyApp\src doesn't exist