Coder Legion - Recent posts tagged webpack

Cannot find module '@babel/core'

Sun, 19 Jul 2026 06:07:05 +0000

The error message Cannot find module '@babel/core' is a common issue faced by developers who are using the JavaScript transpiler, Babel. This error occurs when the module cannot be found or is not installed in the project's node_modules folder.

What is Babel? #

Babel is a JavaScript transpiler that allows developers to use the latest JavaScript features, even if the environment they are working in does not support them.

It also allows developers to write code in one language and transpile it into another language that is more widely supported.

What is @babel/core module? #

@babel/core is a package that contains the core functionality of Babel.

It is responsible for parsing the code and generating the output. When this package is not found, the transpilation process cannot be completed, resulting in the "Cannot find module '@babel/core'" error.

The Solutions #

Solution 1: Install @babel/core package #

The simplest and most common solution is to install the @babel/core package to ensure that it is installed.

Open your terminal and run the following:

npm install @babel/core

This command will install the package in the project's node_modules folder and make it available for use.

Tip It's always recommended to review the package.json file and make sure all the dependencies and devDependencies are up-to-date.

Solution 2: Install @babel/core latest version #

Another common cause of this error is a missing or outdated version of Babel.

To ensure that you have the latest version of Babel, you can run the following command:

npm install --save-dev @babel/core

then the latest version of the @babel/core package will be installed and saved as a development dependency in the project.

Note It's also important to note that, in some cases, the error may be caused by a missing or outdated version of other dependencies that are related to babel, for example, babel-cli, babel-loader, babel-preset-env, babel-polyfill.

Solution 3: Check missing or outdated Webpack configuration #

It's also possible that the error is caused by a missing or outdated Webpack configuration.

Note Webpack is a JavaScript module bundler that takes all of the different modules in a project and generates a single bundle or multiple bundles

In this case, you should check your webpack.config.js file to ensure that it is properly configured to use Babel like the following:

const path = require("path");
const babel = require("@babel/core");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"]
          }
        }
      }
    ]
  }
};

In the above example, the babel-loader is being used to transpile the JavaScript files using the @babel/preset-env preset. This preset allows the code to be transpiled to the version of JavaScript that is supported by the target environment.

Solution 4: Check .babelrc configuration file #

It's also possible that the error is caused by a missing or outdated .babelrc configuration file.

This file is used to configure Babel and specify the presets and plugins that should be used.

.babelrc file should contain the following:

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

the @babel/preset-env and @babel/plugin-proposal-class-properties are specified as the presets and plugins to be used.

Caution Assuming that you are still facing the issue, it's best to check the project's package.json, webpack.config.js, and .babelrc files to ensure that everything is configured correctly. If the problem persists, you can also check the project's documentation or seek help from the community

The Conclusion #

In conclusion, the Cannot find module '@babel/core' error is a common issue faced by developers using Babel, but it can be easily resolved by checking and updating the package installations, configuration files, and dependencies. It's important to stay vigilant and maintain your project's dependencies and configurations to avoid these types of errors and ensure smooth development.

The References #

The official Babel documentation on troubleshooting:
https://babeljs.io/docs/en/troubleshooting#cannot-find-module-babel-core
The official Babel documentation:
https://babeljs.io/docs/en/index.html
The official webpack documentation:
https://webpack.js.org/
The official webpack documentation on configuration:
https://webpack.js.org/configuration/
The official Babel documentation on configuration:
https://babeljs.io/docs/en/configuration

Syntaxerror: unexpected token 'export'

Thu, 09 Apr 2026 23:39:59 +0000

The error `Syntaxerror: unexpected token 'export'` will be encoutered when you try to use the export keyword in a version of nodejs that is prior to v14.13.0. To solve the problem, you have to either use the older method of exporting the method, and that is using the method module.exports, or, you may be better off updating to the latest version of nodejs. I recommend you do the latter as it's better for your system security and number of features. You don't want to stay behind using old cumbersome method of doing things in nodejs.

Explanation #

The error says that the export token was unexpected and that means the Javascript runtime parser has not been able to understand the export keyword. To understand, how does this error happen. We have to understand first what is NodeJS and how it imports and exports modules.

What is NodeJS?

If you are already coding on the client side, you are necessarily using JavaScript. Why? Because all browsers are equipped with a Javascript engine that will allow us to translate our Javascript code into machine code.

