Failing to run tests using Karma - javascript

I am setting up Karma to simplify unit tests in a legacy project. The problem is, I am getting an error You need to include some adapter that implements __karma__.start method!. As I have found, this is a very non-specific error, so I am at a loss of how to debug it further. I have reduced my setup to the bare minimum, but the error still persists.
Here is the karma config file:
module.exports = function (config) {
config.set({
browsers: [ 'PhantomJS' ], //run in Phantom
autoWatch: false,
singleRun: true, //just run once by default
frameworks: [ 'mocha', 'chai', 'sinon', 'chai-sinon' ], // test frameworks
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
files: [
'./js/test/tests.webpack.js' //just load this file
],
preprocessors: {
'./js/test/tests.webpack.js': [ 'webpack', 'sourcemap' ] //preprocess with webpack and our sourcemap loader
},
reporters: [ 'mocha' ], //report results in this format
webpack: { // webpack settings
devtool: 'inline-source-map',
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader' }
]
}
},
webpackServer: {
noInfo: true
},
plugins: [
'karma-mocha',
'karma-webpack',
'karma-sourcemap-loader',
'karma-mocha-reporter',
'karma-phantomjs-launcher',
'karma-chai',
'karma-sinon',
'karma-chai-sinon'
]
});
};
Here are the packages I have installed (from package.json):
"babel-core": "^6.9.1",
"babel-loader": "^6.2.4",
"babel-plugin-module-alias": "^1.5.0",
"babel-preset-es2015": "^6.9.0",
"chai": "^3.5.0",
"karma": "^1.0.0",
"karma-chai": "^0.1.0",
"karma-chai-sinon": "^0.1.5",
"karma-chrome-launcher": "^1.0.1",
"karma-mocha": "^1.0.1",
"karma-mocha-reporter": "^2.0.4",
"karma-phantomjs-launcher": "^1.0.1",
"karma-sinon": "^1.0.5",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.7.0",
"mocha": "^2.5.3",
"phantomjs": "^2.1.7",
"phantomjs-polyfill": "0.0.2",
"sinon": "^1.17.4",
"sinon-chai": "^2.8.0",
"webpack": "^1.13.1"
Here is .babelrc:
{
"presets": ["es2015"]
}
And here is the test file that I am referencing in karma.conf.js (tests.webpack.js). My initial idea was to require all spec files in it, but now I have changed it to run at least a single test. Still no luck:
import chai from 'chai';
var expect = chai.expect;
console.log('I was found');
it('works', function () {
expect(true).to.equal(true);
})
Could you please advise how to debug this problem further?
UPDATE: Here's a gist with a minimal reproducible case. I must be doing something wrong there, because I am still receiving the error You need to include some adapter that implements __karma__.start method!, but I can't figure out what my mistake is.

Try removing the reference to chai-sinon in karma config. When I get rid of it, the test runs. I can't exactly explain why, but perhaps there is version incompatibility going on.

Related

The decorators Plugin when .version is '2018-09' or not specified, requires a 'decoratorsBeforeExport' option, whose value must be a boolean

I am getting the following Babel error
The decorators Plugin when .version is '2018-09' or not specified, requires a 'decoratorsBeforeExport' option, whose value must be a boolean. ..../node_modules/#babel/plugin-proposal-decorators/lib/index.js$inerhits
This is my babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'react-native-reanimated/plugin',
[
"#babel/plugin-proposal-decorators",
{
"legacy": true,
"decoratorsBeforeExport": false // I tried this with true as well -> no luck either
}
]
]
};
This are the versions I am using
....
"dependencies": {
"react": "17.0.2",
"react-native": "0.66.4"
...
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/plugin-proposal-decorators": "^7.17.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.66.2",
...
Try this. It worked for me
module.exports = {
presets: [['#babel/preset-env', { targets: { node: 'current' } }]],
plugins: [['#babel/plugin-proposal-decorators', { legacy: true }]]
};
Make sure to re-run your project when you add these lines. Hot reloading won't work here.
Also, it's good to run $ watchman watch-del-all and npm start -- --reset-cache

React hydrate TypeError: __webpack_require__.i(...) is not a function

I am getting a webpack TypeError when trying to use hydrate() in index.js. The error is not seen when I use ReactDOM.render() instead of hydrate and I am using hydrate for server side rendering.
src/index.js
import React from 'react';
import ReactDOM, { hydrate } from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store/configureStore';
hydrate(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
config/webpack.config.dev.js
'use strict';
const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getClientEnvironment = require('./env');
const paths = require('./paths');
// Webpack uses `publicPath` to determine where the app is being served from.
// In development, we always serve from the root. This makes config easier.
const publicPath = '/';
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
const publicUrl = '';
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
// This is the development configuration.
// It is focused on developer experience and fast rebuilds.
// The production configuration is different and lives in a separate file.
module.exports = {
// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
// See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
devtool: 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
// The first two entry points enable "hot" CSS and auto-refreshes for JS.
entry: [
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
require.resolve('react-dev-utils/webpackHotDevClient'),
// We ship a few polyfills by default:
require.resolve('./polyfills'),
// Errors should be considered fatal in development
require.resolve('react-error-overlay'),
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
],
output: {
// Next line is not used in dev but WebpackDevServer crashes without it:
path: paths.appBuild,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: true,
// This does not produce a real file. It's just the virtual path that is
// served by WebpackDevServer in development. This is the JS bundle
// containing code from all our entry points, and the Webpack runtime.
filename: 'static/js/bundle.js',
// There are also additional JS chunk files if you use code splitting.
chunkFilename: 'static/js/[name].chunk.js',
// This is the URL that app is served from. We use "/" in development.
publicPath: publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebookincubator/create-react-app/issues/253
modules: ['node_modules', paths.appNodeModules].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebookincubator/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
},
plugins: [
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc),
],
},
module: {
strictExportPresence: true,
rules: [
// TODO: Disable require.ensure as it's not a standard language feature.
// We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
// { parser: { requireEnsure: false } },
// First, run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(js|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: eslintFormatter,
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
},
// ** ADDING/UPDATING LOADERS **
// The "file" loader handles all assets unless explicitly excluded.
// The `exclude` list *must* be updated with every change to loader extensions.
// When adding a new loader, you must add its `test`
// as a new entry in the `exclude` list for "file" loader.
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process JS with Babel.
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
// ** STOP ** Are you adding a new loader?
// Remember to add the new extension(s) to the "file" loader exclusion list.
],
},
plugins: [
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In development, this will be an empty string.
new InterpolateHtmlPlugin(env.raw),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
// Add module names to factory functions so they appear in browser profiler.
new webpack.NamedModulesPlugin(),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only):
new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebookincubator/create-react-app/issues/240
new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebookincubator/create-react-app/issues/186
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
},
// Turn off performance hints during development because we don't do any
// splitting or minification in interest of speed. These warnings become
// cumbersome.
performance: {
hints: false,
},
};
package.json
{
"name": "tratoli_backend",
"version": "0.1.0",
"private": true,
"dependencies": {
"autoprefixer": "7.1.1",
"babel-core": "6.25.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.0.0",
"babel-preset-react-app": "^3.0.1",
"babel-runtime": "6.23.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.4",
"dotenv": "4.0.0",
"eslint": "3.19.0",
"eslint-config-react-app": "^1.0.5",
"eslint-loader": "1.7.1",
"eslint-plugin-flowtype": "2.34.0",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-jsx-a11y": "5.0.3",
"eslint-plugin-react": "7.1.0",
"express": "^4.16.2",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"fixed-data-table": "^0.6.4",
"fixed-data-table-2": "^0.7.17",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"isomorphic-fetch": "^2.2.1",
"jest": "20.0.4",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.0.0",
"postcss-loader": "2.0.6",
"promise": "7.1.1",
"react": "^15.6.1",
"react-bootstrap": "^0.31.2",
"react-dev-utils": "^3.0.2",
"react-dom": "^15.6.1",
"react-error-overlay": "^1.0.9",
"react-redux": "^5.0.5",
"react-router": "^4.2.0",
"react-router-dom": "^4.1.2",
"react-router-redux": "next",
"react-select": "^1.0.0-rc.5",
"react-table": "^6.8.0",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"style-loader": "0.18.2",
"sw-precache-webpack-plugin": "0.11.3",
"url-loader": "0.5.9",
"webpack": "2.6.1",
"webpack-dev-server": "2.5.0",
"webpack-manifest-plugin": "1.1.0",
"webpack-node-externals": "^1.6.0",
"whatwg-fetch": "2.0.3"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js && npm run ssr",
"test": "node scripts/test.js --env=jsdom",
"start-ssr": "NODE_ENV=production webpack --config ./config/webpack.ssr.config.js",
"ssr": "NODE_ENV=production babel-node server/index.js --presets es2015,stage-2",
"ssr-start": "NODE_ENV=production node dist/server.js"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.js?(x)",
"<rootDir>/src/**/?(*.)(spec|test).js?(x)"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx"
]
},
"babel": {
"plugins": [
"css-modules-transform"
],
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-css-modules-transform": "^1.5.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-2": "^6.24.1"
}
}
And this here is the screenshot of the error message I received.
hydrate method is available in React 16(react-dom v16).
You are trying to access it from React 15(react-dom v15.6.1). This method is not available in React 15.
Update your react-dom to version to 16 and it should work fine.

How to build the static file for use in deployment

With my current configuration of node and webpack, I am able to run the dev-server and develop my application.
I am however unable to create the static bundle.js that i could use for a deployment on my website.
How can I configure my webpack.js files and package.json command to make it build the required bundle file ?
When I run npm build, nothing happens
When I run npm deploy, i get the following error message :
Usage: npm <command>
where <command> is one of:
access, add-user, adduser, apihelp, author, bin, bugs, c,
cache, completion, config, ddp, dedupe, deprecate, dist-tag,
dist-tags, docs, edit, explore, faq, find, find-dupes, get,
help, help-search, home, i, info, init, install, issues, la,
link, list, ll, ln, login, logout, ls, outdated, owner,
pack, ping, prefix, prune, publish, r, rb, rebuild, remove,
repo, restart, rm, root, run-script, s, se, search, set,
show, shrinkwrap, star, stars, start, stop, t, tag, team,
test, tst, un, uninstall, unlink, unpublish, unstar, up,
update, upgrade, v, verison, version, view, whoami
npm <cmd> -h quick help on <cmd>
npm -l display full usage info
npm faq commonly asked questions
npm help <term> search for help on <term>
npm help npm involved overview
Specify configs in the ini-formatted file:
C:\Users\Sébastien\.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config
Following is my configuration :
package.json
{
"license": "UNLICENSED",
"private": true,
"version": "1.0.0",
"webPath": "web/",
"nodePath": "node_modules/",
"devDependencies": {
"autoprefixer": "^6.3.1",
"exports-loader": "^0.6.2",
"grunt": "^0.4.5",
"grunt-autoprefixer": "^3.0.3",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-cssmin": "^0.14.0",
"grunt-contrib-less": "^1.1.0",
"grunt-contrib-uglify": "^0.11.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-css-url-rewrite": "^0.3.5",
"grunt-cssjoin": "^0.3.0",
"grunt-postcss": "^0.7.1",
"imports-loader": "^0.6.5",
"matchdep": "^1.0.0",
"redux-devtools": "^3.0.2",
"redux-devtools-dock-monitor": "^1.0.1",
"redux-devtools-log-monitor": "^1.0.4",
"webpack-shell-plugin": "^0.4.2"
},
"repository": {
"type": "git",
"url": ""
},
"dependencies": {
"babel-core": "^6.4.0",
"babel-loader": "^6.2.1",
"babel-plugin-transform-runtime": "^6.4.3",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babel-runtime": "^6.3.19",
"grunt-postcss": "^0.7.1",
"history": "^1.17.0",
"i18next": "^2.5.1",
"isomorphic-fetch": "^2.2.1",
"lodash": "^4.11.1",
"radium": "^0.16.2",
"rc-switch": "^1.4.2",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-hot-loader": "^1.3.0",
"react-redux": "^4.1.2",
"react-router": "^1.0.3",
"react-router-redux": "^3.0.0",
"redux": "^3.1.6",
"redux-thunk": "^2.1.0",
"selfupdate": "^1.1.0",
"webpack": "^1.12.11",
"webpack-dev-server": "^1.14.1",
"whatwg-fetch": "^0.11.0"
},
"scripts": {
"start": "node webpack.dev-server.js",
"build": "webpack",
"deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js"
}
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var node_modules_dir = path.join(__dirname, 'node_modules');
var devFlagPlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
});
console.log(__dirname);
var config = {
entry: [
'babel-polyfill',
'webpack-dev-server/client?http://127.0.0.1:3000',
'webpack/hot/only-dev-server',
'./app/Resources/react/app.js'
],
output: {
path: path.join(__dirname, 'web/js'),
filename: 'bundle.js',
publicPath: 'http://127.0.0.1:3000/static/'
},
debug: true,
devtool: 'eval',
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
devFlagPlugin
],
module: {
loaders: [
{
loaders: ["react-hot","babel-loader?plugins=transform-runtime&presets[]=es2015&presets[]=stage-0&presets[]=react"],
test: /\.js$/,
include: path.join(__dirname, 'app/Resources/react')
}
]
}
};
module.exports = config;
/*
new webpack.ProvidePlugin({
'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
})
*/
webpack.dev-server.js
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true,
quiet: false,
noInfo: false,
contentBase: "./assets"
}).listen(3000, 'localhost', function (err, result) {
if (err) {
console.log(err);
}
console.log('Listening at localhost:3000');
});
webpack.production.config.js
var path = require('path');
var node_modules_dir = path.resolve(__dirname, 'node_modules');
var config = {
entry: [
'babel-polyfill',
'./app/Resources/react/app.js'
],
output: {
path: path.join(__dirname, 'web/js'),
filename: 'bundle.js'
},
module: {
loaders: [
{
loaders: ["babel-loader?plugins=transform-runtime&presets[]=es2015&presets[]=stage-0&presets[]=react"],
test: /\.js$/,
include: path.join(__dirname, 'src/react')
}
]
}
};
module.exports = config;
you missed run
npm run deploy
run is required for all scripts. To help with common tasks npm knows how to use several preconfigured scripts such as start and test which is why npm start is an equivalent of npm run start.

Uncaught Error: [HMR] Hot Module Replacement is disabled

I'm using webpack for my build which works without any problems using the webpack-dev-server (npm run watch), however when I try to create a production build (npm run build) I seem to get the error in the console when I try to load the website and nothing shows up at all on-screen.
Uncaught Error: [HMR] Hot Module Replacement is disabled.
I have a few questions about this:
My understanding of using Hot Module Replacement is that its designed for making life easier during development, it should not be used in production deployments. Is that correct?
Given the below, why is Hot Module Replacement is being used? I don't see what's driving it.
What's the best practice when it comes to production builds, should I have a separate webpack config for prod and dev? Ideally I'd like to make use of a single config purely to ease maintenance.
package.json
{
// ...
"scripts": {
"build": "webpack --progress --colors --production",
"watch": "webpack-dev-server --inline --hot --progress --colors"
},
"dependencies": {
"bootstrap": "^3.3.6",
"bootstrap-sass": "^3.3.6",
"bootstrap-webpack": "0.0.5",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.15.0",
"jquery": "^2.2.3",
"node-sass": "^3.4.2",
"react": "^15.0.1",
"react-bootstrap": "^0.28.5",
"react-dom": "^15.0.1",
"react-redux": "^4.4.1",
"react-router": "^2.0.1",
"react-router-redux": "^4.0.1",
"redux": "^3.3.1",
"redux-thunk": "^2.0.1",
"webpack": "^1.12.14"
},
"devDependencies": {
"babel-core": "^6.7.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"exports-loader": "^0.6.3",
"file-loader": "^0.8.5",
"imports-loader": "^0.6.5",
"less": "^2.6.1",
"less-loader": "^2.2.3",
"redux-devtools": "^3.2.0",
"redux-logger": "^2.6.1",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js
var webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
entry: [
'webpack/hot/only-dev-server',
path.resolve(__dirname, 'app/index.js')
],
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: [ 'es2015', 'react' ] } },
{ test: /\.scss$/, loader: 'style!css!sass?includePaths[]=' + path.resolve(__dirname, './node_modules/bootstrap-sass/assets/stylesheets/') },
{ test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file' }
]
},
resolve: {
modulesDirectories: ['node_modules']
},
plugins: [
new webpack.NoErrorsPlugin(),
new htmlWebpackPlugin({
filename: 'index.html',
template: './index.html',
inject: false
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new webpack.optimize.OccurenceOrderPlugin()
]
};
You need to enable the HMR plugin. Add the HotModuleReplacementPlugin to your plugins array in you webpack.config. You can have a separate webpack.config for dev and production.
Something like
plugins: [
new webpack.NoErrorsPlugin(),
new htmlWebpackPlugin({
filename: 'index.html',
template: './index.html',
inject: false
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
]
It's not a particularly good idea to include the hot loading bits in a production build. They are practically useless there and just bloat your file size.
There are multiple strategies on how to deal with this. Some people separate their webpack configuration per file and then point to it through --config. I prefer to maintain a single file and branch through npm. I use webpack-merge to share configuration between branches (disclaimer: I'm the author).
I got this error due to the fact that I had code like this in webpack.config.js.
devServer: {
...
hot: true,
inline: true
}
Used the command webpack-dev-server --hot --inline instead and then I did not have to bloat my config with new webpack.HotModuleReplacementPlugin().
https://github.com/webpack/webpack/issues/1151#issuecomment-111972680
You will need to enable Hot Module Replacement feature to have it working e.g:
webpack.config.js
module.exports = {
//...
devServer: {
hot: true
},
plugins: [
//...
new webpack.HotModuleReplacementPlugin()
]
};
From webpack:
Note that webpack.HotModuleReplacementPlugin is required to fully enable HMR. If webpack or webpack-dev-server are launched with the --hot option, this plugin will be added automatically, so you may not need to add this to your webpack.config.js. See the HMR concepts page for more information.
As said, otherwise you can enable it through package.json add --hot to your script e.g.
"start": "webpack-dev-server --hot",

Error using babel-relay-plugin

I stumbled upon an error while using babel-relay-plugin.
When I require babel-relay-plugin module and export the output with my graphql schema and call it in my webpack list of babel plugins as a path works.
// webpack/plugins/babel-relay-plugin.js
var babelRelayPlugin = require('babel-relay-plugin');
var schema = require('./../../cloud/data/schema.json');
module.exports = babelRelayPlugin(schema.data);
// webpack/pro.config.js
module.exports = [
{
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
plugins: [
'./webpack/plugins/babel-relay-plugin'
]
}
}
]
}
}
]
But when I create the plugin in the same file as this:
// webpack/pro.config.js
var BabelRelayPlugin = require('babel-relay-plugin');
var schema = require('./../cloud/data/schema.json').data;
module.exports = [
{
name: 'server',
target: 'node',
devtool: 'cheap-module-source-map',
entry: cloudPath,
output: {
path: buildPath,
filename: 'index.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
plugins: [
new BabelRelayPlugin(schema)
]
}
}
]
}
}
]
It throws this error stack:
ERROR in ./cloud/index.js
Module build failed: TypeError: Cannot read property '__esModule' of null
at Function.normalisePlugin (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:156:20)
at /Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:197:30
at Array.map (native)
at Function.normalisePlugins (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:173:20)
at OptionManager.mergeOptions (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:271:36)
at OptionManager.init (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:416:10)
at File.initOptions (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/index.js:191:75)
at new File (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/index.js:122:22)
at Pipeline.transform (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
at transpile (/Users/AJ/Desktop/winebox/app/node_modules/babel-loader/index.js:14:22)
at Object.module.exports (/Users/AJ/Desktop/winebox/app/node_modules/babel-loader/index.js:88:12)
Any pointers as to how fix this inside the same file would be awesome. Thanks in advance.
All my packages are up-to-date an I already asked and it's not a Relay-side problem.
I faced the same issue that was faced by OP, the solution provided by #steveluscher raised TypeError: Cannot read property 'Plugin' of undefined.
There is a plugin babel-plugin-react-relay that solves this problem. It can take a json file, URL or graphql-js schema.
It relies on babel-relay-plugin so that you do not have to create your own plugin.
Usage is simple:
npm install --dev babel-plugin-react-relay
In your .babelrc file, add:
"plugins": [
"react-relay"
],
In package.json, add the path to your schema:
"react-relay-schema": "./data/schema.json"
And if you're using webpack, specify the plugin under babel-loader for your loaders:
{
test: /\.js?$/,
loader: 'babel-loader',
include: [
path.join(__dirname, 'src')
],
query: {
plugins: ['react-relay'],
presets: ['react', 'es2015']
}
}
require('babel-relay-plugin') returns a function that you can use to get a plugin given a schema. I think the usage that you're looking for is:
// webpack/pro.config.js
var babelRelayPlugin = require('babel-relay-plugin');
var schema = require('./../cloud/data/schema.json').data;
module.exports = [
{
/* ... */
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
plugins: [
new (babelRelayPlugin(schema))()
]
}
}
]
}
}
]
The inner expression returns a plugin, while the outer expression creates an instance of that plugin using the new keyword.
For those who stumble into this and are getting this error:
/app/client/node_modules/babel-relay-plugin/lib/getBabelRelayPlugin.js:53
var Plugin = _ref.Plugin;
^
TypeError: Cannot read property 'Plugin' of undefined
at new <anonymous> (/app/client/node_modules/babel-relay-plugin/lib/getBabelRelayPlugin.js:53:22)
Here is how the config I used to fix it:
at the root of my client app: babelRelayPlugin.js
const getBabelRelayPlugin = require('babel-relay-plugin');
// Make sure the path is correct here
const schemaData = require('../data/schema.json');
module.exports = getBabelRelayPlugin(schemaData.data);
Then in my .babelrc
{
"presets": ["es2015", "react", "stage-0"],
"plugins": ["./babelRelayPlugin"]
}
Here are my dependencies in my package.json
"dependencies": {
"babel-preset-stage-0": "^6.24.1",
"babel-relay-plugin": "0.10.0",
"node-sass": "^4.3.0",
"react": "15.4.2",
"react-dom": "15.4.2",
"react-relay": "0.10.0",
"sass-loader": "^6.0.2",
"semantic-ui-css": "^2.2.10",
"semantic-ui-react": "^0.68.3"
},
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-plugin-transform-class-properties": "^6.22.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-es2015": "6.22.0",
"babel-preset-react": "^6.23.0",
"babel-runtime": "^6.22.0",
"css-loader": "0.26.1",
"extract-text-webpack-plugin": "^v2.0.0-rc.1",
"file-loader": "^0.10.0",
"html-webpack-plugin": "^2.26.0",
"postcss-loader": "^1.2.2",
"react-hot-loader": "^3.0.0-beta.6",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "^2.2.1",
"webpack-cleanup-plugin": "^0.4.2",
"webpack-dashboard": "^0.3.0",
"webpack-dev-server": "^2.4.1"
}
I believe the babel stage-0 preset is required as it is present in all configs that work but I can't say for sure

Categories