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

Vojin · Accepted Answer · 2020-11-18 23:43:02Z

1

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

answered Nov 18, 2020 at 23:43

Vojin

1031 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 0 · Accepted Answer · 2020-11-18 20:35:04Z

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, 2020 at 20:35

answered Nov 18, 2020 at 20:32

user14361391

5 Comments

Vojin Over a year ago

Same error, already tried that. Thanks for the suggestion anyways.

user14361391 Over a year ago

Try the updated code, i made some edits for the login.tsx as well

Vojin Over a year ago

Unfortunately it doesn't work. Though I removed unnecessary export.

user14361391 Over a year ago

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.

Vojin Over a year ago

The main problem is that, those 3 lines are the whole output. It doesn't provide any more information

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related