I've encountered a problem working with webpack-dev-server wherein the terminal output states that the bundle is valid, and when I request my app on my server (ie localhost), everything works as it should. When I request my app from another host, however, I am unable to load bundle.js, and I get a Network connection was lost error on Safari and a net::ERR_EMPTY_RESPONSE on Chrome. To explain further, if I go to http://url/public/bundle.js on my server, I get bundle.js, and if I try to do the same on my local machine, I get the errors. Here's my webpack.config.js file:
module.exports = {
entry: [
'./assets/jsx/modsoussi.jsx'
],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
publicPath: 'http://modsoussi.xyz:8080/public/',
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['es2015','react'] // react preset is needed in this case to avoid
// unexpected token '<' error.
}
}
]
},
externals: {
'react':'React'
},
resolve: {
extensions: ['','.js','.jsx']
}
}
Related
I've recently picked up an Electron legacy project and I'm having issues with the ssh2 package https://www.npmjs.com/package/ssh2. From what I can see the project is quite outdated but for now I'm just trying to do the minimum to clear some security vulnerabilities discovered.
The one package I'm having issues with is ssh2. This project is using webpack albeit an old version but it's working just fine up to the point of upgrading ssh2.
During running my app in my dev env I'm getting webpack parsing errors, when I check out the syntax error it's referring to its pointing at an empty catch block. An example would be:
ERROR in ./~/ssh2/lib/server.js
Module parse failed: C:\Users\<my local path>\node_modules\ssh2\lib\server.js Unexpected token (484:16)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (484:16)
at Parser.pp$4.raise (C:\Users\<my local path>\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (C:\Users\<my local path>\node_modules\webpack\node_modules\acorn\dist\acorn.js:603:10)
at Parser.pp.expect (C:\Users\<my local path>\node_modules\webpack\node_modules\acorn\dist\acorn.js:597:28)
at Parser.pp$1.parseTryStatement (C:\Users\<my local path>\node_modules\webpack\node_modules\acorn\dist\acorn.js:902:12)
at Parser.pp$1.parseStatement (C:\Users\<my local path>\node_modules\webpack\node_modules\acorn\dist\acorn.js:702:31)
at Parser.pp$1.parseBlock (C:\Users\<my local path>\node_modules\webpack\node_modules\acorn\dist\acorn.js:981:25)
at Parser.pp$3.parseFunctionBody (C:\Users\<my local path>\node_modules\webpack\node_modules\acorn\dist\acorn.js:2105:24)
at Parser.pp$3.parseArrowExpression (C:\Users\<my local path>\node_modules\webpack\node_modules\acorn\dist\acorn.js:2087:10)
at Parser.pp$3.parseParenArrowList (C:\Users\<my local path>\node_modules\webpack\node_modules\acorn\dist\acorn.js:1902:17)
at Parser.pp$3.parseParenAndDistinguishExpression (C:\Users\<my local path>\node_modules\webpack\node_modules\acorn\dist\acorn.js:1870:21)
# ./~/ssh2/lib/index.js 33:10-32
And that is referring to this code:
onError: (err) => {
if (!proto._destruct)
socket.removeAllListeners('data');
this.emit('error', err);
try {
socket.end();
} catch {} << // Error is throw here
},
This is my webpack base config:
import path from 'path';
import WebpackNotifierPlugin from 'webpack-notifier';
export default {
module: {
loaders: [{
test: /\.jsx?$/,
loaders: ['babel-loader'],
exclude: /node_modules/
}, {
test: /\.json$/,
loader: 'json-loader'
}, {
test: /\.cjs?$/,
loaders: ['babel-loader']
}
]
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
libraryTarget: 'commonjs2'
},
resolve: {
extensions: ['', '.js', '.jsx', '.json', '.cjs'],
packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']
},
plugins: [
new WebpackNotifierPlugin({excludeWarnings: true}),
],
externals: [
]
};
This is my webpack config for dev env:
/* eslint max-len: 0 */
import webpack from 'webpack';
import baseConfig from './webpack.config.base';
const config = {
...baseConfig,
debug: true,
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr',
'babel-polyfill',
'./app/index'
],
output: {
...baseConfig.output,
publicPath: 'http://localhost:3000/dist/'
},
module: {
...baseConfig.module,
loaders: [
...baseConfig.module.loaders,
{
test: /\.global\.css$/,
loaders: [
'style-loader',
'css-loader?sourceMap'
]
},
{
test: /^((?!\.global).)*\.css$/,
loaders: [
'style-loader',
'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
]
}
]
},
plugins: [
...baseConfig.plugins,
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
],
target: 'electron-renderer'
};
export default config;
Please for give me if this issue is obvious. I've done some webpack work a long time ago and may be forgetting something fundamental. The issue only happens when I upgrade to any version of ssh2 client greater than 0.8.9.
Any help or pointers at all would be great and much appreciated.
I have built a tiny webapp with vue-cli. Now I have a JSON configuration file that has to be loaded at runtime, because the JSON will be regularly replaced on the production server.
I think I'm on the right track with:
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.json$/,
loader: 'file-loader',
exclude: '/node_modules',
options: {
name: '[name].[ext]'
}
}
],
},
},
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
}
But I get this error when I run npm run build:
Module parse failed: Unexpected token e in JSON at position 0 while parsing near 'export default __web...'
Any ideas on how to solve this?
--- UPDATE ---
Error disappeared when setting NODE_ENV=production before my webpack build-step. I still don't know what the underlying cause for this issue was.
--- END UPDATE ---
I have made a Phonegap app using Webpack. The app works fine on iOS and other Android devices, but it crashes on a Huawei Honor H60-L04 with Android 4.4.2. It crashes on load, showing this error:
Uncaught SyntaxError: Unexpected token >
By adding/removing all scripts loaded in index.html one by one, I have isolated the problem to exist in the dist/build.js file. That is the resulting js file from Webpack build, with all the app logic inside. Is there some webpack config mistake causing this issue? And why is only this device getting the error?
If relevant, I am using Vue.js and Framework7 to develop the app, and Phonegap Build to build it.
--- UPDATE --- :
When remote debugging the console says the error is at line 85 in index.html, but the index.html is not that long. Guessing that line number reports that way because dynamic things are added to the html-file when trying to load script.
My entire .babelrc file:
{
"plugins": ["transform-es2015-shorthand-properties"]
}
My entire Webpack config file:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
performance: {
hints: false
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
sass: "vue-style-loader!css-loader!sass?indentedSyntax"
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue',
'Framework7Vue': path.join(__dirname, '/node_modules/framework7-vue/dist/framework7-vue.min.js')
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
--- END UPDATE ---
EDIT: Link to github repo where this example is hosted is here in case someone wants to run it
I'm getting the near exact same problem as another user (you can find the question here), in that running the webpack-dev-server does actually compile and watch files correctly (seeing the console output in the terminal), but the browser still can't view my site correctly. This is my webpack.config.js file:
var webpack = require('webpack'),
path = require('path'),
// webpack plugins
CopyWebpackPlugin = require('copy-webpack-plugin');
var config = {
context: path.join(__dirname,'app'),
entry: './index.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: path.join(__dirname, 'public')
},
devServer: {
// contentBase: './public/'
},
plugins: [
// copies html to public directory
new CopyWebpackPlugin([
{ from: path.join(__dirname, 'app', 'index.html'),
to: path.join(__dirname, 'public')}
]),
// required bugfix for current webpack version
new webpack.OldWatchingPlugin()
],
module: {
loaders: [
// uses babel-loader which allows usage of ECMAScript 6 (requires installing babel-preset-es2015)
{test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015']}},
// uses the css-loader (loads css content) and style-loader (inserts css from css-loader into html)
{test: /\.css$/, loader: 'style!css', exclude: /node_modules/}
]
}
};
module.exports = config;
And this is my directory structure:
+--- webpack/
+--- app/
+--- index.html
+--- index.js
+--- styles.css
+--- package.json
+--- webpack.config.js
Currently, running webpack-dev-server outputs the following in the browser (note the lack of the public/ directory which is where webpack normally outputs my html and javascript bundle):
EDIT: Adding the devServer.contentBase property and setting it to public gets the browser to return a 403 error not found as shown here:
Okay, so I was able to reproduce the issue that you have on my project. To fix the issue I changed some things.
Here is what I have set up. I'm defining a bit less in the output and using jsx instead of js, but the results should be the same. You can replace my src with wherever your source code is.
const config = {
entry: './src/App.jsx',
output: {
filename: 'app.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react', 'stage-0'],
plugins: ['add-module-exports']
}
},
{
include: /\.json$/, loaders: ['json-loader']
},
{
test: /\.scss$/,
loaders: ['style', 'css?modules', 'sass']
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file?name=fonts/[name].[ext]'
}
]
},
plugins: [
new webpack.ProvidePlugin({
'Promise': 'exports?module.exports.Promise!es6-promise',
'fetch': 'imports?self=>global!exports?global.fetch!isomorphic-fetch'
}),
new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
],
resolve: {
root: path.resolve('./src')
},
devServer: {
contentBase: 'src'
}
};
So basically you would want this output in terminal:
webpack result is served from / - tells us that whatever we build from will be at the root
content is served from src - tells us that it's building from that directory
Hope this helps
I am trying to use react-icons in my project https://github.com/gorangajic/react-icons
My webpack file looks like this :
import webpack from 'webpack';
import path from 'path';
const GLOBALS = {
'process.env.NODE_ENV': JSON.stringify('development'),
__DEV__: true
};
export default {
debug: true,
devtool: 'cheap-module-eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
noInfo: true, // set to false to see a list of every file being bundled.
entry: [
'webpack-hot-middleware/client?reload=true',
'./src/index'
],
target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
output: {
path: `${__dirname}/dist`, // Note: Physical files are only output by the production build task `npm run build`.
publicPath: 'http://localhost:3000/', // Use absolute paths to avoid the way that URLs are resolved by Chrome when they're parsed from a dynamically loaded CSS blob. Note: Only necessary in Dev.
filename: 'bundle.js'
},
plugins: [
new webpack.DefinePlugin(GLOBALS), // Tells React to build in prod mode. https://facebook.github.io/react/downloads.htmlnew webpack.HotModuleReplacementPlugin());
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
{test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
{test: /\.(woff|woff2)$/, loader: 'file-loader?prefix=font/&limit=5000'},
{test: /\.ttf(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=image/svg+xml'},
{test: /\.(jpe?g|png|gif)$/i, loaders: ['file']},
{test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'},
{test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']}
]
}
};
It has an svg loader so there shouldn't be an issue, however, I get the following error
ERROR in ./~/react-icons/ti/thumbs-down.js
Module parse failed: /Users/Projects/react-slingshot/node_modules/react-icons/ti/thumbs-down.js Unexpected token (8:12)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (8:12)
Not sure what I'm missing in order to load these in my project
react-icons/ti/thumbs-down.js contains untranspiled ES6+JSX source.
You need to import from react-icons/lib/ti/thumbs-down.js to get the ES5 version, since you're only using Babel on your own src/ directory.
This is mentioned in the README's Usage section.