We Keep Coding

JS: install external package through webpack?

I am working on a fully JS app and trying to use an external library ( https://github.com/soldair/node-qrcode ) . My current webpack.config.js is the following:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const inheritedConfig = require('#main/build-configs/src/webpack')
const isProd = process.env.NODE_ENV === 'production';
const currentRoot = path.join(process.cwd());
module.exports = {
...inheritedConfig,
entry: { 'entry': './src/index' },
plugins: [
...inheritedConfig.plugins,
new HtmlWebpackPlugin({
title: 'QR Code Generator',
template: path.join(currentRoot, '../../packages/shared/html-templates/index.html')
}),
!isProd && new webpack.HotModuleReplacementPlugin()
].filter(Boolean)
};
Is there a way to add the package through my webpack config?

Uncaught SyntaxError: Cannot use import statement outside a module when using express

I am trying to deploy a website with a basic express server(inexperienced with it obviously) when I use a node dev server it works fine but when I use node server.js i get this error
Uncaught SyntaxError: Cannot use import statement outside a module
So I have a main.js with imports as follows:
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { defaults as defaultControls } from 'ol/control';
I have my basic server.js
const express = require('express');
const path = require('path');
const port = process.env.PORT || 3003;
const app = express();
app.use(express.static(__dirname));
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, './frontend/index.html'));
});
app.listen(port);
Start script
"start": "node server.js",
and webpack config
module.exports = {
entry: './main.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: './main.js'
},
devtool: 'source-map',
devServer: {
port: 3003,
clientLogLevel: 'none',
stats: 'errors-only'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new CopyPlugin([{from: 'data', to: 'data'}]),
new HtmlPlugin({
template: './frontend/index.html'
})
]
};
folder structure
frontend -index.html
-page2.html
main.js
package.json
webpack
...

Vuejs: Cannot resolve module 'fs'

I installed resource-bundle package:
npm install resource-bundle
But for building:
npm run build
gets error:
'cannot resolve module 'fs' '. what should i do?
webpack.base.conf.js:
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': resolve('src')
}
},
module: {
...
}
}
node: {
fs: 'empty'
}
*added fs: 'empty' at the end.

Try to add the following to your Webpack config:
node: {
fs: "empty"
}

CodeMirror does not work with React/Webpack

I'm working on some markdown editor for my react project.
I wanna use CodeMirror as the code editor, but it seems it does not working when I build it with webpack.
If be honest, CodeMirror are in the DOM-tree, textArea is hidden, but everything I see is:
and
UPD: The same code works perfect on codepen. I guess it's a problem with webpack.
some code:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Editor} from './components';
const rootElement = document.getElementById('root');
ReactDOM.render(<Editor />, rootElement);
components/editor.js
import React, { Component } from 'react';
import cm from 'codemirror';
require('codemirror/mode/markdown/markdown');
export class App extends Component {
componentDidMount() {
this.codeMirror = cm.fromTextArea(this.refs.editor, {mode: 'markdown'})
}
render() {
return (
<div>
<textarea ref='editor' autoComplete='off' defaultValue='default value' />
</div>
);
}
}
server.js
var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');
var HOST = 'localhost';
var PORT = 3000;
var app = express();
var compiler = webpack(config);
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true,
publicPath: config.output.publicPath
}));
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, '/app/index.html'));
});
app.listen(PORT, HOST, function(err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://' + HOST + ':' + PORT);
});
and webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-hot-middleware/client',
'./app/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'app')
}]
}
};

In webpack gitter chat #bebraw answered to my question:
Codemirror works with webpack but it takes some extra setup. you need
to bring some css etc. for it to render. example

webpack-dev-middleware doesn't hot replace modules

I tried using webpack-dev-middleware as a middleware.
I bundles in memory as it should and serves the JS output file,
but it doesn't hot reload when I save.
any ideas?

You'll want to use https://www.npmjs.com/package/webpack-hot-middleware or something similar.

You should use webpack-hot-middleware. here is a working example. I hope it helps.
for your webpack config (lets call it webpack.config.dev):
const path = require('path');
const webpack = require('webpack');
const distPath = path.resolve(__dirname, '../dist');
const srcPath = path.resolve(__dirname, '../src');
module.exports = {
context: srcPath,
target: 'web',
entry: [
'react-hot-loader/patch',
// activate HMR for React
// bundling the client for webpack-dev-server
// and connect to the provided endpoint
'webpack-hot-middleware/client',
'./client/index.js'
// the entry point of your app
],
output: {
filename: 'app.js',
// the output bundle
path: distPath,
publicPath:'/static/',
// necessary for HMR to know where to load the hot update chunks
pathinfo: true
},
module: {
rules: [
// eslint checking before processed by babel
{test: /\.js$/, enforce: 'pre', loader: 'eslint-loader', exclude: /node_modules/},
// babel
{test: /\.js$/, use: [{loader: 'babel-loader'}], exclude: /node_modules/}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
// enable HMR globally
new webpack.DefinePlugin({ "process.env": { NODE_ENV: '"development"' } })
]
};
For the server (called index.dev.js):
import path from 'path';
import express from 'express';
import React from 'react';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import { renderToString } from 'react-dom/server';
// the above file
import webpackConfig from '../../webpack/webpack.config.dev';
// myown react Html component
import Html from '../server/Html';
const app = express();
app.use(express.static(path.join(__dirname, '..', './public')));
const compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler, {
quiet: true,
noInfo: true,
publicPath: webpackConfig.output.publicPath,
stats: { colors: true }
}));
app.use(webpackHotMiddleware(compiler));
app.get('*', (req, res) =>
res.status(200).send(`<!doctype html>${renderToString(
<Html />)}`
// This is my own Html react component. You can send a static html file here as well.
)
);
app.listen(3000, (err) => {
if (err) {
console.error(err);
return;
}
console.info('Demo app listening on port 3000');
});
At the end I call it using babel-watch:
"scripts": {
"start:dev": "rm -f ./dist/* && ./node_modules/.bin/babel-watch ./src/server/index.dev.js -w ./src/server",
},