Module not found: Error: Can't resolve FILE in PATH - Webpack or Babel issue

Question

Src folder structure:

|   index.tsx
|   
+---components
|       Nav.tsx
|       
\---pages
        login.tsx

index.tsx:

import { BrowserWindow, app } from "electron";
import React from "react";
import ReactDOM from "react-dom";
import Login from "./pages/login";

const main = async () => {
    ReactDOM.render(<Login />, document.getElementById("app"));
};
main();

login.tsx:

import React from "react";

interface loginProps {}

const Login: React.FC<loginProps> = ({}) => {
    return (
        <div>
            <h1>HelloWorld</h1>
        </div>
    );
};
export default Login;

webpack:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
    entry: "./src/index.tsx",
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: ["babel-loader", "ts-loader"],
                include: [path.resolve(__dirname, "src")],
            },
        ],
    },
    output: {
        publicPath: "public",
        filename: "bundle.js",
        path: path.resolve(__dirname, "public"),
    },
    resolve: {
        fallback: {
            path: require.resolve("path-browserify"),
        },
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
        }),
    ],
    target: "electron-main",
};

babel:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

I can't provide much more information on this since the compiler only outputs the error mentioned in title: ERROR in ./src/index.tsx Module not found: Error: Can't resolve './pages/login' in '..\src'. Something is probably not linked correctly. webpack 5.5.1 compiled with 1 error in 4971 ms

score 1 · Answer 1 · answered Nov 18 '20 at 23:43

The problem was that I needed to add resolving extensions in the webpack config. Under resolve add:

extensions: [".ts", ".tsx", ".json", ".js"]

Also after that polyfill is needed refer to this post if you need help about it. Webpack cant resolve TypeScript modules

Appy Mango · Answer 2 · 2020-11-18T20:35:04.863

0

Change the import of login, you have exported the login as default, but imported as normal export.

index.tsx:

import { BrowserWindow, app } from "electron";
import React from "react";
import ReactDOM from "react-dom";
import  Login  from "./pages/login"; // <== Changed this line

const main = async () => {
    ReactDOM.render(<Login />, document.getElementById("app"));
};
main();

Login.tsx

import React from "react";

interface loginProps {}


const Login: React.FC<loginProps> = ({}) => { //<== Changed this line
    return (
        <div>
            <h1>HelloWorld</h1>
        </div>
    );
};
export default Login;

edited Nov 18 '20 at 20:35

answered Nov 18 '20 at 20:32

Appy Mango

1,298
5
16

Same error, already tried that. Thanks for the suggestion anyways. – Vojin Nov 18 '20 at 20:35
Try the updated code, i made some edits for the login.tsx as well – Appy Mango Nov 18 '20 at 20:36
Unfortunately it doesn't work. Though I removed unnecessary export. – Vojin Nov 18 '20 at 20:39
Could you add the error message, if it has changed, or error message with full message, so can understand better. My best bet is on the imports going wrong. – Appy Mango Nov 18 '20 at 20:52
The main problem is that, those 3 lines are the whole output. It doesn't provide any more information – Vojin Nov 18 '20 at 20:54

Module not found: Error: Can't resolve FILE in PATH - Webpack or Babel issue

2 Answers2