After a few hours of research, I still haven't solved an issue I've been having with Babel and Webpack. ): I'm sure the solution is simple.
My .babelrc:
{
"presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-stage-0"]
}
My package.json
{
"name": "sabrinasbase",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"chokidar": "^3.5.1",
"css-modules-typescript-loader": "^4.0.1",
"next": "10.0.5",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-particles-js": "^3.4.1",
"react-tsparticles": "^1.18.11",
"sass": "^1.32.5",
"three": "^0.124.0"
},
"devDependencies": {
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@babel/preset-stage-0": "^7.8.3",
"@babel/register": "^7.12.10",
"@types/node": "^14.14.22",
"@types/react": "^17.0.0",
"babel-loader": "^8.2.2",
"typescript": "^4.1.3",
"url-loader": "^4.1.1",
"webpack": "^5.16.0",
"webpack-cli": "^4.4.0",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^2.0.0"
},
"resolutions": {
"@babel/core": "^7.12.10"
}
}
My webpack.config.js
var path = require("path");
module.exports = {
//mode: "production",
mode: "development",
devtool: "inline-source-map",
context: path.join(__dirname, "pages"),
entry: ["/_app.js" /*main*/],
output: {
filename: "./bundle.js", // in /dist
},
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: [".ts", ".tsx", ".js", ".css", ".scss"],
},
module: {
rules: [
{ test: /\.tsx?$/, loader: "ts-loader" },
{
test: /\.scss$/,
use: [
{ loader: "style-loader" }, // to inject the result into the DOM as a style block
{ loader: "css-modules-typescript-loader" }, // to generate a .d.ts module next to the .scss file (also requires a declaration.d.ts with "declare modules '*.scss';" in it to tell TypeScript that "import styles from './styles.scss';" means to load the module "./styles.scss.d.td")
{ loader: "css-loader", options: { modules: true } }, // to convert the resulting CSS to Javascript to be bundled (modules:true to rename CSS classes in output to cryptic identifiers, except if wrapped in a :global(...) pseudo class)
{ loader: "sass-loader" }, // to convert SASS to CSS
// NOTE: The first build after adding/removing/renaming CSS classes fails, since the newly generated .d.ts typescript module is picked up only later
],
},
{
test: /\.png|jpg|gif$/i,
use: [
{
loader: "url-loader",
options: {
limit: 8192,
},
},
],
},
{ test: /\.js|tsx|ts$/, loader: "babel-loader", exclude: /node_modules/ },
],
},
};
All I want to do is import a picture into a component. Originally I was getting Plugin/Preset files are not allowed to export objects, only functions error, but now I am getting vaguer errors that the module isn't working correctly. There were a few times that the Webpack would compile successfully, but the file I wanted to use wouldn't. Is there anything I am missing? I promise I am installing the preset-stage-0 package.
Error: Cannot find module '@babel/preset-stage-0'
Require stack:
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\compiled\babel\bundle.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\compiled\babel\code-frame.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\lib\typescript\diagnosticFormatter.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\lib\typescript\runTypeCheck.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\lib\verifyTypeScriptSetup.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\server\next-dev-server.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\server\next.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\server\lib\start-server.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\cli\next-dev.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\bin\next
at Array.map (<anonymous>)
at Generator.next (<anonymous>)
at loadFileChain.next (<anonymous>)
Not sure why you are getting this error
Here is my webpack which works as expected Also, apologies in advance as I have done heck load of optimization to reduce bundle size
Webpack.config.base.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const CopyPlugin = require("copy-webpack-plugin");
const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');
const {WebpackManifestPlugin} = require('webpack-manifest-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const PurifyCssPlugin = require('purifycss-webpack');
const glob = require("glob");
module.exports = {
target: 'web',
stats: 'verbose',
output: {
path: __dirname + '/dist',
filename: '[name].[hash].bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: './'
}
}, 'css-loader']
},
{
test: /\.scss$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: './'
}
}, 'css-loader', 'sass-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true, // [email protected]
disable: true, // [email protected] and newer
mozjpeg: {
progressive: true,
},
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false,
},
},
}
]
}
]
},
plugins: [
new CopyPlugin({
patterns: [
{from: "icons", to: "icons"},
{from: "./manifest.webmanifest", to: ""},
{from: "./.htaccess", to: ""},
{from: "./robots.txt", to: ""}
],
}),
new MiniCssExtractPlugin({
filename: "[name].[hash].css"
}),
new HtmlWebpackPlugin({
template: "./src/app/index.html",
favicon: "./src/assets/image/favicon.png",
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true
}
}),
new ServiceWorkerWebpackPlugin({
entry: path.join(__dirname, './src/app/serviceWorker/serviceWorkerInit.js'),
}),
new WebpackManifestPlugin({
fileName: 'asset-manifest.json', // Not to confuse with manifest.json
}),
new ESLintPlugin({files: './src/app/app.js'}),
new PurifyCssPlugin({
paths: [
...(glob.sync(`./src/app/*.html`)),
...(glob.sync(`./src/app/**/*.jsx`)),
...(glob.sync(`./dist/*.html`))
],
styleExtensions: ['.css','.scss'],
moduleExtensions: [".html"],
verbose: true,
purifyOptions: {
info: true,
minify: true,
whitelist: ["*purify*"]
},
})
]
};
Webpack.config.prod.js
const merge = require('webpack-merge');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const webpackBaseConfiguration = require('./webpack.config.base.js');
const TerserPlugin = require('terser-webpack-plugin')
const webpack = require('webpack');
const GLOBALS = {
'process.env.NODE_ENV': JSON.stringify('production'),
__DEV__: false
};
module.exports = merge(webpackBaseConfiguration,{
mode: 'production',
entry: [
'@babel/polyfill',
'./src/app/app.jsx'
],
devServer: {
contentBase: './dist'
},
optimization: {
splitChunks: {
chunks: 'all',
minSize: 20000,
maxSize: 0,
minChunks: 2,
maxAsyncRequests: 30,
maxInitialRequests: 30,
enforceSizeThreshold: 50000,
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
reuseExistingChunk: true
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
},
usedExports: true,
minimizer: [
new TerserPlugin({
parallel: true,
terserOptions: {
ecma: 6,
},
}),
new OptimizeCSSAssetsPlugin()
]
},
plugins: [
new webpack.DefinePlugin(GLOBALS),
new CompressionPlugin({
algorithm: 'gzip',
minRatio: Number.MAX_SAFE_INTEGER
}),
new CompressionPlugin({
filename: "[path].br",
algorithm: "brotliCompress",
test: /\.(js|css|html|svg|png|svg|jpg|gif)$/,
deleteOriginalAssets: false,
minRatio: Number.MAX_SAFE_INTEGER
})
]
});
Webpack.config.dev.js
const merge = require('webpack-merge');
const webpackBaseConfiguration = require('./webpack.config.base');
const webpack = require('webpack');
module.exports = merge(webpackBaseConfiguration,{
mode: 'development',
output: {
publicPath: '/'
},
devServer: {
contentBase: './src',
historyApiFallback: true
},
devtool: 'cheap-module-eval-source-map',
entry: [
'@babel/polyfill',
'webpack-hot-middleware/client?reload=true',
'./src/app/app.jsx'
],
plugins: [
/*For hot deployment*/
new webpack.HotModuleReplacementPlugin()
]
});
package.json
{
"name": "Sample",
"version": "1.0.0",
"description": "React app",
"scripts": {
"clean": "rimraf dist",
"deploy": "node deploy",
"build:prod:deploy": "npm run clean && webpack --mode production --config webpack.config.prod.js && node deploy",
"build:prod": "npm run clean && webpack --mode production --config webpack.config.prod.js",
"build:dev": "webpack-dev-server --mode development --config webpack.config.dev.js --open --hot",
"start": "npm run build && npm run deploy",
"build": "npm run clean && webpack --mode production --config webpack.config.prod.js && npm run deploy"
},
"engines": {
"node": "14.x",
"npm": "6.x"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.12.1",
"@babel/core": "^7.2.2",
"@babel/node": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/polyfill": "^7.2.5",
"@babel/preset-env": "^7.2.0",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"@gfx/zopfli": "^1.0.15",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.0.4",
"brotli-webpack-plugin": "^1.1.0",
"compression-webpack-plugin": "^2.0.0",
"copy-webpack-plugin": "6.2.1",
"css-loader": "^2.1.0",
"eslint": "^7.18.0",
"eslint-webpack-plugin": "^2.4.1",
"file-loader": "^3.0.1",
"ftp-deploy": "^2.4.0",
"glob": "^7.1.6",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"image-minimizer-webpack-plugin": "^1.0.0",
"image-webpack-loader": "^7.0.1",
"imagemin-gifsicle": "^7.0.0",
"imagemin-jpegtran": "^7.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^8.0.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"rimraf": "^2.6.3",
"sass-loader": "^7.1.0",
"serviceworker-webpack-plugin": "^1.0.1",
"terser-webpack-plugin": "4.2.3",
"uglifyjs-webpack-plugin": "^2.1.1",
"webpack": "^4.40.0",
"webpack-cli": "^3.1.2",
"webpack-dev-middleware": "^3.5.2",
"webpack-dev-server": "^3.11.0",
"webpack-ftp-upload-plugin": "^1.0.3",
"webpack-hot-middleware": "^2.24.3",
"webpack-manifest-plugin": "^3.0.0",
"webpack-merge": "^4.2.1",
"workbox-cacheable-response": "^6.0.2",
"workbox-expiration": "^6.0.2",
"workbox-routing": "^6.0.2",
"workbox-strategies": "^6.0.2",
"workbox-webpack-plugin": "^6.0.2",
"zlib": "^1.0.5"
},
"dependencies": {
"axios": "^0.19.0",
"bootstrap": "^4.5.0",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-lazy-load-image-component": "^1.5.1",
"react-paginate": "^6.5.0",
"react-redux": "^7.2.2",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"redux": "^4.0.5",
"redux-immutable-state-invariant": "^2.1.0",
"redux-thunk": "^2.3.0"
}
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments