I am trying to make an ajax request using fetch to an api. When I run npm build I get this error
ERROR in ./src/js/index.js 14:7
Module parse failed: Invalid regular expression flag (14:7)
You may need an appropriate loader to handle this file type.
| document.body.appendChild(c);
|
> fetch(/api/post/read.php)
| .then(res => res.json())
| .then((data) => {
my webpack config -
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
app:'./src/js/index.js',
test:'./src/js/test2.js'
},
devtool: 'source-map ',
devServer: {
contentBase: './dist',
compress: true,
port: 8080
},
plugins: [
new HtmlWebpackPlugin({
title: 'Menu',
template: './src/views/index.ejs',
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.jsnpm$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['#babel/preset-env']
}
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
},
};
and my package.json -
{
"name": "menu",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"start": "webpack-dev-server --open",
"build": "webpack"
},
"author": "aioy",
"license": "MIT",
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.2.3",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.0",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14"
}
}
What other module do I have to add so that I can make use fetch? I am using fetch to access a local api server in the same directory as my front end webpack files, could this be causing the issue too?
Related
I have my webpack watch all my files using watch: true in webpack.config.js.
I run webpack using npm run build through this code in package.json:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
Now when I use npm run build, it only compiles every time I save package.json. How do I change it so that it compiles every time I save a file in all of my folders?
Full code
package.json
{
"name": "testproj",
"version": "1.0.0",
"description": "",
"main": "code.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "Figma",
"license": "MIT",
"devDependencies": {
"#figma/plugin-typings": "*",
"#types/node": "^16.7.1",
"css-loader": "^6.2.0",
"html-webpack-inline-source-plugin": "0.0.10",
"html-webpack-plugin": "^5.3.2",
"style-loader": "^3.2.1",
"ts-loader": "^9.2.5",
"typescript": "^4.3.5",
"url-loader": "^4.1.1",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0"
},
"dependencies": {
"#types/react": "^17.0.19",
"#types/react-dom": "^17.0.9",
"figma-plugin-ds": "^1.0.1",
"react": "^17.0.2",
"react-dev-utils": "^11.0.4",
"react-dom": "^17.0.2"
}
}
webpack.config.js
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const webpack = require('webpack')
module.exports = (env, argv) => ({
watch: true,
watchOptions: {
ignored: /node_modules/,
},
mode: argv.mode === 'production' ? 'production' : 'development',
devtool: argv.mode === 'production' ? false : 'inline-source-map',
entry: {
ui: './src/ui.tsx',
code: './src/code.ts',
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.svg/,
type: 'asset/inline'
}
]
},
resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] },
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new webpack.DefinePlugin({
'global': {}
}),
new HtmlWebpackPlugin({
inject: "body",
template: './src/ui.html',
filename: 'ui.html',
chunks: ['ui']
}),
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/ui/]),
],
})
Use the command in your package.json
webpack --watch --config webpack.config.js
To fix this, add cache: false in the HTMLWebpackPlugin object argument in webpack.config.js:
plugins: [
new webpack.DefinePlugin({
'global': {}
}),
new HtmlWebpackPlugin({
inject: "body",
template: './src/ui.html',
filename: 'ui.html',
chunks: ['ui'],
cache: false // Add this line
}),
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/ui/]),
],
So i'm pretty new to Webpack, and I finally got the webpack-dev-server running. It recompiles and refreshes page on save, and it shows changes to my JS code. But it doesn't seem to work well with my SASS or HTML files?
On a fresh start, it will show a change if I make it, but if I undo that change, it doesn't update. Looking around other posts, I tried added the "--hot" flag, and adding "inline" to my devServer in webpack config. This got it working for a style change, but won't show deleted or undone changes.
This is my package.json...
{
"name": "testproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
"watch": "webpack --watch",
"server": "webpack-dev-server --open --hot"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/preset-env": "^7.8.4",
"autoprefixer": "^9.7.4",
"babel-loader": "^8.0.6",
"css-loader": "^3.4.2",
"cssnano": "^4.1.10",
"file-loader": "^5.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"postcss-loader": "^3.0.0",
"sass": "^1.25.0",
"sass-loader": "^8.0.2",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.3"
}
}
This is my webpack.config...
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const isDevelopment = process.env.NODE_ENV !== 'production';
const webpack = require('webpack');
module.exports = {
entry: './src/javascript/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new MiniCssExtractPlugin({
filename: 'bundle.css'
}),
new HtmlWebPackPlugin({
template: './dist/index.html',
filename: 'index.html'
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
inline: true,
hot: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader',
options: {
implementation: require('sass')
}
}
]
},
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'images'
}
}
]
},
{
test: /\.(woff|woff2|ttf|otf|eot)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'fonts'
}
}
]
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: !isDevelopment }
}
]
}
]
},
// Default mode is Production. Uses minifying
mode: 'development'
};
I must have something wrong or out of place?
Any help or tips would be appreciated. Will provide additional info if needed.
Thanks in advance!
I found a solution by adding "watchContentBase" to my devServer.
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
**watchContentBase: true,**
inline: true,
hot: true
}
I have a project using ractivejs with webpack. I added the ractive-loader, which can be found here https://www.npmjs.com/package/ractive-loader
When I try to build the project using npm run build:dev, i get the following error message in template:
`ERROR in ./src/Templates/Feed/Main.html 1:2
Module parse failed: Unexpected character '#' (1:2)
You may need an appropriate loader to handle this file type.
> {{#Feeds}}
| {{title}}
| {{/Feeds}}`
Template: Main.html
`{{#Feeds}}
<h1>{{title}}</h1>
{{/Feeds}}`
My webpack looks like this:
webpack.config
`const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {
prod_Path,
src_Path
} = require('./path');
const {
selectedPreprocessor
} = require('./loader');
module.exports = {
entry: {
main: './' + src_Path + '/main.js'
},
output: {
path: path.resolve(__dirname, prod_Path),
filename: '[name].[chunkhash].js'
},
devtool: 'source-map',
devServer: {
open: true,
},
module: {
rules: [{
test: /\.html$/,
use: {
loader: 'ractive-loader'
},
test: selectedPreprocessor.fileRegexp,
use: [{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
modules: false,
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
{
loader: selectedPreprocessor.loaderName,
options: {
sourceMap: true
},
}
]
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.css',
}),
new HtmlWebpackPlugin({
inject: false,
hash: false,
template: './' + src_Path + '/index.html',
filename: 'index.html'
})
],
resolve: {
alias: {
pubsub: 'aurelia-event-aggregator',
Ractive: 'ractive'
}
}
};`
Package.json
`{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"build:dev": "webpack-dev-server --env dev --mode none",
"build:prod": "webpack --env prod --mode production",
"build:watch": "webpack-dev-server --env dev --mode none"
},
"author": "mwieth",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^8.6.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.11.0",
"postcss-loader": "^2.1.5",
"sass-loader": "^7.0.2",
"style-loader": "^0.21.0",
"webpack": "^4.10.2",
"webpack-cli": "^3.0.1",
"webpack-dev-server": "^3.1.14",
"webpack-md5-hash": "0.0.6",
"ractive": "^1.3.2",
"ractive-animatecss": "^0.1.0",
"ractive-datetime": "^1.0.0",
"ractive-loader": "^0.5.6",
"ractive-markdown": "^0.1.1",
"ractive-route": "github:martinkolarik/ractive-route",
"aurelia-event-aggregator": "^1.0.2",
"axios": "^0.18.0"
},
"dependencies": {
"acorn": "^6.1.1",
"normalize.css": "^8.0.1"
}
}`
from looking at the docs here
https://github.com/rstacruz/ractive-loader
the syntax for adding ractive-loader is just 'ractive' instead of 'ractive-loader'
use: {
test: /\.html$/,
loader: 'ractive'
}
altho it seems they do it a bit differently if you follow their example exactly
module: {
loaders: [
{ test: /\.html$/, loader: 'ractive' }
]
}
i am using this webpack project template from here
to run it i use npm run serve .how can I add auto build/serve when files are changed. is it something to do with webpack or npm? .i am new to this javascript tooling & searching on google gives lots of options which is overloaded with information & configurations each different.
attaching the webpack config:
const path = require('path')
const webpack = require('webpack')
module.exports = env => {
return {
entry: {
main: './src/index.js'
},
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
publicPath: "/"
},
mode: env && env.production ? 'production' : 'development',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: [/\.vert$/, /\.frag$/],
use: 'raw-loader'
}
]
},
devServer
: {
contentBase: './dist'
},
plugins: [
new webpack.DefinePlugin({
'CANVAS_RENDERER': JSON.stringify(true),
'WEBGL_RENDERER': JSON.stringify(true)
})
]
}
}
my package.json file:
{
"name": "phaser3-webpack",
"version": "1.0.0",
"description": "A basic Phaser 3 starter project",
"main": "index.js",
"scripts": {
"build": "webpack",
"build:production": "webpack --env.production",
"clean": "rimraf dist/bundle.js",
"watch": "webpack --watch",
"serve": "webpack-dev-server"
},
"keywords": [
"phaser",
"webpack",
"es6"
],
"author": "John Cheesman",
"license": "MIT",
"dependencies": {
"phaser": "^3.1.2"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"raw-loader": "^0.5.1",
"rimraf": "^2.6.1",
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"webpack-dev-server": "^3.0.0"
}
}
Why does Hot Module Replacement stop working on webpack dev server?
My package.json file:
{
"name": "routing-react",
"version": "1.0.0",
"description": "Just a little ReactJS Training Ground",
"main": "index.js",
"scripts": {
"start": "npm run build",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot",
"build:prod": "cp src/index.html dist/index.html && webpack -p"
},
"keywords": [
"react"
],
"author": "gd10",
"license": "MIT",
"dependencies": {
"css-loader": "^0.28.9",
"react": "^15.1.0",
"react-dom": "^15.1.0",
"react-hot-loader": "^3.1.3",
"style-loader": "^0.20.1",
"webpack-hot-middleware": "^2.21.0"
},
"devDependencies": {
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-2": "^6.11.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
I have also set:
devserver = {
historyApiFallback: true,
inline: true,
hot: true
}
But it didn't helped.
webpack.config.js file:
var webpack = require('webpack');
var path = require('path');
var DIST_DIR = path.resolve(__dirname, 'dist');
var SRC_DIR = path.resolve(__dirname, 'src');
var config = {
devServer: {
historyApiFallback: true,
contentBase: './',
inline: true,
hot:true,
port: 3004,
},
entry: SRC_DIR + '/app/index.js',
output: {
path: DIST_DIR + '/app',
filename: 'bundle.js',
publicPath: '/app/'
},
module: {
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-2']
}
},
{
test: /\.css?/,
loader:'style-loader!css-loader'
},
]
}
};
module.exports = config;
Previously I had CSS loaders issue and after adding loaders in webpack.config.js I got webpack stopped.
how can I make Hot module work?
You need to activate the Hot Module Replacement Plugin, full instructions: https://webpack.js.org/guides/hot-module-replacement/