We Keep Coding

Webpack can't resolve data:text import

My app uses a third party library that has the syntax:
const module = await import(`data:text/javascript;charset=utf-8,${content}`);
While building through Webpack I am getting the following 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 tried using babel-loader in my Webpack config:
module: {
rules: [
{
test: /\.m?js$/,
include: [
path.resolve(workingDirectory, 'node_modules/#web')
],
use: 'babel-loader'
}
]
}
I need help figuring out what loader would be able to interpret the expression.

If running webpack programmatically he doesn't find module

I want to use webpack-api at my electron app for build external web project.
I decide using webpack API in my app, but webpack can't found the babel-loader.
I created simple repository to reproduce the error: repository
Abstract presentation of the project (A - electron app, B - web project for build)
Error msg:
main.js:1 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'D:\User\B\node_modules\babel-loader\lib\index.js'
at eval (webpack:///./node_modules/loader-runner/lib_lazy_namespace_object?:5)
at eval (main.js:1)
Base structure of both project:
Project A:
- main.js
- node_modules/
- webpack.config.js
Project B:
- main.js
- node_modules/
- webpack.config.js
Every project is independent and has all tool for development(like webpack)
My webpack config in project A for run webpack (if I using '/' in path I get API Schema error at webpack):
module.exports = {
mode: "development",
target: "web",
entry: "D:\\User\\B\\src\\main.js",
context: "D:\\User\\B\\",
output: {
path: "D:\\A",
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(js)$/i,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
resolve: {
modules: [
'D:\\User\\B\\node_modules', //the same error if remove this line
],
},
stats: {
errorDetails: true
},
}
Run webpack:
const webpack = require('webpack');
const config = require('./webpack.config');
const compiler = webpack(config);
compiler.run((err, stats) => {
//output errors...
});
Important:
If to try build project B using webpack cli (through npm), no
errors.
Project A based on Electron.
Using library version on both project: babel-loader^8.1.0, #babel/core^7.9.0, webpack^4.42.1, electron^8.2.1(electron only at A project)
Bundle file is created
Bundle js file is using in HTML file

Looks like this server already has other webpack wich running in watch mode and constanlty removing packages. Try to reload the server

Build Error on importing images with react

I import images like this below:
import StepIcon from '../../public/images/icon_step.png'
and it works with no problem but when I run build I get the error below, guess I gotta fix webpack setting but I have no idea. how can i solve this problem?
Error
error in ./public/images/icon_step.png
Module build failed (from ./node_modules/file-loader/dist/cjs.js):
TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be one of type string, Buffer, TypedArray, or DataView. Received type function
at Hash.update (internal/crypto/hash.js:64:11)
at getHashDigest (/mnt/c/Users/wbvco/Desktop/Project Baby/styled-react-boilerplate/node_modules/loader-utils/lib/getHashDigest.js:48:8)
at url.replace (/mnt/c/Users/wbvco/Desktop/Project Baby/styled-react-boilerplate/node_modules/loader-utils/lib/interpolateName.js:96:11)
at String.replace (<anonymous>)
at Object.interpolateName (/mnt/c/Users/wbvco/Desktop/Project Baby/styled-react-boilerplate/node_modules/loader-utils/lib/interpolateName.js:93:8)
at Object.loader (/mnt/c/Users/wbvco/Desktop/Project Baby/styled-react-boilerplate/node_modules/file-loader/dist/index.js:27:36)
# ./src/components/signupstep.js 35:0-57 511:11-19
# ./src/pages/signup.js
# ./src/app.js
# ./src/index.js
# multi react-hot-loader/patch ./src/index.js
webpack Setting
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
}]
},

I think it's due to image relative path issue, can you try the below methods.
Simple method you should follow, see here for more info.
By using webpack
Please update the webpack like below
module: {
rules: [
{
test: /\.(jpe?g|gif|png|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 10000
}
}
]
}
],
},
Then you can import the images from public folder to react component
import image from '../../public/assets/images/logo.png'
<img src={image}/>
By using require method
Also you can try this by install url-loader and file-loader
npm install url-loader file-loader --save-dev
Then update the webpack config as
module: {
loaders: [
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
]
}
and finally
<img src={require('./PATH_TO_IMAGE/IMAGE.png')}/>