Well, one day, there was a guy called Ryan Dahl who had the brilliant idea of taking the Javascript V8 engine, which is the one found in the Chrome browser, and using it outside the Navigator. He created the Node.js platform!

Node.js is very frequently used to write server-side services called APIs (Application Programming Interface) And in the end, we can say that Node.js represents an alternative to server languages like PHP, Java or Python. This alternative has become popular in a lot of companies and has even revolutionized a lot of things in big companies like PayPal. PayPal, which used Java, decided to test Node.js on a small part of its code and the results were quite impressive.

Some real-time applications may have application features that are used in multiple places in that application, but are not available in the NodeJS module repository. To take advantage of reuse in this scenario, you need to create a new NodeJS module. It is not enough to create a new module to be used by other modules in the system. This module must be exported to be reused in other modules. If you're a UI or Java developer, you're probably familiar with it. If your Java-based application contains generic or reusable components, develop it as a separate project, create a Jar file, and add it to your project's required classpath. Don't worry too much about creating NodeJS modules at this point. We will discuss how to create our own NodeJS modules in the future.

How to import and export modules in NodeJS? #

A “module” is any file composed of Javascript code imported into another file or script.

Modules allow you to split up your code to better organize it. In practice, when several people are working on a project, it is common to split the code into several files containing related parts of the final program to facilitate code, maintenance, and overall teamwork.

To export functions or classes, we have to define function or class first and then assign the class or function to a member of the variable exports. Open you Visual Studio code and create new folder for doing this mini-project. Create a new file and name mymodule.js. And type the following inside it:

function add(a,b) {
  return a + b;
}

class User {
    sayHello() {
        console.log("Hello, I'm user!")
    }
}

exports.add = add
exports.User = User

After you are done doing that you have to next create another Javascript file and name it index.js.

To import these functions and classes in index.js script we have to use the require function which is compatible with CommonJS version we are using at the moment.

You have to assign the return variable from the require to a variable inside your script to use. And for the require() function, you have to pass the path of the file without the file extension at the end.

const { User, add } = require("./mymodule")

// Or you can do it this way
const mymodule = require("./mymodule")
// The class will be available at mymodule.User and the add function will be available at mymodule.add

The Solution #

Now that we know everything regarding how to fix this issue, we will resolve the issue now. There are two main methods for fixing this. First and I advise you do this instead is upgrade to the latest version of NodeJS and the second method is to use CommonJS method of importing function and classes. We will look at each of them right now.

Solution one

IIf you are using are using Windows, download the latest package of NodeJS and install it. And if you are using Linux, I advise you install the global package 'n'. This package will install everything. After that close and reopen the terminal and the new version will take effect.

First, let's install n.

npm install -g n

After it complete installing. Run the following command:

n latest

After that, the new package will be completely installed. Now close the terminal session and reopen it. And run the script again.

This will resolve the import errors and make the script function properly.

Solution two

Another simple solution is to use the old way of exporting modules, using CommonJS. To import a module in CommonJS, we use the require function and we give the path to the script without the file extension. The file extension is .js.

class User {
  sayHello() {
    console.log("Hello, I'm user!");
  }
}

module.exports.User = User

After this the export will work fine.

The Conclusion

Thanks for reading the tutorial and sticking all the way to the end. To sum up, there are two possible fixes for this problem. The best one is to update you NodeJS environment and use the latest method of exporting and importing scripts. The other method is to use the way of doing things and use CommonJS syntax by assigning the classes and functions to the exports variable, then importing them with the require() function.

That's it for this tutorial. If you run into any issues, don't hesitate to leave a comment.

Preloading chunks with webpack

Wed, 05 Feb 2025 21:05:39 +0000

Webpack is a well-established web bundler that is widely known (among other things) for its rich set of features.

One of the many cool aspects of webpack that I would like to focus on in this article is the concept of preloading, i.e. what it is, why it is needed and how it works.

Before jumping into the actual topic, we first have to quickly cover some preliminary notions in order to get the most out of this writing.

Prerequisites

What is a chunk?

When talking about webpack, the concept of a chunk can be hardly skipped over.

In simple terms, a chunk is a file that is created as a result of the bundling process.
This generated file contains modules (which can be thought of as the initial files and their entire chains of dependencies), as well some runtime code, which is code added by webpack in order to achieve its magic.

There are multiple kind of chunks:

entry chunks, i.e. chunks created from entry files, declared in the entry configuration option
async chunks, i.e. those created with the import() function
chunks created automatically by webpack, e.g. when using webpacks' SplitChunksPlugin

