Related
I'm trying to use node.js as my server and vue.js as my client side.
I'm building a chat application with both, with integrated stuff like Axios, Express, Sequelize and vuetify.
The project has been silent for a week of 2 due to a few complications.
I tried to start it back up again and i got this error on my server side:
ERROR Failed to compile with 1 errors 4:25:16 PM
This relative module was not found:
./src/main.js in multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js
I've tried to change paths, restart servers and recreate files.
I'm quite new to Vue, so i have no clue what to do and i couldn't find an appropriate answer anywhere.
Here is the webpack.base.conf file
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)
}
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
module.exports = {
context: path.resolve(__dirname, '../'),
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: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}```
It should just start the build like a regular app, but sadly.
I'm using webpack 4 (4.6.0), I don't use the json-loader as it is my understanding that webpack handle this by default now.
When I'm working locally (I'm using serve from browser-sync to create a local dev-server), and I modified a JSON file wrongly (the JSON is not formatted correctly after my hcange), webpack exit with an error (instead of just telling me that there is an error on the json file and continue when I fix it).
Anyone experienced this issue (and knows how to solve it)?
This is the error I'm getting:
/code/program/node_modules/webpack/lib/JsonGenerator.js:10
JSON.stringify(data).replace(
^
TypeError: Cannot read property 'replace' of undefined
at stringifySafe (/code/program/node_modules/webpack/lib/JsonGenerator.js:10:22)
at JsonGenerator.generate (/code/program/node_modules/webpack/lib/JsonGenerator.js:36:53)
at NormalModule.source (/code/program/node_modules/webpack/lib/NormalModule.js:413:33)
at ModuleTemplate.render (/code/program/node_modules/webpack/lib/ModuleTemplate.js:43:31)
at modules.map.module (/code/program/node_modules/webpack/lib/Template.js:157:28)
at Array.map (<anonymous>)
at Function.renderChunkModules (/code/program/node_modules/webpack/lib/Template.js:154:28)
at HotUpdateChunkTemplate.render (/code/program/node_modules/webpack/lib/HotUpdateChunkTemplate.js:48:34)
at compilation.hooks.additionalChunkAssets.tap (/code/program/node_modules/webpack/lib/HotModuleReplacementPlugin.js:165:48)
at SyncHook.eval (eval at create (/code/program/node_modules/tapable/lib/HookCodeFactory.js:17:12), <anonymous>:7:1)
at SyncHook.lazyCompileHook [as _call] (/code/program/node_modules/tapable/lib/Hook.js:35:21)
at hooks.optimizeTree.callAsync.err (/code/program/node_modules/webpack/lib/Compilation.js:944:37)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/code/program/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/code/program/node_modules/tapable/lib/Hook.js:35:21)
at Compilation.seal (/code/program/node_modules/webpack/lib/Compilation.js:890:27)
at hooks.make.callAsync.err (/code/program/node_modules/webpack/lib/Compiler.js:481:17)
at _done (eval at create (/code/program/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:9:1)
at _err1 (eval at create (/code/program/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:32:22)
at _addModuleChain (/code/program/node_modules/webpack/lib/Compilation.js:758:12)
at processModuleDependencies.err (/code/program/node_modules/webpack/lib/Compilation.js:697:9)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickDomainCallback (internal/process/next_tick.js:218:9)
EDIT: Find below my webpack config:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
devtool: 'source-map',
entry: {},
resolve: {
modules: [
path.resolve(__dirname),
path.resolve(__dirname, 'node_modules')
],
extensions: [ '.js' ],
alias: {
app: 'client/app',
common: 'client/app/common',
components: 'client/app/components'
}
},
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
publicPath: '/',
path: path.resolve(__dirname, 'client')
},
mode: 'development';
module: {
rules : [
{
test: /\.js$/,
exclude: [ /app\/lib/, /node_modules/],
enforce: 'pre',
use: [
{
loader: 'eslint-loader',
options: {
failOnWarning: false,
failOnError: true
}
},
],
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
]
},
{
test: /\.(scss|sass)/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
includePaths: [ path.resolve(__dirname, './client/app') ],
sourceMap: true
}
},
]
},
{
test: /\.html$/,
use: [
{
loader: 'raw-loader',
options: {
minimize: false
}
}
]
},
{
test: /\.js$/,
exclude: [ /app\/lib/, /node_modules/],
use: [
{
loader: 'ng-annotate-loader?add=true&single_quotes=true'
},
{
loader: 'babel-loader'
}
]
},
{
test: /\.svg/,
use: [
{
loader: 'svg-url-loader'
}
]
},
{
test: /\.(png|jpg)$/,
use: [
{
loader: 'url-loader?limit=1024'
}
]
},
{
test: /\.woff$/,
use: [
{
loader: 'url-loader?limit=65000&mimetype=application/font-woff&name=public/fonts/[name].[ext]'
}
]
},
{
test: /\.woff2$/,
use: [
{
loader: 'url-loader?limit=65000&mimetype=application/font-woff2&name=public/fonts/[name].[ext]'
}
]
},
{
test: /\.[ot]tf$/,
use: [
{
loader: 'url-loader?limit=65000&mimetype=application/octet-stream&name=public/fonts/[name].[ext]'
}
]
},
{
test: /\.eot$/,
use: [
{
loader: 'url-loader?limit=65000&mimetype=application/vnd.ms-fontobject&name=public/fonts/[name].[ext]'
}
]
}
],
noParse: [
'/node_modules/d3-cloud/build/d3.layout.cloud.js',
]
},
plugins: [
new webpack.DefinePlugin({
VERSION: JSON.stringify(require("./package.json").version)
}),
new webpack.ProvidePlugin({
c3: 'c3',
Bugsnag: 'bugsnag-js'
}),
// This is used to have a banner shown to the user to "Add to home screen"
// It works with the service-worker called in app.js
new CopyWebpackPlugin([
{
from: './config',
to: path.resolve(__dirname, 'dist/')
},
{
from: './assets/**/*',
to: path.resolve(__dirname, 'dist/')
},
]),
// Injects bundles in your index.html instead of wiring all manually.
// It also adds hash to all injected assets so we don't have problems
// with cache purging during deployment.
new HtmlWebpackPlugin({
template: 'client/indexMockBackEnd.html',
//template: 'client/index.html',
inject: 'body',
hash: true,
favicon: 'client/app/common/favicon/favicon.ico'
}),
new webpack.DefinePlugin({
ENVIRONMENT: JSON.stringify('development'),
BROCHURE_HOME_URL: JSON.stringify(`https://pl.dev`)
}),
// Adds webpack HMR support. It act's like livereload,
// reloading page after webpack rebuilt modules.
// It also updates stylesheets and inline assets without page reloading.
new webpack.HotModuleReplacementPlugin(),
// displays desktop notifications on MacOS
new WebpackNotifierPlugin(),
],
optimization: {
namedModules: true, // NamedModulesPlugin()
splitChunks: {
chunks: "all"
},
runtimeChunk: true,
concatenateModules: true //ModuleConcatenationPlugin
}
};
This was a bug in webpack.
See details of the bug here: https://github.com/webpack/webpack/issues/7082
See pull request to fix it here: https://github.com/webpack/webpack/pull/7590
It is now fixed (as of July 2018)
I am following a react tutorial by Brian holt and i need to import .json file inside my react component like this :
code
When I try to build my project i was getting
ERROR in ./data.json
Module build failed: SyntaxError: Unexpected token, expected
like this:
Error caption in terminal
at first i thought that it was an eslint issue but it seems that it happens on the build step, i tried adding a json-loader to webpack but without any success.
Webpack Version:
2.6.1
Babel Core Version:
6.24.1
Babel Loader Version:
7.0.0,
this is my webpack config file :
const path = require('path')
module.exports = {
context: __dirname,
entry: './js/clientApp',
devtool: 'cheap-eval-source-map',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/assets/'
},
resolve: {
extensions: ['.js', '.jsx', ',json']
},
devServer: {
publicPath: '/public/',
port: 2110,
open: true,
historyApiFallback: true
},
stats: {
colors: true,
reasons: true,
chunks: true
},
module: {
rules: [
{
enforce: 'pre',
test: /\.jsx?/,
loader: 'eslint-loader',
exclude: /node_modules/
},
{
test: /\.jsx?/,
loader: 'babel-loader'
}
]
}
}
and this is my .babelrc file :
{
"presets": [
"react", ["env", {
"targets": {
"browsers": "last 2 versions"
},
"loose": true,
"modules": false
}]
]
}
Any suggestions please ?
Regular Expression
The test property identifies which file or files should be transformed.
The problem is the regular expression on your rules:
{ test: /\.jsx?/ }
Your telling webpack to use babel-loader with any file extension starting with .js or .jsx
So as you can see .json match the test.
Solution
$ - matches anything until the end of the string
To fix this just replace ? with $, see the example below:
module: {
rules: [
{
test: /\.jsx$/,
loader: 'babel-loader'
}
]
}
I have a couple of language files that I just copy to a location on disk, and I need to continue to do so for now.
The problem is that they're not minified and I would like to do so using WebPack 3.X as this is what we use... :)
Something like https://www.npmjs.com/package/grunt-jsonmin but without the grunt part.
What I have:
Uncompressed JSON in src/lang/*.json
What I want:
Compressed JSON in dist/lang/*.json
/J
This is kind of old, but if anyone is still pondering, here's how I did it:
// npm i -D node-json-minify copy-webpack-plugin
//webpack.config.js
const JSONMinifyPlugin = require('node-json-minify'),
CopyWebpackPlugin = require('copy-webpack-plugin');
options.plugins = [
new CopyWebpackPlugin([
{
/* i18n */
from: path.join(__dirname, 'src', '_locales'),
transform: function(content) {
// minify json
return JSONMinifyPlugin(content.toString());
},
to: path.join(__dirname, 'build', '_locales')
}
])
]
In webpack 5 you can use JsonMinimizerWebpackPlugin.
It works for both rules and CopyPlugin.
const JsonMinimizerPlugin = require("json-minimizer-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.json$/i,
type: "asset/resource",
},
],
},
plugins: [
new CopyPlugin({
patterns: [
{
context: path.resolve(__dirname, "dist"),
from: "./src/*.json",
},
],
}),
],
optimization: {
minimize: true,
minimizer: [
// For webpack#5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
// `...`
new JsonMinimizerPlugin(),
],
},
};
I use this template It works well. As you can see on the screen, all lybrarys (like bootstrap) render their CSS into vendor.css, but my component renders it into html directly, just into the header part in the html file in tag. Can you tell me how to configure it right?
// webpack.config.js
var isDevBuild = process.argv.indexOf('--env.prod') < 0;
var path = require('path');
var webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');
var merge = require('webpack-merge');
var allFilenamesExceptJavaScript = /\.(?!js(\?|$))([^.]+(\?|$))/;
//var ExtractTextPlugin = require('extract-text-webpack-plugin');
// Configuration in common to both client-side and server-side bundles
var sharedConfig = {
resolve: { extensions: ['', '.js', '.ts'] },
output: {
filename: '[name].js',
publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
loaders: [
{ test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } },
{ test: /\.html$/, loader: 'raw' },
{ test: /\.css$/, loader: 'to-string!css' },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } },
{ test: /\.(jpg1)$/, loader: 'file?name=[name].[ext]' }
]
}
};
// Configuration for client-side bundle suitable for running in browsers
var clientBundleConfig = merge(sharedConfig, {
entry: { 'main-client': './ClientApp/boot-client.ts' },
output: { path: path.join(__dirname, './wwwroot/dist') },
devtool: isDevBuild ? 'inline-source-map' : null,
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [] : [
// Plugins that apply in production builds only
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin()
])
});
// Configuration for server-side (prerendering) bundle suitable for running in Node
var serverBundleConfig = merge(sharedConfig, {
entry: { 'main-server': './ClientApp/boot-server.ts' },
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, './ClientApp/dist')
},
target: 'node',
devtool: 'inline-source-map',
externals: [nodeExternals({ whitelist: [allFilenamesExceptJavaScript] })] // Don't bundle .js files from node_modules
});
module.exports = [clientBundleConfig, serverBundleConfig];
and
// webpack.config.vendor.js
var isDevBuild = process.argv.indexOf('--env.prod') < 0;
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('vendor.css');
module.exports = {
resolve: {
extensions: ['', '.js']
},
module: {
loaders: [
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
{ test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) }
]
},
entry: {
vendor: [
'#angular/common',
'#angular/compiler',
'#angular/core',
'#angular/http',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
'#angular/router',
'#angular/platform-server',
'angular2-universal',
'angular2-universal-polyfills',
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
'es6-shim',
'es6-promise',
'jquery',
'zone.js',
'angular2-modal'
]
},
output: {
path: path.join(__dirname, 'wwwroot', 'dist'),
filename: '[name].js',
library: '[name]_[hash]',
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DllPlugin({
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
})
].concat(isDevBuild ? [] : [
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
])
};
It seems like you are using style-loader to load your component css. You can change it to be the same loader (most likely file-loader) as the vendor.css in your webpack.config
If you compare the two css loaders in your config files, you can see that webpack.config.vendor.js has this line:
{ test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) }
under loaders. That is the line that takes the CSS and puts it in its own file. So if you change the CSS loader for your webpack.config.js and make sure to add:
var extractCSS = new ExtractTextPlugin('styles.css'); // or name it whatever you want
at the top of the file. It should work.