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.
here is my code:
{
test: /\.ttf$/,
use: [
{
loader: 'ttf-loader',
options: {
name: './font/[hash].[ext]',
},
},
]
}
and tried with,
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader',
],
},
]
},
still gives this problem:
ERROR in ./src/client/assets/fonts/blacky.TTF 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
# ./src/client/pages/Home/Homepage.module.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/client/pages/Home/Homepage.module.scss) 4:36-76
# ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/client/pages/Home/Homepage.module.scss
I am aiming to convert my react app into an ssr app for firebase.
entire config file::
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins:
[
new MiniCssExtractPlugin({
filename:"[name].css",
chunkFilename:"[id].css"}),
],
entry: {
"app": "./src/client/index.js",
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
exclude: /node_modules/,
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader: 'url-loader',
options: {
limit: 10000
}
},
{
test: /\.ttf$/,
use: [
{
loader: 'ttf-loader',
options: {
name: './font/[hash].[ext]',
},
},
]
}
]
},
output: {
path: __dirname+"/functions/Views/public",
filename: "bundle.js",
},
}
(other problem that wasnt mentioned but still persits/ a lot more of the cmd error log)
r{color:#121416!important}.text-body{color:#212529!important}.text-muted{color:#6c757d!important}.text-black-50{color:rgba(0,0,0,.5)!important}.text-white-50{color:rgba(255,255,255,.5)!important}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.text-decoration-none{text-decoration:none!important}.text-break{word-wrap:break-word!important}.text-reset{color:inherit!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}#media print{*,::after,::before{text-shadow:none!important;box-shadow:none!important}a:not(.btn){text-decoration:underline}abbr[title]::after{content:" (" attr(title) ")"}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #adb5bd;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}#page{size:a3}body{min-width:992px!important}.container{min-width:992px!important}.navbar{display:none}.badge{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #dee2e6!important}.table-dark{color:inherit}.table-dark tbody+tbody,.table-dark td,.table-dark th,.table-dark thead th{border-color:#dee2e6}.table .thead-dark th{color:inherit;border-color:#dee2e6}}
| /*# sourceMappingURL=bootstrap.min.css.map */
# ./src/client/pages/Header/navbar.js 15:0-46
# ./src/client/pages/Header/Header.js
# ./src/client/pages/about.js
# ./src/client/App.js
# ./src/client/index.js
Child mini-css-extract-plugin node_modules/style-loader/dist/cjs.js!node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!src/client/pages/Home/Homepage.module.scss:
Entrypoint mini-css-extract-plugin = *
[0] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/client/pages/Home/Homepage.module.scss 1.04 KiB {0} [built]
[2] ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/client/pages/Home/Homepage.module.scss 404 bytes {0} [built]
[5] ./src/client/assets/fonts/blacky.TTF 284 bytes {0} [built] [failed] [1 error]
+ 3 hidden modules
ERROR in ./src/client/assets/fonts/blacky.TTF 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
# ./src/client/pages/Home/Homepage.module.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/client/pages/Home/Homepage.module.scss) 4:36-76
# ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/client/pages/Home/Homepage.module.scss
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! AllianceCareLTD#0.2.0 webpack: `webpack-cli --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the AllianceCareLTD#0.2.0 webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\User\AppData\Roaming\npm-cache\_logs\2020-10-15T13_04_02_184Z-debug.log
A bit late but still worth to mention for anybody facing this issue. I was also spending some time with this topic and trying out many different things. And as I see all these inspired discussions in different forums, I can imagine that many new programmers are struggling with this topic. In the end I found a solution which worked for me. I hope it works for you, too.
FIRST
I use an outputPath for my fonts. It'll duplicate the font files, and place them into whatever directory in the "dist" folder depending on what we specify using outputPath - e.g. a path called "fonts". This is required for our fonts to be referenced correctly within your style file; for example scss or .js if you use styled-components and create a 'createGlobalStyle'. It also defines the relative paths for the output content which will be prefixed to every url request. In my case I use "fonts/". Example: If I implement font family yxz.woff, the path for the user in the frontend will be localhost:3000/fonts/yxz.woff in my case. It has nothing to do with my real folder structure in my project (see next paragraph).
// Webpack setting
{
test: /\.(woff|woff2|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "fonts/",
},
},
],
},
The font yxz.woff is placed directly in my public folder in the root directory. Any other placement can also be used (e.g. src/styles/fonts/yxz.woff) and works in my case. Figure it out for your project.
In the next step I define and load the yxz font with a .js file with styled-components. But scss works also in my case. Important here! You have to import every source (woff, woff2, ttf) separately and give it an unique name. See my following example
import { createGlobalStyle } from "styled-components";
import yxzWoff2 from "../../../public/yxz.woff2";
import yxzWoff from "../../../public/yxz.woff";
export default createGlobalStyle`
#font-face {
font-family: 'yxz';
src: local('yxzWoff2'),
url("fonts/yxz.woff2") format('woff2');
src: local('yxzWoff'),
url("fonts/yxz.woff") format('woff');
font-weight: normal;
font-style: normal;
font-display: auto;
}
`;
As you can see, I use the same paths as defined with webpack via outputPath. Still it is directly placed in the public folder. You can of course apply the above principle for ttf, too. However, in my case I mainly use woff and woff2.
I meanwhile have a quite large collection of fonts in the fonts folder structure in my project and it works. I hope this solves your issue and saves you and others here time.
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'].
I'm using webpack to build my project and I'm having trouble getting it to include oasis.js, specifically https://raw.githubusercontent.com/tildeio/oasis.js/4c657d15a89c532382d2d174783f5c3660111765/dist/oasis.js as pulled in by Bower since there isn't an npm module available for it.
My webpack configuration looks like:
'use strict';
const BowerWebpackPlugin = require('bower-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app/index.js',
output: {
path: 'www',
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.html$/, loader: 'html-loader' },
{ test: /\.svg$/, loader: 'file-loader' }
]
},
plugins: [
new BowerWebpackPlugin({ excludes: [/oasis\.amd\.js$/] }),
new HtmlWebpackPlugin()
]
};
and my ./app/index.js which pulls in Oasis looks like:
'use strict';
var oasis = require('oasis.js');
When I run webpack -d, I get error a series of error messages like:
ERROR in ./bower_components/oasis.js/dist/oasis.js
Module not found: Error: Cannot resolve module 'oasis/xhr' in /Users/jeffreycharles/projects/dev-container/bower_components/oasis.js/dist
# ./bower_components/oasis.js/dist/oasis.js 2983:0-3092:4 3680:0-3780:4
ERROR in ./bower_components/oasis.js/dist/oasis.js
Module not found: Error: Cannot resolve module 'oasis/connect' in /Users/jeffreycharles/projects/dev-container/bower_components/oasis.js/dist
# ./bower_components/oasis.js/dist/oasis.js 2983:0-3092:4 3093:0-3189:4
ERROR in ./bower_components/oasis.js/dist/oasis.js
Module not found: Error: Cannot resolve module 'oasis/logger' in /Users/jeffreycharles/projects/dev-container/bower_components/oasis.js/dist
# ./bower_components/oasis.js/dist/oasis.js 2983:0-3092:4 3093:0-3189:4 3217:0-3404:4 3453:0-3679:4 3680:0-3780:4
ERROR in ./bower_components/oasis.js/dist/oasis.js
Module not found: Error: Cannot resolve module 'oasis/version' in /Users/jeffreycharles/projects/dev-container/bower_components/oasis.js/dist
# ./bower_components/oasis.js/dist/oasis.js 2983:0-3092:4
which I find odd since I can see define("oasis/xhr", on line 4961 in the oasis file and the other modules that webpack is saying it can't resolve are all in that same file I linked to.
I've also tried setting noParse and using the script-loader to load Oasis but then it complains about RSVP not being defined. This isn't an issue when I load Oasis using a script tag in my HTML (in fact it all works properly when I do that).
How do I get Webpack to build and include Oasis.js in my project?
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.