I am watching a video that teaches me to join to react with the back-end, everything is fine after putting the middlwares I always get an error, and I tried to solve it but I could not
Error:
C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack\lib\MainTemplate.js:100
throw new Error(
^
Error: MainTemplate.hooks.startup has been removed (use RuntimeGlobals.startup instead)
at Object.tap (C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack\lib\MainTemplate.js:100:12)
at LiveReloadPlugin.applyCompilation (C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack-livereload-plugin\index.js:164:42)
at Hook.eval (eval at create (C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:100:1)
at Hook.CALL_DELEGATE [as _call] (C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack\node_modules\tapable\lib\Hook.js:14:14)
at Compiler.newCompilation (C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack\lib\Compiler.js:993:26)
at C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack\lib\Compiler.js:1035:29
at Hook.eval [as callAsync] (eval at create (C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)
at Compiler.compile (C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack\lib\Compiler.js:1030:28)
at C:\Users\Danjos02\Desktop\Cursos\React-Curso\react-node-project\node_modules\webpack\lib\Watching.js:112:19
I got the original webpack of the video but still the error is not solved, so I doubt that it is something of the code, but still I can not solve since I am new to this topic
Webpack.config.js code
import webpack from 'webpack';
import htmlWebpackPlugin from 'html-webpack-plugin';
import LiveReloadPlugin from 'webpack-livereload-plugin';
export default {
entry: './src/client/index.js',
output: {
path: '/',
filename: 'bundle.js'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader', options: {
sourceMap: true
}
},
{
loader: 'sass-loader', options: {
sourceMap: true
}
}
]
}
]
},
plugins: [
new htmlWebpackPlugin({
template: 'src/client/index.html'
}),
new LiveReloadPlugin()
]
}
Server.js
import express from 'express';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackConfig from '../webpack.config';
// initializing packages
const app = express();
// settings
app.set('port', process.env.PORT || 3000);
// middlwares
app.use(webpackDevMiddleware(webpack(webpackConfig)));
// routes
app.get('/', (req, res) => {
res.send('Hello World');
});
app.get('/api', (req, res) => {
res.json({api: 'works!'});
});
// starting the server
app.listen(app.get('port'), () => {
console.log(`Server on port ${app.get('port')}`);
});
I have read and apparently the error is from the webpack-livereload-plugin, but I could not detect the error
If anyone knows why this error occurs please help me
Related
So I tried to make a webpack config for a website which is using typescript. Everything works but when I want to import some ts file which is not an entry I am getting an error:
Module not found: Error: Can't resolve '../module' in '/Users/user/Projects/Node/project/src/script'
How can I fix this? I guess webpack don't know about a file I try to import but what I should do? I am learning webpack and I couldn't find anything on the web.
folder structure:
/src
/util
-module.ts
/script
-index.ts
...
reason (index.ts):
import { sth } from "../util/module"; // <-----------
console.log(sth);
module:
export const sth = "Hello World!";
webpack config:
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const path = require("path");
const fs = require("fs");
const generateEntry = () => {
const entry = {};
const entryDir = path.resolve(__dirname, "src/script");
fs.readdirSync(entryDir).forEach((file) => {
const filename = file.split(".")[0];
entry[filename] = path.resolve(__dirname, "src/script", file);
});
return entry;
};
const generateTemplates = () => {
const templates = [];
const templatesDir = path.resolve(__dirname, "src/templates");
fs.readdirSync(templatesDir).forEach((file) => {
const filename = file.split(".")[0];
templates.push(
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src/templates", file),
chunks: [filename]
})
);
});
return templates;
};
module.exports = {
entry: generateEntry(),
output: {
publicPath: "",
path: path.resolve(__dirname, "./dist"),
filename: "script/[name].[contenthash].js"
},
module: {
rules: [
{
test: /\.ts$/i,
loader: "ts-loader",
exclude: /node_modules/
},
{
test: /\.scss$/i,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
exclude: /node_modules/
},
{
test: /\.html$/i,
loader: "html-loader"
},
{
test: /\.(png|jpe?g|gif)$/i,
loader: "file-loader",
options: {
outputPath: "static",
name: "[name].[contenthash].[ext]"
}
}
]
},
devServer: {
contentBase: path.resolve(__dirname, "dist"),
compress: false,
port: 8654
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: "style/[name].[contenthash].css"
})
].concat(generateTemplates())
};
So adding
resolve: {
extensions: ['.ts']
}
inside webpack config fixed this for me :))))))
I tried to run the program by linking MySQL and Node.js, but fs cannot be loaded due to the following errors.
Module not found: Error: Can't resolve 'fs'
By the way, adding target:'node', causes a global is not defined error.
and add node {fs:'empty'}, causes a createConnection is not a function error.
What should I do now
webpack.config.js
const path = require('path');
module.exports = (env, argv) => {
return {
mode: 'production',
entry: {
index : path.join(__dirname, 'src' ,'index.ts'),
},
output: {
path: path.join(__dirname, 'www'),
filename: 'game.js',
library: 'game',
libraryTarget: 'umd'
},
resolve: {
extensions: ['.ts', '.js'],
modules: [
path.resolve(__dirname, 'src'),"node_modules"
]
},
module: {
rules: [
{
test : /\.ts$/,
use: [{ loader: 'ts-loader'}]
}
]
}
}
};
mysql function
function get_connection():void {
console.log("mysql : ",mysql)
console.log("mysql.createConnection", mysql.createConnection)
connection = mysql.createConnection({
host: "host",
user: "user",
password: "pass",
database: "database"
}).then(conn => {
console.log('promise-mysql createConnection.');
connection = conn;
return conn;
}).catch(err => {
console.log("promise fail:",err)
})
}
As you're keen to use webpack to bundle for node server code, you shouldn't bundle node_nodules by using this helper webpack-node-externals. So try more with these options:
var nodeExternals = require('webpack-node-externals')
target: 'node',
externals: [
nodeExternals(),
],
node: {
fs: "empty",
}
I am building a React app with Firebase database and authentication, with server-side-rendering. It works fine until I initialise firebase database in the Firebase class. I believe it's because of the size of the library or something wrong with my webpack config. I am new to webpack and I couldn't find any similar issues on the internet. It's also my first question so any advice/improvements are welcome.
I run into this error when I initialise firebase database this.db = app.database();. Below is my Firebase class where I initialise everything Firebase.
var app = require('firebase/app');
require('firebase/auth');
require('firebase/database');
import { FB_CONFIG } from '..';
class Firebase {
serverValue: any;
emailAuthProvider: any;
googleProvider: any;
facebookProvider: any;
twitterProvider: any;
auth: any;
db: any;
user: any;
constructor() {
app.initializeApp(FB_CONFIG); // FB_CONFIG is an exported const of the config object
/* Helper */
this.serverValue = app.database.ServerValue;
this.emailAuthProvider = app.auth.EmailAuthProvider;
/* Firebase APIs */
this.auth = app.auth();
this.db = app.database();
/* Social Sign In Method Provider */
this.googleProvider = new app.auth.GoogleAuthProvider();
this.facebookProvider = new app.auth.FacebookAuthProvider();
this.twitterProvider = new app.auth.TwitterAuthProvider();
}
}
export default Firebase;
Below is my webpack config
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const outputDirectory = 'dist';
module.exports = {
entry: {
main: './src/client/index.tsx',
},
output: {
path: path.join(__dirname, outputDirectory),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: 'ts-loader'
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('node-sass'),
},
},
],
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
}
]
},
optimization: {
splitChunks: {
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 6,
maxInitialRequests: 4,
automaticNameDelimiter: '~',
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
},
resolve: {
extensions: ['*', '.tsx', '.ts', '.js', '.jsx']
},
devServer: {
port: 3000,
open: false,
historyApiFallback: true,
proxy: {
// '/api': 'http://localhost:8080'
}
},
plugins: [
new CleanWebpackPlugin([outputDirectory]),
new HtmlWebpackPlugin({
template: './public/index.html',
favicon: './public/img/_favicon/favicon.ico'
}),
]
};
Below is my server.ts where I start the node server and create a Firebase instance.
import Firebase from "./services/Firebase";
const express = require('express');
const os = require('os');
const dotenv = require('dotenv');
dotenv.config();
const app = express();
export const FB_CONFIG = {
apiKey: process.env.API_KEY,
authDomain: process.env.AUTH_DOMAIN,
databaseURL: process.env.DATABASE_URL,
projectId: process.env.PROJECT_ID,
storageBucket: process.env.STORAGE_BUCKET,
messagingSenderId: process.env.MESSAGING_SENDER_ID,
appId: process.env.APP_ID,
measurementId: process.env.MEASUREMENT_ID,
};
const database = new Firebase();
var data: any, isDataLoaded: boolean;
app.use(express.static('dist'));
app.get('/', (req, res) => res.send({ username: os.userInfo().username }));
app.listen(process.env.PORT || 8080, () => console.log(`Listening on port ${process.env.PORT || 8080}!`));
I am using nodemon to watch server code changes and it crashes while restarting giving me the error below:
[0] libc++abi.dylib: terminating with uncaught exception of type std::bad_alloc: std::bad_alloc
[0] [nodemon] app crashed - waiting for file changes before starting...
I am having trouble with the fs module error in Node JS Application. I am using Webpack also,
My .js file:
const fs = require('fs');
const path = require('path');
const filePath = path.join(__dirname, '../../app/logs/logs.txt');
module.exports.displayInfo = (info, containerID = 'info-dock') => {
fs.exists(filePath, (exists) => {
if (exists) {
console.log('Present');
}
});
let message;
if (info.message) {
message = info.message;
} else {
message = 'No message supplied.';
}
};
My webpack config file :
const path = require('path');
module.exports = {
entry: './clientSide/index.js',
cache: true,
output: {
path: path.resolve(__dirname, './public/js/'),
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['env'],
},
},
],
},
devtool: 'source-map',
target: 'web',
node: {
fs: "empty"
}
};
When I am trying to run and call displayInfo method in my application, on the browser's console, I get an error: ncaught TypeError: fs.exists is not a function.
Does anybody know how to correct this?
I've been working on making my vuejs app function well with SSR but all of my tries failed. I really need help in this.
Please note that I'm using normal js files not .vue files with es6 and require the html templates using webpack require function.
The app works fine in development mode, however, when I start execute it using 'vue-server-renderer' and go to any route, this error will be thrown:
Error: render function or template not defined in component: anonymous
at normalizeRender (/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:6015:13)
at renderComponent (/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:6081:3)
at renderNode (/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:6065:7)
at render (/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:6257:5)
at RenderStream.render (/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:6312:9)
at RenderStream.tryRender (/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:96:12)
at RenderStream._read (/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:125:12)
at RenderStream.Readable.read (_stream_readable.js:348:10)
at resume_ (_stream_readable.js:737:12)
at _combinedTickCallback (internal/process/next_tick.js:74:11)
Also, when I disable javascript on my browser, even home page will disappear (that's of course because it's not working from the SSR).
Here is my webpack:
var path = require('path')
var webpack = require('webpack')
var HTMLPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractCSS = new ExtractTextPlugin('styles.css');
var options = {
// entry: './entry.client.js',
entry: {
app: './entry.client.js',
vendor: [
'vue',
'vue-router',
'vuex',
'vuex-router-sync',
'moment',
'axios'
]
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/',
filename: '[name].[hash].js',
},
module: {
noParse: /es6-promise\.js$/, // avoid webpack shimming process
rules: [
{
test: /\.html$/,
loader: 'raw-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.(png|jpg|gif|svg|woff|woff2|eot|ttf)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.scss$/,
loader: extractCSS.extract('css-loader!sass-loader')
}
]
},
plugins: [
extractCSS,
new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en|zh-tw)$/),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV) || 'development',
'VUE_ENV': JSON.stringify(process.env.VUE_ENV) || 'client',
}
})
],
resolve: {
alias: {
'vue$': 'vue/dist/vue'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
devtool: '#eval-source-map'
}
console.log("xxxxx ---node env---- xxxx", process.env.NODE_ENV);
console.log("xxxxx ---vue env---- xxxx", process.env.VUE_ENV);
if (process.env.NODE_ENV != 'development') {
options.entry = './entry.server.js';
options.target = 'node';
options.output.filename = 'bundle-server.js';
options.output.libraryTarget = 'commonjs2';
options.externals = Object.keys(require('./package.json').dependencies);
}
if (process.env.NODE_ENV == 'development') {
options.plugins = (options.plugins || []).concat([
new HTMLPlugin({
template: './index.html'
}),
// extract vendor chunks for better caching
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
})
]);
}
if (process.env.VUE_ENV == 'server') {
options.devtool = '#source-map'
options.plugins = (options.plugins || []).concat([
new webpack.optimize.UglifyJsPlugin({
//sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
}),
new CopyWebpackPlugin([
{from: './assets', to: 'assets'},
{from: './index.html'}
])
])
}
module.exports = options;
And here is my server entry file:
import { app, router, store } from './src/app'
export default context => {
// set router's location
router.push(context.url)
// call prefetch hooks on components matched by the route
const s = Date.now()
return Promise.all(router.getMatchedComponents().map(component => {
if (component.prefetch) {
return component.prefetch(store)
}
})).then(() => {
console.log(`data pre-fetch: ${Date.now() - s}ms`)
// set initial store on context
// the request handler will inline the state in the HTML response.
context.initialState = store.state
return app
})
}
Here is my server.js:
'use strict'
const fs = require('fs')
const path = require('path')
const resolve = file => path.resolve(__dirname, file)
const express = require('express')
// const favicon = require('serve-favicon')
const serialize = require('serialize-javascript')
const createBundleRenderer = require('vue-server-renderer').createBundleRenderer
const app = express()
// parse index.html template
const template = fs.readFileSync(resolve('./dist/index.html'), 'utf-8')
// create server renderer from real fs
const bundlePath = resolve('./dist/bundle-server.js')
let renderer = createRenderer(fs.readFileSync(bundlePath, 'utf-8'))
console.log(renderer);
function createRenderer (bundle) {
return createBundleRenderer(bundle, {
cache: require('lru-cache')({
max: 1000,
maxAge: 1000 * 60 * 15
})
})
}
var options = {
maxAge: '60d',
setHeaders: function(res, path, stat) {
// Webfonts need to have CORS * set in order to work.
if (path.match(/ttf|woff|woff2|eot|svg/ig)) {
res.set('Access-Control-Allow-Origin', '*');
}
}
};
var dist_path = '/dist/';
app.use(express.static(path.join(__dirname, dist_path), options));
console.log("............");
app.get('*', (req, res) => {
console.log(".....ROUTE.......", req.url);
console.log('renderer', renderer);
if (!renderer) {
return res.end('waiting for compilation... refresh in a moment.')
}
var s = Date.now()
const context = { url: req.url }
const renderStream = renderer.renderToStream(context)
let firstChunk = true
// console.log(html.head);
// res.write(html.head)
renderStream.on('data', chunk => {
if (firstChunk) {
// embed initial store state
if (context.initialState) {
res.write(
`<script>window.__INITIAL_STATE__=${
serialize(context.initialState, { isJSON: true })
}</script>`
)
}
firstChunk = false
}
res.write(chunk)
})
renderStream.on('end', () => {
res.end(template)
console.log(`whole request: ${Date.now() - s}ms`)
})
renderStream.on('error', err => {
throw err
})
})
const port = process.env.PORT || 3000
app.listen(port, () => {
console.log(`server started at http://localhost:${port}`)
})
Does your index.html template has the placeholder <!--vue-ssr-outlet-->?