An error in Webpack prevents it from resolving the data:text import

I built an app that relies on a third-party library with the following syntax:

const module = await import(`data:text/javascript;charset=utf-8,${content}`);

While using Webpack to build the app, I encountered this error:

ERROR in ./node_modules/@web/test-runner-commands/browser/commands.mjs
Module not found: Error: Can't resolve 'data:text' in 'C:\path_to_project\node_modules\@web\test-runner-commands\browser'

I attempted to resolve the issue by adding babel-loader to my Webpack configuration:

module: {
    rules: [
        {
            test: /\.m?js$/,
            include: [
                path.resolve(workingDirectory, 'node_modules/@web')
            ],
            use: 'babel-loader'
        }
    ]
}

I'm seeking assistance in determining the appropriate loader to interpret the expression.

javascripttypescriptwebpackcompilation

Answer №1

After a couple of years, I encountered a similar issue with an error message that proved difficult to troubleshoot.

My situation also involved the babel-loader.

  • Disclaimer: In my case, it was a "WARNING" rather than an "ERROR" with a different library, but the core issue seemed to be the same:

WARNING in ./node_modules/kotlin-playground/dist/playground.min.js 2:478654-478700 Module not found: Error: Can't resolve 'data:text' in 'path-to-my-project/node_modules/kotlin-playground/dist'

Below is a snippet from my webpack configuration that resolved the Warning:

module.exports = {
[...]
resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
    fallback: {
        "data:text": false
    }
},
module: {
    [...]
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there someone who can assist me in transferring data from an Axios JSON response to plot points on a line chart using Chart js?

I'm currently in the process of developing a React application that includes a line chart showcasing the timeline of data recordings starting from a specific point in time up to the present day. To achieve this, I am leveraging the Chart.js JavaScript ...

javascriptjsonreactjsaxios

Is it possible to utilize a designated alias for an imported module when utilizing dot notation for exported names?

In a React application, I encountered an issue with imports and exports. I have a file where I import modules like this: import * as cArrayList from './ClassArrayList' import * as mCalc1 from './moduleCalc1' And then export them like t ...

javascriptreactjsmodule

Failure to Present Outcome on Screen

Seeking assistance! I attempted to create a mini loan eligibility web app using JavaScript, but encountered an issue where the displayed result did not match the expected outcome upon clicking the eligibility button. Here is the HTML and JavaScript Code I ...

javascripthtmlcssbootstrap-4

Using Jquery to activate a vertical scrolling bar

Within my div, I have a tree view that extends beyond the size of the div, causing a vertical scroll bar to appear on the right side. When users click a button outside of the div, I want the page to scroll to a specific item within the div (which I know th ...

javascriptjquery

Identifying edited files within the node_modules directory: A comprehensive guide

While working with the serverless framework, I installed it using npm. During my debugging process, I made some modifications by adding console.log statements to different files within the node_modules folder. Unfortunately, I can't recall which speci ...

javascriptnpmserverless-frameworkconsole.log

Can SVN hooks be incorporated into NPM in a way that is comparable to git hooks?

I want to incorporate an npm script that performs linting and testing before executing an svn commit. If there are any failures during the linting or tests, I want the commit process to halt, similar to a git commit hook. Does anyone have any recommendat ...

javascriptnode.jssvnnpm

Guide to Helping Users Customize JavaScript and CSS Files before Exporting as Embed Code

I have a vision to create a unique platform where users have the ability to log in to a customized dashboard, tailor their preferences, and then generate an embeddable code for age verification pop-ups on their websites. To kickstart this project, I'v ...

javascripthtmlcss

Sort columns in a MUI datatable

I am facing an issue with sorting in a column that represents an object. Although I can display the desired value, the sorting functionality does not seem to work for that particular column. Here is an example to provide better clarity: const [data, set ...

javascriptreactjstypescriptmaterial-uimui-datatable

What makes `Why await` stand out from all the other broken promises?

I am puzzled by the behavior of promises in Node.js and I have a question about it. Let's take a look at the following function as an example: async function proc(): Promise<void> { const resolve = new Promise((resolve) => setTimeout(resolv ...

javascriptnode.jstypescriptasync-awaitpromise

Having trouble fetching configuration values with Vue.js

console.log(process.env.test); displays "undefined" in the console. In the dev.env.js file, I have the following configuration. Do you see anything that I might have overlooked? 'use strict' const merge = require('webpack-merge') con ...

javascriptvue.js

Modify Javascript to exclusively focus on SVG paths

I successfully created an SVG animation using JSFiddle, but when I transferred the SVG to Shopify, the Javascript that animates the path stopped working. It seems like the issue is with the JavaScript targeting all paths on the page instead of just the sp ...

javascriptsvg

Ensure that Bootstrap 5.2 tooltips do not close when the cursor returns to the triggering element

TLDR: The tooltip flickers when moving the cursor from the tooltip back to the triggering element. I want the tooltips to open on hover and be clickable. I found a solution that works on Stack Overflow here. When you hover over an element, a tooltip appe ...

javascripttooltipbootstrap-5

Building custom directives on AngularJS pages without a specified ng-app module

On some of my basic pages, I don't need to specify a particular application module in the ng-app attribute. However, these pages do utilize some custom directives that I have created. To keep things organized, I have placed all of my directives withi ...

javascriptangularjsdependency-injectionangularjs-directive

Having trouble importing from the src folder in Expo React

I am currently using expo-cli. When I import a module from the 'src' folder (which I created), it works perfectly fine when opened in a web browser, but encounters an error when opened on an Android device. I have tried using absolute paths and ...

javascriptandroidreactjsreact-nativeexpo

Leveraging the $dirty property in AngularJS to determine if any changes have been made to a form

Recently, I've been attempting to determine if my form is being edited by monitoring certain fields. I've come across $dirty as a potential solution for this task, but unfortunately, I'm struggling to identify what exactly I'm overlooki ...

javascriptangularjsformsform-editing

Steps for specifying the required type of an Object literal in Typescript

Let's analyze a straightforward code snippet interface Foo{ bar:string; idx:number; } const test1:Foo={bar:'name'}; // this is highly recommended as it includes all required fields const test2={bar:'name'} as Foo; // this is ...

typescript

Can the key in a WeakMap be altered when setting an item within it?

When working with JavaScript, is it possible for setting an item in a WeakMap to change the object used as the key? I'm curious about this because if I were to create a WeakMap, my approach might involve using a Symbol on the key and then utilizing t ...

javascript

Having difficulty transitioning Express Controller logic to a Service Class

Within the User Controller, there is a function that processes a GET request to /user/ and retrieves two JSON objects randomly from a MongoDB collection. Here is how the response looks like inside the controller: [{ "name": "User 1" ...

javascriptnode.jsexpress

Addressing Memory Leakage Issues in a Basic Node.js Application

Out of sheer curiosity and as an experiment with NodeJS, I decided to write a basic program to test the Collatz Conjecture for an incredibly high number of integers. While this concept should work fine in theory, my simple code is unexpectedly facing a mem ...

javascriptnode.jsmemory-leaks

Struggling with loading react storybook

I am having trouble getting my storybook app to start. It is stuck in a loading state with no errors showing in the console. Can anyone help me figure out what I am doing wrong? Check out the screenshot here storybook/main.js const path = require(' ...

javascriptreactjsstorybook