I have written in more detail about what chunks are in webpack in this previous article.

The `import()` function

When we talk about preloading chunks, it is somehow implied that we are talking about async chunks. This kind of chunks are created with the help of
the import() function, so it is worth spending a few minutes on this.

Whenever webpack detects a call to import('file.js'), webpack will automatically create a chunk that corresponds to file.js, such that, when that line that invokes the function
is reached, an actual HTTP request will be made and, through this, the file will be fetched and then integrated into the application.

Why is it needed to talk about this concept before introducing chunk preloading?

Preloading, in itself, it is a strategy to optimise the experience of the users on the Internet. It narrows down to giving the browser certain instructions that will fetch
assets with higher priority (typically, one would use that for resource that are critical to the first navigation to the website).
When we take into account that import() essentially creates files (i.e. assets) that will be loaded at a later time, it makes sense to sometimes want to preload such resources with priority.

We will see how to actually instruct webpack to apply this resource hint in a browser context, as well as other underpinnings of preloading in the following sections.

As a side note (and as you might have guessed probably), the import() function can also be used to achieve lazy loading.

Preloading chunks

As hinted at earlier, preloading is one of the resource hints available.

Applying this to webpack, this means we can preload async chunks (e.g. other JavaScript files) as early as possible. What preloading means is that the file (i.e. the chunk)
will be fetched over the network, but not executed yet. Instead of being executed, it will be stored in the browser's cache (we will henceforth assume that the file in question is cacheable) until the line that calls
import() is be reached.

We can tell webpack to preload an async chunk by using the webpackPreload magic comment in the import() function.
So, if we have this line in a file named a.js:

// a.js
import(/* webpackPreload: true */ 'a1.js')

We would expect the file a1.js to be preloaded. However, as we will see, this will only happen under certain conditions. For instance,
if a.js is part of an entry chunk (e.g. for instance, as index.js is here), then a1.js can't be preloaded. But, if we had something like this

// index.js - entry file, mentioned in webpack configuration.
import('a.js')

// a.js.
import(/* webpackPreload: true */ 'a1.js')

Then, when the dynamic import for a.js takes place, the chunk that corresponds to a1.js will be preloaded.

We will clarify these facts later on in the article. For now, let's get familiar with the demo application which will help us gain a better understanding of this topic:

├── a1.js
├── a2.js
├── a.js
├── b.js
├── index.js
└── webpack.config.js

The only relevant information with respect to the wepback configuration is that the index.js file is the value of the entry option.

The files - or, to use webpack's parlance, modules - are not containing any logic more complex that a few simple dynamic imports. This diagram describes how these modules are connected:

A few clarifications regarding the diagram above:

the green bounding rectangles represent async chunks; these chunks are created because of the use of the import() function
the gray bounding rectangle indicates an entry chunk, i.e. a chunk that will be invariably by the browser
the yellow contained rectangles represent modules that are part of certain chunks
a.js dynamically imports a1.js with import(/* webpackChunkName: 'a1', webpackPreload: true */ "./a1"); which means a1.js will be preloaded
all dynamic imports are conditional, e.g. the import() function is called, for instance, on a button click; this is relevant because the dynamic chunks are not be loaded immediately

Upon page load, only the index chunk will be loaded.

What would happen if the line that calls import('b.js') is reached?
Since b is an async chunk, what happens is the b.js file will be fetched over the network (e.g. through an HTTP request) and then it will be immediately executed.
This means there is no preloading involved and, as a result, the user might need to wait for the network request to complete, as well for parsing and executing the file.
However, this does not mean the preload resource hint should be overused - there could be downsides to it, too, such as cache pollution or redundantly used bandwidth.
So, we should always choose our tools wisely!

When importing a.js, because it has instructed webpack to preload a1.js, the a1 chunk will also be fetched over the network, but not executed. Instead, it will be stored in the browser's cache:

The a1.js file will be executed only when the line in a.js that dynamically imports a1.js is reached. Then, instead of making an HTTP request, the a1.js file will be retrieved right away from the cache and executed
This it the beauty of preloading assets, in general.

In this small example, we only focused on preloading JavaScript files, but the concept should apply for other resources too, such as fonts, images, videos, etc.

I walked through this example also in this YouTube video.

In the next section, we will take a look at a slightly more complicated example of preloading, an example I have named, perhaps lacking inspiration, nested preloading.

Nested preloading

Here is an interesting and practical question worth investigating: What happens if a preloaded chunk also preloads other chunks?

Getting back to our diagram, there is just a simple addition: a1.js dynamically imports a2.js with the webpackPreload: true magic comment:

When will a2.js's chunk be fetched? Will it be fetched when the a.js file is executed? Or maybe not when a.js is executed?

When this question came to mind, I immediately became very intrigued. So intrigued that I had to make a video about it where I explore my hypothesis and final result.

Let's take a step-by-step approach to the questions above.
Firstly and invariably, index.js will be fetched and executed in the browser. This is because index.js is an entry file (which makes the index chunk an entry chunk).
Then, when a.js is imported at a later time, because it preloads a1.js, the latter will only be fetched by the browser, but not executed. The file will be executed when the line in a.js that imports a1.js is reached.

However, what about the fact that a1.js (the module that has just been fetched by the browser) also preloads a2.js? Will a2.js be fetched now, too?

The answer is no. The explanation is straightforward: a2.js can't be fetched because this only happens when a1.js is executed by the browser, i.e. when it is actually required.
But, at this point, a1.js has only been fetched and not yet required. So, since a1.js is not executed -> a2.js can't be fetched.

What we have explored in this section was indeed not very complicated, but, in the next one, we will address a question that requires some under-the-hood knowledge of webpack. Let's see what that is about!

Not all chunks can be preloaded

Although it may sound counter-intuitive, it is true - not all async chunks can be preloaded.

Coming back to our demo application, let's try preloading a.js from index.js:

import(/* webpackChunkName: 'a', webpackPreload: true */ "./a.js")

If we reload the browser, we will see no HTTP request for the a.js in the network tab, which means the file has not been preloaded.

But, why is that? Why can't a.js be preloaded?

Let's bring back the diagram, with a small modification included:

One thing that stands out from this diagram is that an entry chunk dynamically imports an async chunk.
And this is, actually, the reason as to why the a chunk can't be preloaded - its parent chunk is an entry chunk.

Now, another question emerges - why can't an entry chunk preload an async chunk?
After some research, I have found this comment on an issue:

When using preload you must use the script (call import()) within a few seconds [...] So only use preload when the imported module is mandatory for correct function of the app and the app is useless without it.

To my understanding, if a chunk is critical to an entry chunk (this is what is being indicated by using the preload resource hint), then the async chunk can be statically imported.
It it different if an async chunk needs has other async chunks that are critical for the functionality of the former, because one can't know for sure when the async chunk is actually loaded/needed.

If you are curious to read the source code that is responsible for all of this magic, you can start from here.
I have also created a repo where you can find debugging instructions for exploring webpack via the debugger.

Conclusion

In this article, we have been reminded, first of all, of what preloading means - it is a browser resource hint that allows us to fetch resources with priority, as soon as possible.

Then, we have learned about what preloading really means in the context of webpack, the essential role of the import() function, what entry chunks are, what async chunks are and how the ways these are connected influence the preloading behaviour.

Thank you for reading!

Coder Legion - Recent posts tagged webpack

Cannot find module '@babel/core'

Table of Contents:

What is Babel? #

What is @babel/core module? #

The Solutions #

Solution 1: Install @babel/core package #

Solution 2: Install @babel/core latest version #

Solution 3: Check missing or outdated Webpack configuration #

Solution 4: Check .babelrc configuration file #

The Conclusion #

The References #

Syntaxerror: unexpected token 'export'

Table of Contents:

Explanation #

What is NodeJS?

How to import and export modules in NodeJS? #

The Solution #

Solution one

Solution two

The Conclusion

Preloading chunks with webpack

Prerequisites

What is a chunk?

The `import()` function

Preloading chunks

Nested preloading

Not all chunks can be preloaded

Conclusion

Coder Legion - Recent posts tagged webpack

Cannot find module '@babel/core'

Table of Contents:

What is Babel? #

What is @babel/core module? #

The Solutions #

Solution 1: Install @babel/core package #

Solution 2: Install @babel/core latest version #

Solution 3: Check missing or outdated Webpack configuration #

Solution 4: Check .babelrc configuration file #

The Conclusion #

The References #

Syntaxerror: unexpected token 'export'

Table of Contents:

Explanation #

What is NodeJS?

How to import and export modules in NodeJS? #

The Solution #

Solution one

Solution two

The Conclusion

Preloading chunks with webpack

Prerequisites

What is a chunk?

The import() function

Preloading chunks

Nested preloading

Not all chunks can be preloaded

Conclusion

The `import()` function