What is the problem with my project? I receive an empty page after successful deployment to vercel.
package.json:
{
"name": "currency-converter",
"version": "1.0.0",
"description": "template for react application with typescript",
"main": "index.js",
"homepage": ".",
"license": "MIT",
"scripts": {
"start": "webpack serve --config webpack/webpack.config.js --env env=dev",
"build": "webpack --config webpack/webpack.config.js --env env=prod",
"lint": "eslint \"./src/**/*.{js,jsx,ts,tsx,json}\"",
"lint:fix": "eslint --fix \"./src/**/*.{js,jsx,ts,tsx,json}\"",
"prettier": "prettier \"./src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
"prettier:fix": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
},
"dependencies": {
"babel-loader": "^8.2.5",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#babel/core": "^7.18.5",
"#babel/plugin-transform-runtime": "^7.18.6",
"#babel/preset-env": "^7.18.2",
"#babel/preset-react": "^7.17.12",
"#babel/preset-typescript": "^7.17.12",
"#babel/runtime": "^7.18.6",
"#pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
"#types/estree": "^0.0.52",
"#types/react": "^18.0.14",
"#types/react-dom": "^18.0.5",
"#typescript-eslint/eslint-plugin": "^5.30.0",
"#typescript-eslint/parser": "^5.30.0",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.1",
"eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"html-webpack-plugin": "^5.5.0",
"husky": "^8.0.1",
"lint-staged": "^13.0.3",
"prettier": "^2.7.1",
"react-refresh": "^0.14.0",
"sass-loader": "^13.0.2",
"style-loader": "^3.3.1",
"typescript": "^4.7.4",
"webpack": "^5.74.0",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.2",
"webpack-merge": "^5.8.0"
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json}": [
"eslint --fix"
],
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --write"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
}
webpack (common config):
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, '..', './src/index.tsx'),
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
},
],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
type: 'asset/resource',
},
{
test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
type: 'asset/inline',
},
],
},
output: {
path: path.resolve(__dirname, '..', './build'),
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '..', './public/index.html'),
}),
new CopyPlugin({
patterns: [{ from: 'src', to: 'dest' }],
}),
],
};
webpack (config):
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
module.exports = ({ env }) => {
const envConfig = require(`./webpack.${env}.js`);
const config = merge(commonConfig, envConfig);
return config;
};
webpack (prod config):
module.exports = {
mode: 'production',
devtool: 'source-map',
};
webpack (dev config):
const ReactRefreshWebpackPlugin = require('#pmmmwh/react-refresh-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'cheap-module-source-map',
devServer: {
hot: true,
open: true,
},
plugins: [new ReactRefreshWebpackPlugin()],
};
Browser console of deployment:
Warning: DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND
Related
I have a problem when i updated in my project the webpack package to V5.x.
Here is the error :
webpack-hot-client: entry Object values must be an Array or Function. Please check your webpack config.
Here is my package.json :
"*.css",
"*.scss",
"*.sass" ], "main": "index.js", "scripts": {
"analyze": "bnr clean:build && bnr analyze",
"build:all": "bnr clean:build && bnr build:client && bnr build:server",
"build:client": "bnr clean:build && bnr build:client",
"build:server": "bnr clean:build && bnr build:server",
"clean": "bnr clean:build",
"dev": "bnr dev",
"docker": "yarn docker:build && yarn docker:start && yarn docker:status",
"docker:build": "docker-compose build --no-cache",
"docker:start": "docker-compose up -d",
"docker:status": "docker-compose logs -f -t",
"flow": "bnr flow",
"flow:stop": "bnr flow:stop",
"lint": "npm-run-all lint:js lint:style lint:json",
"lint:js": "bnr lint:js",
"lint:style": "bnr lint:style",
"lint:json": "bnr lint:json",
"prod": "bnr build:client && bnr build:server && bnr start",
"start": "bnr start",
"sitemap": "node sitemap-generator.js" }, "betterScripts": {
"analyze": {
"command": "npx webpack -p --progress --hide-modules --config ./tools/webpack/production.client.babel.js",
"env": {
"NODE_ENV": "analyze"
}
},
"build:client": {
"command": "npx webpack --hide-modules --config ./tools/webpack/production.client.babel.js && npx gulp --gulpfile
tools/gulpfile.js",
"env": {
"NODE_ENV": "production"
}
},
"build:server": {
"command": "npx babel ./src -d ./dist --copy-files && npx webpack --hide-modules --config
./tools/webpack/production.server.babel.js",
"env": {
"NODE_ENV": "production"
}
},
"clean:build": {
"command": "rimraf ./public/assets && rimraf ./public/webpack-assets.json"
},
"dev": {
"command": "nodemon ./index.js",
"env": {
"NODE_PATH": "./src",
"NODE_ENV": "development",
"PORT": 3000
}
},
"flow": {
"command": "npx flow"
},
"flow:stop": {
"command": "npx flow stop"
},
"lint:js": {
"command": "npx eslint --fix ./src ./tools ./index.js"
},
"lint:json": {
"command": "npx prettier --write src/**/**/*.json"
},
"lint:style": {
"command": "npx stylelint --fix ./src/**/*.css, ./src/**/*.scss"
},
"start": {
"command": "node ./index.js",
"env": {
"NODE_PATH": "./dist",
"NODE_HOST": "0.0.0.0",
"NODE_ENV": "production",
"PORT": 8080
}
} }, "husky": {
"hooks": {
"pre-commit": "lint-staged"
} }, "lint-staged": {
"*.{js,jsx}": "eslint --fix",
"*.{json,md}": "prettier --write",
"*.{scss,sass}": "stylelint --syntax=scss" }, "nodemonConfig": {
"watch": [
"src/server.js",
"src/handler.js",
"src/utils/renderHtml.js",
"src/theme/variables.scss"
] }, "browserslist": [
"> 1%",
"last 3 versions" ], "eslintIgnore": [
"tools/flow",
"public/assets" ], "dependencies": {
"#babel/cli": "^7.14.5",
"#babel/plugin-proposal-export-namespace-from": "^7.5.2",
"#fortawesome/fontawesome-free": "^5.15.1",
"#hapi/address": "^4.1.0",
"#koa/router": "^10.1.1",
"#loadable/component": "^5.10.2",
"#loadable/server": "^5.10.2",
"#tweenjs/tween.js": "^18.3.1",
"ansi-regex": "^6.0.1",
"axios": "^0.23.0",
"bootstrap": "^5.1.3",
"chalk": "^4.1.2",
"classnames": "^2.2.6",
"d3-ease": "^3.0.1",
"del": "^6.0.0",
"esm": "^3.2.25",
"glob-parent": "^6.0.2",
"gulp": "^4.0.2",
"gulp-cache": "^1.1.3",
"gulp-imagemin": "^8.0.0",
"gulp-postcss": "^9.0.0",
"gulp-rename": "^2.0.0",
"i18next": "^21.3.2",
"i18next-browser-languagedetector": "^6.1.2",
"i18next-node-fs-backend": "^2.1.3",
"i18next-resource-store-loader": "^0.1.2",
"i18next-xhr-backend": "^3.1.2",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-pngquant": "^9.0.2",
"koa": "^2.8.1",
"koa-bodyparser": "^4.2.1",
"koa-compress": "^5.1.0",
"koa-favicon": "^2.0.1",
"koa-helmet": "^6.1.0",
"koa-i18next-detector": "^0.7.2",
"koa-i18next-middleware": "^1.1.12",
"koa-i18next-middleware-fixed": "^1.1.10-b3",
"koa-morgan": "^1.0.1",
"koa-mount": "^4.0.0",
"koa-router": "^10.1.1",
"koa-static": "^5.0.0",
"koa-webpack": "^6.0.0",
"koa-webpack-server": "^0.2.4",
"micro-dash": "^8.1.0",
"moment": "^2.24.0",
"p-min-delay": "^4.0.1",
"pm2": "^5.1.2",
"qs": "^6.8.0",
"rc-animate": "^3.1.1",
"rc-queue-anim": "^2.0.0",
"rc-scroll-anim": "^2.6.1",
"rc-tween-one": "^2.6.3",
"react": "^17.0.2",
"react-bootstrap": "^1.0.0-beta.8",
"react-dom": "npm:#hot-loader/react-dom#^16.8.6",
"react-global-configuration": "^1.4.1",
"react-gtm-module": "^2.0.11",
"react-helmet": "^6.1.0",
"react-i18next": "^11.12.0",
"react-icons": "^4.3.1",
"react-motion": "^0.5.2",
"react-player": "^2.9.0",
"react-pose": "^4.0.8",
"react-router": "^5.0.1",
"react-router-config": "^5.0.1",
"react-router-dom": "^5.0.1",
"react-router-last-location": "^2.0.1",
"react-router-sitemap": "^1.2.0",
"react-spring": "^9.3.0",
"react-tilt": "^0.1.4",
"react-typist": "^2.0.5",
"react-youtube": "^7.9.0",
"sass-resources-loader": "^2.0.1",
"serialize-javascript": "^6.0.0",
"styled-components": "^5.3.1",
"terser-webpack-plugin": "^5.2.4" }, "devDependencies": {
"#babel/core": "^7.6.0",
"#babel/node": "^7.14.5",
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/plugin-proposal-export-default-from": "^7.5.2",
"#babel/plugin-proposal-optional-chaining": "^7.6.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.14.5",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.14.5",
"#babel/register": "^7.6.0",
"#babel/runtime": "^7.6.0",
"#loadable/babel-plugin": "^5.10.0",
"#loadable/webpack-plugin": "^5.7.1",
"asset-require-hook": "^1.2.0",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-istanbul": "^6.1.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"babel-plugin-transform-remove-console": "^6.9.4",
"better-npm-run": "^0.1.1",
"compression-webpack-plugin": "^9.0.0",
"core-js": "3",
"css-loader": "^6.4.0",
"css-modules-require-hook": "^4.2.3",
"cssnano": "^5.0.8",
"eslint": "^8.0.1",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^8.3.0",
"eslint-import-resolver-webpack": "^0.13.1",
"eslint-plugin-flowtype": "^6.1.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-hooks": "^4.2.0",
"file-loader": "^6.2.0",
"flow-bin": "^0.162.0",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-minifier": "^4.0.0",
"husky": "^7.0.2",
"imagemin-webpack-plugin": "^2.4.2",
"lint-staged": "^11.2.3",
"mini-css-extract-plugin": "^2.4.2",
"nodemon": "^2.0.13",
"normalize.css": "^8.0.1",
"npm-run-all": "^4.1.5",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"postcss": "^8.3.9",
"postcss-loader": "^6.2.0",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.4.1",
"react-dev-utils": "^11.0.4",
"react-hot-loader": "^4.12.13",
"react-router-sitemap-generator": "^0.0.8",
"react-test-renderer": "^17.0.2",
"rimraf": "^3.0.0",
"sass": "^1.43.2",
"sass-loader": "^12.2.0",
"static-site-generator-webpack-plugin": "^3.4.2",
"stylelint": "^13.13.1",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recommended-scss": "^4.3.0",
"stylelint-config-standard": "^22.0.0",
"stylelint-scss": "^3.10.1",
"url-loader": "^4.1.1",
"webpack": "^5.58.2",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "4.9.1",
"webpack-dev-middleware": "^5.2.1",
"webpack-hot-middleware": "^2.25.0",
"webpack-manifest-plugin": "^4.0.2",
"webpack-merge": "^5.8.0",
"webpack-node-externals": "^3.0.0" }, "engines": {
"node": ">=8",
"npm": ">=5" } }```
Here is my base.config.js of webpack :
import webpack from 'webpack'
import { WebpackManifestPlugin } from 'webpack-manifest-plugin'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
import FriendlyErrorsWebpackPlugin from 'friendly-errors-webpack-plugin'
import LoadablePlugin from '#loadable/webpack-plugin'
import config from './config'
const nodeEnv = process.env.NODE_ENV || 'development'
const isDev = nodeEnv === 'development'
const getPlugins = () => {
const plugins = [
new WebpackManifestPlugin({
fileName: path.resolve(process.cwd(), 'public/webpack-assets.json'),
filter: file => file.isInitial
}),
new MiniCssExtractPlugin({
filename: `${config.cssFileName}.css`,
chunkFilename: `${config.cssChunkFileName}.css`,
ignoreOrder: true
}),
// Setup environment variables for client
new webpack.EnvironmentPlugin({ NODE_ENV: JSON.stringify(nodeEnv) }),
// Setup global variables for client
new webpack.DefinePlugin({
__CLIENT__: true,
__SERVER__: false,
__DEV__: isDev
}),
new LoadablePlugin({ filename: '../loadable-stats.json', writeToDisk: true })
]
if (isDev) {
plugins.push(new FriendlyErrorsWebpackPlugin())
}
return plugins
}
// Webpack configuration
module.exports = {
mode: isDev ? 'development' : 'production',
devtool: isDev ? 'eval-source-map' : 'hidden-source-map',
context: path.resolve(process.cwd()),
entry: ['webpack-hot-middleware/client','./src/index.js'],
optimization: {
splitChunks: {
chunks: 'async'
}
},
output: {
path: path.resolve(process.cwd(), 'public/assets'),
publicPath: '/assets/',
filename: `${config.fileName}.js`,
chunkFilename: `${config.chunkFileName}.js`,
pathinfo: isDev
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
options: { cacheDirectory: isDev }
},
{
test: /\.css$/,
include: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css',
options: {
importLoaders: 1,
modules: false,
sourceMap: true
}
},
{ loader: 'postcss', options: { sourceMap: true } }
]
},
{
test: /\.(scss|sass)$/,
exclude: path.resolve(__dirname, '..', '..', 'src/theme/'),
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: isDev,
reloadAll: true
}
},
{
loader: 'css',
options: {
importLoaders: 2,
modules: {
localIdentName: config.cssModulesIdentifier,
context: path.resolve(process.cwd(), 'src')
},
sourceMap: true
}
},
{ loader: 'postcss', options: { sourceMap: true } },
{
loader: 'sass',
options: {
sassOptions: {
outputStyle: 'expanded'
},
sourceMap: true
}
},
{
loader: 'sass-resources',
options: {
resources: path.resolve(process.cwd(), 'src/theme/_include.scss')
}
}
]
},
{
test: /\.(scss|sass)$/,
include: path.resolve(__dirname, '..', '..', 'src/theme/'),
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: isDev,
reloadAll: true
}
},
{
loader: 'css',
options: {
importLoaders: 2,
modules: false,
sourceMap: true
}
},
{ loader: 'postcss', options: { sourceMap: true } },
{
loader: 'sass',
options: {
sassOptions: {
outputStyle: 'expanded'
},
sourceMap: true
}
}
]
},
{
test: path.resolve(process.cwd(), 'src/locales'),
loader: 'i18next-resource-store-loader'
},
{
test: /\.(woff2?|ttf|eot|svg|otf)$/,
loader: 'url',
options: { limit: 10240, name: config.staticFilesName }
},
{
test: /\.(gif|png|jpe?g|webp)$/,
// Any image below or equal to 10Kb will be converted to base64
loader: 'url',
options: { limit: 10240, name: config.staticFilesName }
},
{
test: /\.(mp3|mp4|ogv)$/,
loader: 'file',
options: { name: config.staticFilesName }
}
]
},
plugins: getPlugins(),
resolveLoader: {
mainFields: ['loader']
},
resolve: {
modules: ['src', 'node_modules'],
descriptionFiles: ['package.json'],
extensions: ['.js', '.jsx', '.json'],
fallback:{
fs: false,
vm: false,
net: false,
tls: false
}
},
cache: isDev,
stats: { children: false }
I tried a lot of things and i fixed a lot of issues but for me the entry is an Array, so i don't know why i got this error.
Here there is my server.js (he launches all the programs) :
import logger from 'koa-morgan'
import Koa from 'koa'
import bodyParser from 'koa-bodyparser'
import compression from 'koa-compress'
import helmet from 'koa-helmet'
import querystring from 'qs'
import Router from '#koa/router'
import favicon from 'koa-favicon'
import axios from 'axios'
import chalk from 'chalk'
import mount from 'koa-mount'
import serve from 'koa-static'
import Backend from 'i18next-node-fs-backend'
import i18n from 'i18next'
import i18nextMiddleware from 'koa-i18next-middleware-fixed'
import LanguageDetector from 'koa-i18next-detector'
import c from './config'
process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0
const app = new Koa()
const router = new Router()
const sendMessage = body =>
new Promise((resolve, reject) => {
const config = {
maxRedirects: 0,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}
axios
.post(
'https://go.pardot.com/l/138941/2019-07-22/2h6dgb',
querystring.stringify({ ...body, privacy: true }),
config
)
.then(result => {
resolve(result.status === 200)
})
.catch(e => {
reject(new Error(e))
})
})
const lngDetector = new LanguageDetector()
i18n
.use(Backend)
.use(lngDetector)
.init(
{
debug: false,
fallbackLng: 'fr',
saveMissing: false,
react: {
useSuspense: false
},
detection: {
order: ['path', 'navigator']
},
interpolation: {
escapeValue: false,
formatSeparator: ',',
format: (value, format) => {
if (format === 'uppercase') return value.toUpperCase()
return value
}
},
preload: ['fr'],
load: 'languageOnly',
ns: [
'global',
'landing_references',
'landing_expertises',
'home',
'references',
'expertises',
'contact',
'about',
'partners',
'team'
],
defaultNS: 'global',
backend: {
loadPath: `${path.resolve(process.cwd(), 'src')}/locales/{{lng}}/{{ns}}.json`
}
},
async () => {
// Use helmet to secure Express with various HTTP headers
app.use(helmet())
app.use(bodyParser())
// Compress all requests
app.use(compression())
// Use for http request debug (show errors only)
app.use(logger('dev', { skip: ctx => ctx.status < 400 }))
app.use(favicon(path.resolve(process.cwd(), 'public/favicon.ico')))
app.use(i18nextMiddleware.getHandler(i18n, { locals: 'lng' }))
// Docker serve static trough nginx for better performance
if (!__DOCKER__) {
console.log(chalk.magenta('==> 🐌 Serve statics with koa'))
app.use(mount('/locales', serve(path.resolve(process.cwd(), 'src/locales'))))
app.use(serve(path.resolve(process.cwd(), 'public')))
}
if (__DEV__) {
app.use(mount('/images', serve(path.resolve(process.cwd(), 'src/images'))))
/* Run express as webpack dev server */
const webpack = require('webpack')
const webpackConfig = require('../tools/webpack/base.config')
const compiler = webpack(webpackConfig)
const koaWebpack = require('koa-webpack')
new webpack.ProgressPlugin().apply(compiler)
const options = {
compiler,
devMiddleware: {
publicPath: webpackConfig.output.publicPath,
headers: { 'Access-Control-Allow-Origin': '*' },
hot: true,
writeToDisk: false,
quiet: true, // Turn it on for friendly-errors-webpack-plugin
noInfo: true,
stats: 'minimal',
serverSideRender: true
}
}
const middleware = await koaWebpack(options)
app.use(middleware)
}
router
.post('/contact', async ctx => {
try {
await sendMessage(ctx.request.body)
ctx.body = {
message: 'Votre message a bien été envoyé'
}
ctx.status = 200
} catch (e) {
ctx.body = {
message: 'Une erreur est survenue'
}
ctx.status = 500
}
})
.get('/', async ctx => {
ctx.status = 302
return ctx.redirect(`/${ctx.request.language}`)
})
.get('*', async (ctx, next) => {
return require('./render')(ctx, next)
})
app.use(router.routes()).use(router.allowedMethods())
if (c.port) {
app.listen(c.port, c.host, err => {
const url = `http://${c.host}:${c.port}`
if (err) console.error(chalk.red(`\n==> Error happen ${err}`))
console.info(chalk.green(`\n==> 🌎 Listening at ${url}`))
})
} else {
console.error(chalk.red('\n==> Error : No PORT environment variable has been specified'))
}
}
)
UPDATE :
I put some console.log in the compiler file :
for (const key of Object.keys(entry)) {
const value = entry[key];
console.log(entry)
console.log(value)
console.log(Array.isArray(Object.values(value)))
if (!Array.isArray(value)) {
throw new TypeError(
'webpack-hot-client: `entry` Object values must be an Array or Function. Please check your webpack config.'
);
Console.log return this :
main: { import: [ 'webpack-hot-middleware/client', './src/index.js' ] }
}
{ import: [ 'webpack-hot-middleware/client', './src/index.js' ] }
true
So i think that there is a problem with the declaration of variable, because we have to do an Object.values() to get the array.
So idk what can i do to resolve the problem, i will not change the dependencies files...
Thx for your time and your response!
Regards
It might not be the right example to your situation, but they made some internal changes to the webpack structure:
entry: {} allows an empty object now (to allow to use plugins to add entries)
here's one of the newer examples I found:
module.exports = {
entry: {
about: { import: './about.js', filename: 'pages/[name][ext]' },
},
};
Source: Webpack v5 internal changes: Entry
I found the error. WebPack Hot Client is not update for the last version of webpack (5.x). If you use Webpack Hot Client, you have to use version 4 of Webpack.
Regards
I have the following export statement in app.js:
export default class App {
...
}
Now I have the followinng import statement in main.js:
import App from '../../src/app.js'
This should work, I have done it always like this without problems, but somehow App is undefined.
Now when I do the following:
const App = require('../../src/app');
App is an object that contains the property 'default' which holds the 'App' class. Can someone please explain what I am missing here?
my webpack.config.js
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'development',
entry: {
'single-spa.config': './single-spa.config.js',
},
output: {
publicPath: '/dist/',
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
],
},
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
},
],
},
{
test: /\.js$/,
exclude: [path.resolve(__dirname, 'node_modules')],
loader: 'babel-loader',
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [{
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
}],
}, {
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [{
loader: 'file-loader'
}]
}
],
},
node: {
fs: 'empty'
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
},
modules: [path.resolve(__dirname, 'node_modules')],
},
plugins: [
new CleanWebpackPlugin(),
new VueLoaderPlugin()
],
devtool: 'source-map',
externals: [],
devServer: {
historyApiFallback: true
}
};
.babelrc file:
{
"presets": [
"#babel/preset-env"
]
}
package.json:
{
"name": "vue-micro-frontend-sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack --config webpack.config.js -p"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.18.1",
"bootstrap": "^4.3.1",
"bootstrap-select": "^1.13.5",
"cross-env": "^5.1.3",
"flag-icon-css": "^3.2.1",
"font-awesome": "^4.7.0",
"jquery": "^3.4.1",
"jquery-ui-dist": "^1.12.1",
"jquery-validation": "^1.17.0",
"lodash": "^4.17.15",
"popper.js": "^1.12",
"sass-loader": "^8.0.0",
"select2": "^4.0.6-rc.1",
"single-spa": "^4.4.1",
"single-spa-vue": "^1.5.4",
"url-loader": "^2.2.0",
"uuid": "^3.3.2",
"vue": "^2.6.10",
"vue-router": "^3.0.2"
},
"devDependencies": {
"#babel/core": "^7.6.4",
"#babel/plugin-proposal-object-rest-spread": "^7.6.2",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.6.3",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"html-loader": "^0.5.5",
"image-webpack-loader": "^6.0.0",
"node-sass": "^4.13.0",
"style-loader": "^1.0.0",
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
}
}
It's kind of annoying but I'm pretty sure Node doesn't support ES6 import OR export syntax.
Here's a stackoverflow post that addresses this in greater detail.
How can I use an es6 import in node?
I've got a react app (latest React version) with a NodeJS backend.
That runs so far locally. But now I want to use this React App (together with its NodeJS backend) with other devices in my home network.
How to do that?
That is my package.json of the React App:
{
"name": "dionysiscontrolcenter",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"private": true,
"devDependencies": {
"#babel/core": "^7.4.5",
"#babel/plugin-transform-runtime": "^7.5.5",
"#babel/preset-env": "^7.4.5",
"#babel/preset-react": "^7.0.0",
"#babel/runtime": "^7.5.5",
"#hot-loader/react-dom": "^16.8.6",
"babel-eslint": "^10.0.2",
"babel-loader": "^8.0.6",
"babel-plugin-import": "^1.12.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-es2015": "^6.24.1",
"copy-webpack-plugin": "^5.0.3",
"css-hot-loader": "^1.4.4",
"eslint": "5.15.3",
"eslint-config-airbnb": "^17.1.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-import": "2.18.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "7.14.2",
"file-loader": "^4.0.0",
"node-sass": "^4.12.0",
"prettier": "^1.18.2",
"sass-loader": "^7.1.0",
"webpack": "^4.35.0",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2"
},
"dependencies": {
"antd": "^3.15.2",
"babel-plugin-transform-runtime": "^6.23.0",
"css-loader": "^2.1.1",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^5.0.0",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-hot-loader": "^4.12.10",
"react-scripts": "2.0.0",
"react-string-replace": "^0.4.1",
"socket.io-client": "^2.2.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2"
},
"scripts": {
"dev": "webpack-dev-server --hot --env.mode=development",
"build": "webpack --colors --profile --progress --env.mode=production",
"build:analyze": "webpack --colors --profile --progress --env.mode=production --env.analyze=true",
"lint": "eslint ./src/ --ext .js,.jsx"
}
}
My webpack.config.js:
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = (env = {}) => {
const config = {
entry: ['./src/main.less', './src/main.jsx'],
output: {
path: path.resolve(__dirname, `./html/${env.branch || 'master'}`),
filename: 'dionysiscontrolcenter.js',
library: 'dionySisControlCenter',
libraryExport: 'default',
libraryTarget: 'umd',
},
mode: env.mode || 'development',
devtool: 'eval',
resolve: {
extensions: ['.js', '.jsx', '.css', '.less'],
},
plugins: [
new HtmlWebpackPlugin({ hash: false, template: './index.hbs' }),
new CopyWebpackPlugin([
{ from: 'dev/static/', to: 'static/' },
'dev/index.html',
]),
],
module: {
rules: [
{
test: [/\.js$/, /\.jsx$/],
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.css$/i,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
],
},
{
test: /\.less$/i,
use: [
{
loader: 'style-loader', // creates style nodes from JS strings
},
{
loader: 'css-loader', // translates CSS into CommonJS
options: {
sourceMap: true,
import: false,
},
},
{
loader: 'less-loader', // compiles Less to CSS
options: {
sourceMap: true,
javascriptEnabled: true,
},
},
],
},
{
test: /\.(jpe?g|png|gif)$/i,
use: [
{
loader: 'image-webpack-loader',
options: {
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
},
},
{
loader: 'file-loader',
},
],
},
{
test: /\.(svg)$/i,
use: [
{
loader: 'file-loader',
},
],
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [
{
loader: 'file-loader',
},
],
},
{
test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: 'file-loader',
},
],
},
watchOptions: {
poll: 1500,
},
devServer: {
contentBase: path.resolve(__dirname, './dev/'),
watchContentBase: true,
disableHostCheck: true,
// host: '0.0.0.0',
inline: true,
port: 8000,
// public: process.env.webpack_public_address || null,
overlay: true,
},
};
if (env.mode === 'development') {
// blabla alias
config.entry.unshift(
'webpack/hot/only-dev-server',
'react-hot-loader/patch'
);
config.resolve.alias = { 'react-dom': '#hot-loader/react-dom' };
config.module.rules.unshift({
enforce: 'pre',
test: [/\.js$/, /\.jsx$/],
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
failOnError: env.mode === 'production',
},
});
}
if (env.analyze === 'true') {
config.plugins.push(
new BundleAnalyzerPlugin({
analyzerMode: 'static',
})
);
}
return config;
};
What I tried so far:
Commented in host: '0.0.0.0' in the webpack.config.js
Added the line: "dev": "webpack-dev-server --hot --env.mode=development --host 0.0.0.0", to scripts attribute in the package.json
Removed --hot parameter in the scripts attribute of "dev" command
Can someone help here?
try to add HOST=0.0.0.0 to script object
"scripts": {
"dev": "HOST=0.0.0.0 webpack-dev-server --hot --env.mode=development",
"build": "HOST=0.0.0.0 webpack --colors --profile --progress --env.mode=production",
"build:analyze": "webpack --colors --profile --progress -- env.mode=production --env.analyze=true",
"lint": "eslint ./src/ --ext .js,.jsx"
}
I’m having below issue when running build function using web pack, can you please have a look? npm build、 delete node_modules、update node.js version. Please help me.
webpack.config.js
var webpack = require('webpack');
var path = require('path');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/react');
var pathToReactDOM = path.resolve(node_modules, 'react-dom/index')
module.exports = {
devtool: 'eval-source-map',
devServer: {
/*headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
},*/
historyApiFallback: true,
hot: true,
inline: true,
contentBase: './webapp/build',
progress: true,
port: 8000,
proxy: {
'\*': {
//target: 'http://10.10.2.124:8082',
target: 'http://10.10.1.89:8080',
secure: false
}
}
},
entry: [
'webpack-dev-server/client?http://localhost:8000',
'webpack/hot/dev-server',
path.resolve(__dirname, 'react/main.js')
],
output: {
path: __dirname + '/webapp/build',
publicPath: '/build',
filename: './bundle.js',
chunkFilename: "[id].bundle.js"
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader'
}, {
test: /\.js[x]?$/,
include: path.resolve(__dirname, 'react'),
exclude: /node_modules/,
loaders: ['react-hot', 'babel-loader?cacheDirectory'],
noParse: [pathToReact, pathToReactDOM]
}, {
test: /\.(png|jpg)$/,
loader: 'url-loader'
}, {
test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
loader: 'url'
}]
},
resolve: {
extensions: ['', '.js', '.jsx'],
},
plugins: [
new OpenBrowserPlugin({
url: 'http://localhost:8000/dev/index.html'
})
]
};
package.json
{
"name": "***",
"version": "1.0.0",
"description": "admin",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server react/main.js --devtool eval --progress --hot --inline --colors --content-base webapp/build",
"deploy": "set NODE_ENV=production && webpack --config webpack.production.config.js"
},
"dependencies": {
"antd": "1.1.0",
"babel-runtime": "6.x",
"compression-webpack-plugin": "^0.4.0",
"echarts": "^3.4.0",
"react": "0.14.x",
"react-dom": "0.14.x",
"reflux": "^0.4.1",
"reqwest": "^2.0.5",
"webpack-parallel-uglify-plugin": "^0.4.2"
},
"devDependencies": {
"animate.css": "^3.5.1",
"babel-core": "^6.10.4",
"babel-eslint": "6.x",
"babel-loader": "6.x",
"babel-plugin-antd": "^0.4.0",
"babel-plugin-transform-es2015-modules-simple-amd": "^0.3.0",
"babel-plugin-transform-runtime": "6.x",
"babel-preset-es2015": "6.x",
"babel-preset-react": "6.x",
"babel-preset-stage-0": "6.x",
"copy-webpack-plugin": "2.x",
"css-loader": "~0.23.0",
"es5-shim": "^4.5.8",
"es6-promise": "^3.2.1",
"http-proxy-middleware": "0.17.2",
"open-browser-webpack-plugin": "0.0.2",
"react-hot-loader": "^1.3.0",
"style-loader": "~0.13.0",
"url-loader": "^0.5.7",
"webpack": "1.x",
"webpack-dev-server": "^1.14.1"
},
"author": "dwj",
"license": "ISC"
}
No compile errors, the project started normally. But the page can not be displayed normally.
Google App Engine newbie here.
I've deployed my React app to google, but when I try to preview it I get a 502 error:
Failed to load resource: the server responded with a status of 502 ()
app.yaml:
env: flex
runtime: nodejs
package.json:
{
"name": "react-boilerplate",
"version": "1.0.0",
"description": "Minimal boilerplate for react",
"main": "index.js",
"scripts": {
"start": "node server.js",
"bundle": "./node_modules/.bin/webpack --config webpack.config.js",
"prestart": "npm run bundle"
},
"author": "",
"license": "ISC",
"babel": {
"presets": [
"es2015",
"react",
"stage-2"
]
},
"engines": {
"node": "6.11.0",
"npm": "3.10.10"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.0",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.5",
"style-loader": "^0.16.1",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"axios": "^0.16.2",
"d3": "^4.9.1",
"express": "^4.15.3",
"pug": "^2.0.0-rc.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.0.5",
"redux": "^3.7.1",
"redux-thunk": "^2.2.0",
"webpack": "^3.3.0"
}
}
webpack.config.js:
var webpack = require('webpack');
module.exports = {
entry: [
'./src/index.js'
],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: [/\.css$/, /\.scss$/],
exclude: /node_modules/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
historyApiFallback: true
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
]
}
Running out of ideas. Any help would be awesome!
Figured out the problem. Turns out I needed to move all the modules from devDependencies to dependencies!