I got mini app in react and trying to start it with npm start - package.json - "scripts": {
"start": "node server.js"
All works fine in windows but when trying to start this on Ubuntu console throws an error
/var/www/react_pwa/node_modules/webpack/lib/RuleSet.js:143
throw new Error("options/query cannot be used with loaders");
I've updated node.js and npm so I thik this might be webpack configuration issue. The file looks like this now
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'eval',
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: 'index.html'
})
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'src'),
query: {
"presets": [
"es2015",
"stage-0",
"react"
],
"plugins": [
"react-hot-loader/babel"
]
}
},
{
test: /\.css/,
loaders: ["style", "css"]
}]
}
};
Any ideas? Thanks.
Change loaders: ['babel'] to loader: 'babel' and it should work.
I don't think you can use query with multiple "loaders" because it doesn't know what query to attach to which loader.
You are probably missing a dependency in your package.json.
Have you installed react-hot-loader, css-loader, style-loader, babel-loader,babel-core, babel-preset-es2015,babel-preset-react,babel-preset-stage-0 ?
Try running this command to make sure:
npm install --save-dev react-hot-loader css-loader style-loader babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0
Another thing you can do is ls node_modules in your windows setup and make sure all dependencies are in your package.json so you install them on npm install.
Related
Like the title says I'm searching for a working Webpack config for a React Components Library with support for Typescript, SASS and CSS Modules via SASS. I would really appreciate if somebody has one and would like to share it here.
Create tsconfig.json file
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true
},
"exclude": [
"node_modules"
]
}
Install dev dependency
npm install webpack webpack-cli webpack-dev-server typescript ts-loader style-loader css-loader sass-loader --save-dev
Then create webpack.config.js
const path = require('path');
module.exports = {
entry: path.join(__dirname, '/app.ts'),
output: {
filename: 'app.js',
path: __dirname
},
module: {
rules: [
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
},
{
loader: "sass-loader"
}
]
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
}
};
It might be a stupid question but I think I got stuck in here.
The case is I am using babel to compile my koa application, the generated build have some issues with dependencies outside from app directory.
The folder structure
root/
node_modules
auth // auth app
blog // blog app
config // common config for both apps
models // database models common for both apps
logs // app logs
builds
auth // auth build
blog // blog build
.env // envrionment settings
.babelrc // babel config
package.json
package.json
"scripts": {
"auth": "nodemon auth/ --exec babel-node",
"blog": "nodemon auth/ --exec babel-node",
"build:auth": "babel auth -d builds/auth --copy-files",
"build:blog": "babel blog -d builds/blog --copy-files"
},
"devDependencies" {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1",
"nodemon": "^1.8.1"
}
When I run npm run build:auth the build for auth application is generated but only files in the auth directory are transpiled and copied, is there any way I can have files from config and model directory also copied into the build/auth directory.
A help is really appreciated.
Fixed the same using webpack, here the solution if you facing the similar issue
Add a webpack.config.js in your root
const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
output: {
filename: 'bundle.js'
},
target: 'node',
externals: [nodeExternals()],
devtool: 'source-map',
resolve: {
modules: [path.join(__dirname, 'node_modules')]
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
include: [path.join(__dirname, 'utility'), path.join(__dirname, 'model'), path.join(__dirname, 'config'), path.join(__dirname, 'middleware')],
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
},
plugins: [
new UglifyJSPlugin({
exclude: /node_modules/
})
]
}
And install some dependencies using npm
npm install --save-dev babel-core babel-loader babel-polyfill uglifyjs-webpack-plugin webpack-node-externals
Modified the auth/index.js and added import "babel-polyfill"; on the top.
Let me know if you face any issue.
In React JS starter kits like the one at https://github.com/wallacyyy/reactly-starter-kit, I see package.json files that have content like this:
"scripts": {
"build": "cross-env NODE_ENV=production webpack --config ./webpack.prod.config.js --progress --colors",
...
},
"dependencies": {
"express": "^4.15.2",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.2"
}
The build script uses webpack to process the production build. How is it able to run on production when webpack is only a devDependency?
Webpack doesn't run on your production environment. Your build script just sets the NODE_ENV variable to equals production and thus letting Webpack and his plugins know they should prepare the bundle for production use. What exactly happens when you run this command depends on your webpack configuration, but among most common things would be code minification. You can also specify different kind of source maps and many other things. See https://webpack.js.org/guides/production/ for more information.
You keep both prod and dev webpack config. And in prod webpack config use definePlugin to set process.env.NODE_ENV as production ( you can also use other env variables ).
Now during transpiling and minification, NODE_ENV will be used in your vendor lib or in you app js.
'use strict';
var webpack = require('webpack');
var uglifyPlugin = new webpack.optimize.UglifyJsPlugin({
minimize: true,
comments: false
});
var definePlugin = new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
});
var commonChunkPlugin = new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
chunks: ['vendor', 'source'],
filename: 'vendor.bundle.js'
});
module.exports = {
context: __dirname + '/jsFolder',
entry: {
source: ['./app.jsx'],
vendor: [
'react',
'react-dom',
'redux',
'axios'
]
},
output: {
filename: "[name].bundle.js"
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
loaders: [
{ test: /\.json$/, loader: 'json-loader' },
{
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015', 'stage-0']
}
},
{ test: /\.css$/, loader: "css-loader" },
]
},
plugins: [commonChunkPlugin, definePlugin, uglifyPlugin],
node: {
console: true,
fs: 'empty',
net: 'empty',
tls: 'empty'
},
target: 'web'
};
I have been using webpack for the first time, starting for a tutorial, but I'm stuck trying to deploy this to digital ocean.
I have been running the server during development by typing
npm start
Which calls:
babel-node devServer.js
This works fine for me locally, but when I try to run it on digital ocean it first works for a few minutes, then dies. I read somewhere that running babel-node on a live server isn't recommended, so I guess this is something to do with that.
I can see from this line in package.json :
"build:webpack": "NODE_ENV=production node_modules/webpack/bin/webpack.js --config webpack.config.prod.js",
that I should be doing some sort of deploy step, which I do, but I can still only get it to run using npm start, which uses babel-node devServer.js
How do I actually run this after doing the build? What am I doing wrong?
From package.json:
"scripts": {
"build:webpack": "NODE_ENV=production node_modules/webpack/bin/webpack.js --config webpack.config.prod.js",
"build": "npm run clean && npm run build:webpack",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js \"test/**/*#(.js|.jsx)\"",
"clean": "rimraf dist",
"start": "babel-node devServer.js",
"tunnel": "browser-sync start --proxy localhost:7770 --tunnel wesbos",
"test:watch": "npm run test -- --watch"
},
My dev config:
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-hot-middleware/client',
'./client/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
resolve: {
root: [
path.resolve('./client')
],
alias: {
},
},
module: {
loaders: [
// js
{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'client')
},
// CSS
{
test: /\.styl$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!stylus-loader'
}
]
}
};
Prod config:
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: [
'./client/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': "'production'"
}
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
})
],
resolve: {
root: [
path.resolve('./client')
],
alias: {
},
},
module: {
loaders: [
// js
{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'client')
},
// CSS
{
test: /\.styl$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!stylus-loader'
}
]
}
};
You could try using babel-loader and running the build script in npm start
In your package.json:
"start": "npm run build && babel-node --presets es2015 devServer.js"
Also include the following dependencies in your package.json:
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
In your webpack.config:
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
I'm using Heroku to host my app and webpack to build it.
Basically, I'm trying to deploy my app, but it doesn't work at all.
The postinstall doesn't seem to occur since when I load the page it's missing the file bundle.js (which is built via webpack).
Here is my package.json scripts:
"main": "server.js",
"scripts": {
"dev": "webpack-dev-server --devtool eval --content-base build/ --colors --hot",
"start": "node server.js",
"postinstall": "webpack -p --config webpack.prod.config.js --progress"
}
When I push my project to heroku, there is no error displayed during the process. I can see in the console that it's running my postinstall:
remote: > pistou#1.0.0 postinstall /tmp/build_80dea0f9774d7a9a5f8f33ee9c913bca
remote: > webpack -p --config webpack.prod.config.js --progress
Here is my whole webpack.prod.config.js file:
var path = require('path');
var webpack = require('webpack');
var node_dir = path.resolve(__dirname, 'node_modules');
module.exports = {
entry: [
'unveil',
path.resolve(__dirname, 'app/main.js')
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
loaders: [
{
test: /\.jsx?$/,
include: path.join(__dirname, 'app'),
loader: 'babel'
},
{
test: /\.scss$/,
include: path.join(__dirname, 'app/styles'),
loader: 'style!css!sass'
},
{
test: /\.(png|jpg)$/,
loader: "file"
},
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" }
]
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /(fr|en)$/),
new webpack.DefinePlugin({
"process.env": {
"NODE_ENV": JSON.stringify("production")
}
}),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compress: {
warnings: false
}
}),
],
resolve: {
alias: {
"unveil": "./app/statics/jquery.unveil.js",
}
},
};
The --progress flag leads to a high number of print statements and log messages which heroku doesn't like and makes the process crash. Try to run without the --progress flag