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
Related
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.
I am trying to include multiple paths into Webpack module rules. Initially it gave me error for ./src/bootstrap.js, So I included the same in rules, now it gives me error for ./src/App.js. When I try to include it in same way, it breaks badly and gives error for many other files.
Can some please tell me how can I include /node_modules/mfe-react/index.js and all files in src folder ?
module.exports = {
module: {
rules: [
{
test: /\.*?js$/,
exclude: /node_modules/,
include: ['/node_modules/mfe-react/index.js',
path(__dirname, "..", "src", "bootstrap.js")
],
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-react", "#babel/preset-env"],
plugins: ["#babel/plugin-transform-runtime"],
},
},
},
],
},
Error:
ERROR in ./src/App.js 13:12
Module parse failed: Unexpected token (13:12)
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
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')}/>
In my project I use gulp to run task, with webpack to compile js modules, which uses babel loader to transform react and ES6. Now I want to add relay transformation. I went by this instructions: https://facebook.github.io/relay/docs/guides-babel-plugin.html#advanced-usage but they doesnt' seem right.
I had to do some little reverse engineering and i produced following gulp task:
gulp.task('js', () => {
// Compile babel (react)
gulp.src(paths.js)
.pipe(er(webpack({
module: {
plugins: [
new require('webpack/lib/ProvidePlugin')({
React: "React",
Relay: 'Relay'
})
],
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-0', 'react'],
plugins: [require('babel-relay-plugin')(require(paths.db_schema).data)]
}
}
]
},
output: {
filename: paths.js_output
}
})))
.pipe(gulp.dest(paths.dist));
});
Now I get such error for every processed file:
ERROR in (filename)
Module build failed: TypeError: Falsy value found in plugins
at d:\Node\organize.me\node_modules\babel-core\lib\transformation\file\options\option-manager.js:187:15
at Array.map (native)
at Function.normalisePlugins (d:\Node\organize.me\node_modules\babel-core\lib\transformation\file\options\option-manager.js:182:20)
at OptionManager.mergeOptions (d:\Node\organize.me\node_modules\babel-core\lib\transformation\file\options\option-manager.js:298:36)
at OptionManager.init (d:\Node\organize.me\node_modules\babel-core\lib\transformation\file\options\option-manager.js:481:10)
at File.initOptions (d:\Node\organize.me\node_modules\babel-core\lib\transformation\file\index.js:211:75)
at new File (d:\Node\organize.me\node_modules\babel-core\lib\transformation\file\index.js:129:22)
at Pipeline.transform (d:\Node\organize.me\node_modules\babel-core\lib\transformation\pipeline.js:48:16)
at transpile (d:\Node\organize.me\node_modules\babel-loader\index.js:14:22)
at Object.module.exports (d:\Node\organize.me\node_modules\babel-loader\index.js:88:12)
# multi main
I did wome more of reverse engineering and i found out that array in plugins is just [ null ] when i replace that line with
plugins: [new (require('babel-relay-plugin')(require(paths.db_schema).data))()]
I get error
TypeError: Cannot read property 'Plugin' of undefined
So how can i make gulp, webpack, babel and relay work together?
Thanks.
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'].