Trying to ''npm start" my vue.js build, but i get this error: This relative module was not found: - mysql

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.

Related

Created two Files in webpack build!!! How to disable it

I have been trying to use Webpack for several days.
And I encountered a problem in configuring.
This is my configuration now!(webpack config)
// Look for .html files
let htmlFiles = [];
let directories = ["src"];
while (directories.length > 0) {
let directory = directories.pop();
let dirContents = fs
.readdirSync(directory)
.map((file) => path.join(directory, file));
htmlFiles.push(...dirContents.filter((file) => file.endsWith(".html")));
directories.push(
...dirContents.filter((file) => fs.statSync(file).isDirectory())
);
}
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "[name].[contenthash].js",
},
plugins: [
new CleanWebpackPlugin(),
new WebpackBar(),
new HtmlWebpackPlugin({
template: "./src/index.html",
hash: true,
filename: "index.html",
inject: "head",
scriptLoading: "defer",
xhtml: true,
}),
],
module: {
rules: [
//-------> CSS <-------//
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
generator: {
filename: "assets/styles/[name].[contenthash] [ext]",
},
},
//-------> HTML <-------//
{
test: /\.html$/i,
loader: "html-loader",
},
//-------> Images <-------//
{
test: /\.(png|jpe?g|gif)$/i,
type: "asset/resource",
generator: {
filename: "assets/images/[name].[hash][ext]",
},
},
//-------> Fonts <-------//
{
test: /\.(woff(2)?|ttf|eot)$/,
type: "asset/resource",
generator: {
filename: "./assets/fonts/[name].[contenthash][ext]",
But during construction, I see that two files are created from index.js...why??...how to disable it??
How fix it?
Thanks
Two created .js

Using Webpack to Handle Image Directory

I am currently switching a web app to have its assets bundled using Webpack. Bundling JS and CSS was somewhat straightforward. Then came the turn of images. My question is how one can approach bundling images.
In particular, suppose I have static_src from which everything originates and static_compiled into which the bundled output is placed. I would like the image contents of static_src/img to move into static_compiled/img. How does one accomplish this?
On another note, is this a sensible approach or am I misunderstanding some philosophy behind Webpack and misusing it?
Current config is roughly like this:
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: { index: path.resolve(__dirname, "static_src", "index.js") },
output: {
path: path.resolve(__dirname, "static_compiled"),
publicPath: "/static/", // Should match Django STATIC_URL
filename: "[name].js", // No filename hashing, Django takes care of this
chunkFilename: "[id]-[chunkhash].js", // DO have Webpack hash chunk filename, see below
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
],
module: {
rules: [
{
test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, // to transform JSX into JS
{
test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"]},
{
test: /\.css$/, use: ["style-loader", "css-loader"]},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: 'file-loader'},
{
test: /\.svg$/,
loader: 'svg-inline-loader'},
/* {
test: /\.(ico|png|jpg|gif)$/,
loader: 'file-loader'} */
{
test: /\.(ico|png|svg|jpg|gif|jpe?g)$/,
use: [
{
options: {
name: "[name].[ext]",
outputPath: "img/"
},
loader: "file-loader"
}
]
}
],
},
resolve: {
alias: {
shared: path.resolve(__dirname, 'node_modules', 'bower_components')
},
extensions: ['.js', '.ts', 'jsx', 'tsx']
},
devServer: {
writeToDisk: true, // Write files to disk in dev mode, so Django can serve the assets
}
}
The code I ended up using looks something like this.
plugins section:
plugins: [...
new CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, `static_src/img`),
to: 'img',
}
]
}),
module-rules section:
module: {
rules: [
{ ...
test: /\.(ico|png|jpg|gif|jpe?g)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "img/"
}
}
]
}

Webpack 4 html partials resolve images in files

I am new to webpack, I followed directions in this link https://github.com/hardikkaji/angularjs-es6-starter-kit
I am using webpack 4 with angular 1.7
I am not able to resolve images.
ERROR in ./node_modules/angular-datatables/demo/basic/overrideLoadingTpl.html
Module not found: Error: Can't resolve './images/loading.gif' in '/home/user/workspace/webpack/angular-webpack/node_modules/angular-datatables/demo/basic'
My webpack.config.js is below
const config = {
mode: devMode ? 'development' : 'production',
entry: {
'vendor': './frontend/vendor.module.js', //seperates all 3rd party plugins like ui-router, retstangualr etc
'app': './frontend/index.main.js' //main entry point for angular js
},
devtool: devMode ? 'source-map': 'none',
output: {
filename: elixirConfig.js.outputFolder + '/[name].[hash].bundle.js',
//filename: 'libs/[name].[hash].bundle.js', //where to store the generated files all files will be generated inside a folder called libs
//path: path.resolve(__dirname, 'build')
path: path.resolve(__dirname, elixirConfig.buildPath)
},
module: {
rules: [
{
test: /.js$/, //check for file that ends with .js extension
exclude: /node_modules/, //do not check for files inside node_modules folder
loader: ['ng-annotate-loader', 'babel-loader'],
//presets: ['es2016'],
},
{
test: /.(scss)$/, //check for files that end with scss
use: [
devMode ? { loader: "style-loader" } : MiniCssExtractPlugin.loader,
{ loader: "css-loader", options: { minimize: true } },
{ loader: "sass-loader" },
]
},
// for fixing of loading bootstrap icon files
{
test: /.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader?limit=10000',
options: {
name: './fonts/[name].[ext]'
}
},
{
test: /.(woff(2)?|ttf|eot|svg)(\?v=\d+.\d+.\d+)?$/,
loader: 'file-loader',
options: {
name: './fonts/[name].[ext]'
}
},
{ test: /.html$/, include: /node_modules/, loader: 'html-loader' },
]
},

How to fix “Module build failed: SyntaxError: Unexpected token” error when using JSON file in react?

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'
}
]
}

Why webpack doesn't render CSS from components to vendor.css file?

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.