Webpack can't resolve data:text import - javascript

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.

Related

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')}/>

extract text plugin - Module build failed: ModuleNotFoundError: Module not found:

I'm using the following module in my webpack config -
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
modules: true,
localIdentName: "[name]-[local]-[hash:base64:5]"
}
},
{
loader: "postcss-loader"
}
]
})
}
I'm getting an error Uncaught Error: Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve 'shared/variables
It looks like my css can't import files. Any idea what I'm doing wrong?
I'm using webpack 3.5.5 and extract text plugin 3.0.0

require vm2 using electron and webpack

I encounter an error when I try to import the vm2 module inside the Electron renderer process using Webpack.
import fs from 'fs'
console.log('ok')
const { NodeVM } = require('vm2')
console.log('ko')
Here is the error, displayed by Webpack:
WARNING in ./~/vm2/lib/main.js
Critical dependencies:
180:26-33 require function is used in a way in which dependencies cannot be statically extracted
335:15-22 require function is used in a way in which dependencies cannot be statically extracted
367:26-33 require function is used in a way in which dependencies cannot be statically extracted
# ./~/vm2/lib/main.js 180:26-33 335:15-22 367:26-33
WARNING in ./~/vm2/lib/sandbox.js
Module parse failed: /Users/guillaume/Voyager/Voyager/node_modules/vm2/lib/sandbox.js 'return' outside of function (20:0)
You may need an appropriate loader to handle this file type.
SyntaxError: 'return' outside of function (20:0)
at Parser.pp.raise (/Users/guillaume/Voyager/Voyager/node_modules/acorn/dist/acorn.js:923:13)
at Parser.pp.parseReturnStatement (/Users/guillaume/Voyager/Voyager/node_modules/acorn/dist/acorn.js:1864:74)
I tried excluding the node_modules folder from my webpack config:
module: {
loaders: [{
test: /\.js$/,
include: PATHS.app,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: [ 'es2015', 'react', 'stage-1' ],
plugins: [ 'add-module-exports', 'transform-decorators-legacy' ],
},
}, {
test: /\.scss$/,
loaders: [ 'style', 'css', 'postcss-loader?parser=postcss-scss' ],
include: PATHS.app,
}],
}
But it does not seem to work. the first console.log appears, not the second one.
I added the target as well using webpack-target-electron-renderer. Same..
Finally, when I add externals: [/vm2/], Webpack does not throw any error, but the renderer console says Uncaught ReferenceError: vm2 is not defined
I would guess it has something to do with the fact that vm2 is using require dynamically and webpack doesn't like that (because importing fs is working fine)
Where does that problem come from and how can I fix it?

Webpack throws syntax error for JSX

When I attempted to use webpack to compile my react jsx code, I received the following error:
ERROR in ./client/index.js
Module parse failed: C:\Users\Gum-Joe\Documents\Projects\bedel/client\index.js Unexpected token (6:11)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:11)
at Parser.pp.raise (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:920:13)
at Parser.pp.unexpected (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:1483:8)
at Parser.pp.parseExprAtom (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:330:12)
at Parser.pp.parseExprSubscripts (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:225:19)
at Parser.pp.parseMaybeUnary (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:204:17)
at Parser.pp.parseExprOps (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:151:19)
at Parser.pp.parseMaybeConditional (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:133:19)
at Parser.pp.parseMaybeAssign (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:110:19)
at Parser.pp.parseExpression (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:86:19)
at Parser.pp.parseReturnStatement (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:1854:26)
at Parser.pp.parseStatement (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:1719:19)
at Parser.pp.parseBlock (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:1991:21)
at Parser.pp.parseFunctionBody (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:607:22)
at Parser.pp.parseMethod (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:576:8)
at Parser.pp.parseClassMethod (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:2137:23)
at Parser.pp.parseClass (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:2122:10)
# ./client/index.js 1:0-20
.babelrc:
{
"presets": ["es2015", "react"]
}
webpack.config.js:
// Webpack config
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// Use client as our root
context: __dirname + "/client",
// Entry file
entry: "./index.js",
// Resolve
resolve: {
extensions: ['', '.js', '.jsx']
},
// Output to /build
output: {
path: path.join(__dirname, "build", "js"),
filename: "bundle.js"
},
loaders: [
{ test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" }
],
// Plugins
plugins: [
// HTML
new HtmlWebpackPlugin({
title: 'Bedel',
filename: path.join(__dirname, 'views', 'index.ejs'),
template: path.join(__dirname, 'client', 'templates', 'index.ejs')
})
]
};
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render () {
return <p> Hello React</p>;
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
I have installed all the babel presets required, as well as babel-core.
I have looked at the following answers already:
babel-loader jsx SyntaxError: Unexpected token
React, babel, webpack not parsing jsx code
Edit: After commenting out my jsx syntax, the outputting bundle.js does not appear to have been transformed by babel (i.e. I can see ES6 code in it)
Edit: Sorry for the inconvenience, but app.jsx was a solution that I tried that involved putting the logic that should be in index.js into a separate file.
Edit: Here is a list of the solutions I tried that did not work:
Copy .babelrc to client/.babelrc
Change test to test for .js instead of .js
Separate app logic into separate file (app.js)
Put presets to use in webpack config
Also, I have pushed my code to my GitHub repo (https://github.com/Gum-Joe/bedel). Feel free to have a look at it.
You configured the loader to only pass .jsx files through Babel:
test: /\.jsx$/
However, your file has the extension .js. Either rename the file or update the test expression to /\.jsx?$/.
In addition to updating the test, you need to rename .babel.rc to .babelrc (no . before rc). Otherwise Babel thinks that there is no configuration file and won't load any presets.
The loaders property must exist within the module property. Webpack Loaders
module.exports = {
// ...
// Output to /build
output: {
path: path.join(__dirname, "build", "js"),
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" }
]
},
//...
};
You need to use react-preset with babel, like here:
loaders: [{
test: /\.(js|jsx)$/,
loader: 'babel',
query: {
presets: [
'es2015',
'react'
]
}
}]
I'm having this issue as well, and if you're using Windows and Node 6.x, the only workaround I've found for now seems to be to use Node 4 LTS or 5 instead. Without knowing the root cause, the problem seems to stem from some combination of using JSX, Webpack, Babel, Acorn JS, Node 6, and Windows.
https://github.com/coryhouse/pluralsight-redux-starter/issues/2
https://github.com/danmartinez101/babel-preset-react-hmre/issues/32
Can you try wrapping the entire element in brackets "()"?
return (<p>...</p>)

How to include oasis.js from Bower in a webpack build?

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?

Categories