In my project, I want to use React-Dropzones for file uploading. Everything works fine, but when React-Dropzones is part of the project, its trying to pull an index.js.map file from my public javascripts folder (and this file doesnt exist).
I'm using Webpacks with the following config:
{
entry: './app/js/' + file,
output: {
path: path.resolve(__dirname, 'public/javascripts_react'),
filename: file.replace(".js", "") + mode + ".js" },
module: {
loaders: [
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react', 'stage-2']
}
}
]
},
node: {
fs: "empty",
module: "empty"
}
}
I think you can ignore that.
Map files are used to make minified CSS and JS files readable by adding the source line numbers to the minified code. Whenever you have minified code, and open the browser developer console, the browser will try to download the map file. If it can't - you will see the minifed js/css without line numbers.
Keep in mind that as long as you don't open the console, the browser will not try to download the minified file.
you can read here more about minified files, or find out how to add js maps using webpack.
Related
I have an application with this structure:
/
/src/index.js
/src/styles/index.css
/static/background.png
The stylesheet is trying to use the PNG file like this:
// index.css
.page {
background-image: url("../../../static/background.png");
}
Now I would like to avoid using url-loader if possible and just copy the PNG file to dist folder for production but also have it work with dev server.
I have tried using this rule:
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
use: {
loader: 'asset/resource',
options: {
path: path.join(__dirname, 'static'),
},
},
},
I read about built-in loader such as asset/resource however I fail to understand how to set it to read the PNG file from static folder.
I'm getting error:
ERROR in ./src/styles/index.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve './background.png' in '/Users/user/app/src/styles'
I use these rules to process CSS:
{
test: /\.css$/i,
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' ],
},
I have used lerna to setup the repo.
This is the error I am getting -
This error is coming in the shared code which I have put in the components directory. Below is my directory structure.
So I have this Button component to be used in both the apps. After seeing the error it seems to me it's not recognizing the jsx syntax and asking for #babel/preset-react . So what I tried is I tried to create .babelrc file inside buttons folder with this content -
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
and then additionaly I also created one webpack.config.js file inside buttons folder with this content -
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
}
This doesn't helped me!
I also tried to create babel.config.js in the root folder with a few contents copied but it didn't work.
I have separate .babelrc and webpack.config.js files in both the apps inside the apps folder as shown in the snapshot. When I am using buttons as a dependency in package.json in apps and then using it, then this error is coming. I don't know how to resolve this issue. Any help will be greatly appreciated.
This is example repo I have created for reference
One way to get this to work might be to nail the babel config straight into the webpack configuration:
In your case you have to change the babel-loader config so it will look like that:
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
"#babel/preset-react",
],
}
}
},
I just tried it on your test repo for app2 and it works
I have a fairly basic webpack setup that runs babel and out comes my minified js with a source map.
Now when I run my source map in chrome I get the js before babel and before minification. However I would often like to have my source map after babel but before minification. Is this possible?
TL;DR I want source map to post-babel pre-minifcation. Possible?
For completeness
I run babel-loader 8 with webpack 4
Here is a screenshot from chrome showing the problem. As you can see the Dropzone tag indicates this is jsx (and so before babel)
Secondly here is my webpack config (not that it actually matters for my question).
const path = require('path');
module.exports = {
context: path.join(__dirname, 'Scripts', 'react'),
entry: {
client: './client'
},
output: {
path: path.join(__dirname, 'Scripts', 'app'),
filename: '[name].bundle.min.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: [require('#babel/plugin-proposal-object-rest-spread')],
presets: ["#babel/es2015", "#babel/react", "#babel/stage-0"]
}
}
}
]
},
resolve: {
extensions: ['.js', '.jsx']
},
externals: {
// Use external version of React (from CDN for client-side, or
// bundled with ReactJS.NET for server-side)
react: 'React'
},
devtool: 'source-map'
};
Running webpack with -d gives a second set of source maps in chrome that does the trick.
Currently, I have multiple css files under some react components. Those css files are required conditionally. However, css loader and extract text plugin include all the css files which is not required in a js file. Is there any way to exclude files by regex using test config or other way?
test: /\.css$/,
lets say I have css files
bear.css
cat.css
styles.css
colors.css
... multiptle different css files
I edit the regex correctly but still it include all css no matter what which i tested by leaving one comment on css file which should not be included on bundle.css
This is how I require css file
const css = require(`./styles/${config}`)
I will answer myself. Webpack's include exclude used to determine the file need to be transpile or not, which is nothing to do with excluding files from your bundle. For example, you add regex to exclude, it will still be in your bundle. However, it will not be processed or transpiled(depends on your loader you use).
Therefore, you should use something likeignore loader to remove from your bundle.
According to webpack documentation you can include style-loader and css-loader in your webpack.config.js file:
config = {
entry: "./app/Main.js",
output: {
publicPath: "/",
path: path.resolve(__dirname, "app"),
filename: "bundled.js"
},
mode: "development",
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-react", ["#babel/preset-env", { targets: { node: "12" } }]]
}
}
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
]
}
}
After that you could add css directly in your Main.js file
import Example from 'Example';
import './css/bear.css';
import './css/cat.css';
...
I have been following this tutorial to set up the environment for developing in react js.
React - tutorial
But when I run localhost:8080 on browser, it is showing a blank page.
I have tried all the browsers but none of them work.
I have installed webpack, but when I run webpack command, it says output file name not configured
My webpack-config.js file
module.exports = {
entry: './main.js',
output: {
path:'asd/',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [ {
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
}
module.exports = config;
Also,in the tutorial they added a script index.js in the html file which the browser is not able to locate and shows the error
404:server could not locate the resource index.js
I start the server from the same path where my folder conatining all the files is located
Please help.
When you run webpack ,it will look the file index.js file in asd folder.please check your folder structure to verify there is a file named indexjs in asd folder.