Module not found: Error: Cannot resolve module

I have created a simple project which uses babel and webpack. I have checked it in here
https://github.com/abhitechdojo/MovieLensReact.git
In my root folder I have two files script1.js and script2.js. My webpack.config.js looks like
module.exports = {
entry : {
main: [
'script1.js', 'script2.js'
]
},
output : {
filename: 'public/main.js'
},
"module" : {
"loaders" : [
{
"test": /\.jsx?/,
"exclude": /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
but when I run webpack. it cannot find any javascript files
ERROR in multi main
Module not found: Error: Cannot resolve module 'script1.js' in /Users/abhishek.srivastava/MyProjects/MovieLensReact
# multi main
ERROR in multi main
Module not found: Error: Cannot resolve module 'script2.js' in /Users/abhishek.srivastava/MyProjects/MovieLensReact
# multi main

In nodejs, when you call require("script1.js") it won't search in the current folder.
You have to use require("./script2.js"), to specify that the file is in the current folder.
In your case, modify the config file with main: ['./script1.js', './script2.js'].

Webpack: node_modules/css/index.js didn't return a function

I'm trying out webpack for the first time and used this tutorial to get started and include react.js.
After finishing the steps and installing the style and css module I keep getting an error that the css module didn't return a function.
This is my index.jsx:
/** #jsx React.DOM */
'use strict';
require('../css/normalize.css');
var React = require('react');
var Hello = require('./Test/Hello');
React.render(<Hello />, document.getElementById('content'));
And my webpack config file:
module.exports = {
entry: './ui/src/index.jsx',
output: {
path: __dirname + '/build-ui',
filename: 'app.js', //this is the default name, so you can skip it
//at this directory our bundle file will be available
//make sure port 8090 is used when launching webpack-dev-server
publicPath: 'http://localhost:8090/assets'
},
module: {
loaders: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /\.jsx$/,
loader: 'jsx-loader?insertPragma=React.DOM&harmony'
},
{
test: /\.css$/,
loader: "style!css"
},
{
test: /\.scss$/,
loader: "style!css!sass"
}
]
},
externals: {
//don't bundle the 'react' npm package with our bundle.js
//but get it from a global 'React' variable
'react': 'React'
},
resolve: {
extensions: ['', '.js', '.jsx']
}
};
When webpack tries to bundle the project it always states the following error:
ERROR in Loader /Users/Johannes/Documents/Development/holmes/node_modules/css/index.js didn't return a function
# ./ui/src/index.jsx 5:0-31
I don't know what to do about that. Has anyone encountered that issue? And how can I solve it?
EDIT: My directory looks as follows:
holmes/
ui/
css/
normalize.css
src/
Test/
Hello.jsx
index.jsx
index.html
package.json
webpack.config.js

This error is caused by a css module inside node_modules. Since you've specified the css-loader in your config, webpack tries to lookup that loader inside node_modules and finds another module called css which doesn't look like a loader (hence the error message).
To avoid confusion you should simply add the -loader postfix to each loader. Omitting the -loader postfix is just a convenience feature by webpack, but unfortunately it's the culprit of that error in your case.
loaders: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /\.jsx$/,
loader: 'jsx-loader?insertPragma=React.DOM&harmony'
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
loader: "style-loader!css-loader!sass-loader"
}
Update: Starting with webpack 2, you can't omit the -loader postfix anymore. We decided to do this to prevent errors like this.

I had a similar issue with react-flexbox-grid. In my case, the solution was installing css-loader and style-loader npm modules:
npm install css-loader style-loader --save-dev

I also came across a similar issue using node-noop.
Fortunately, using null as a replacement worked when I added enzyme and react-addons-test-utils to a project.