Giter Site home page Giter Site logo

developit / preact-boilerplate Goto Github PK

View Code? Open in Web Editor NEW
972.0 21.0 193.0 433 KB

:guitar: Ready-to-rock Preact starter project, powered by Webpack.

Home Page: https://preact-boilerplate.surge.sh

JavaScript 79.13% Less 11.01% EJS 9.86%
preact webpack development-workflow css-modules boilerplate pwa

preact-boilerplate's Introduction

Preact Boilerplate / Starter Kit Build Status Preact Slack Community

🎸 Ready-to-rock Preact starter project, powered by webpack. (View Demo)

🚀 Note: We now recommend Preact CLI for new projects.

Preact CLI is a natural evolution of this boilerplate, and improves on it in every way. In a single dependency, you get a friendly command line project creation and build tool with development & production modes. Preact CLI requires no configuration at all, and even does automatic code-splitting without you lifting a finger! It also produces bundles roughly half the size of preact-boilerplate.


Quick-Start Guide

Installation

1. Clone this repo:

git clone --depth 1 https://github.com/developit/preact-boilerplate.git my-app
cd my-app

2. Make it your own:

rm -rf .git && git init && npm init

ℹ️ This re-initializes the repo and sets up your NPM project.

3. Install the dependencies:

npm install

You're done installing! Now let's get started developing.

Development Workflow

4. Start a live-reload development server:

npm run dev

This is a full web server nicely suited to your project. Any time you make changes within the src directory, it will rebuild and even refresh your browser.

5. Testing with mocha, karma, chai, sinon via phantomjs:

npm test

🌟 This also instruments the code in src/ using isparta, giving you pretty code coverage statistics at the end of your tests! If you want to see detailed coverage information, a full HTML report is placed into coverage/.

6. Generate a production build in ./build:

npm run build

You can now deploy the contents of the build directory to production!

Surge.sh Example: surge ./build -d my-app.surge.sh

Netlify Example: netlify deploy

Deploy to Netlify

5. Start local production server with serve:

npm start

This is to simulate a production (CDN) server with gzip. It just serves up the contents of ./build.


Structure

Apps are built up from simple units of functionality called Components. A Component is responsible for rendering a small part of an application, given some input data called props, generally passed in as attributes in JSX. A component can be as simple as:

class Link extends Component {
  render({ to, children }) {
    return <a href={ to }>{ children }</a>;
  }
}
// usage:
<Link to="/">Home</Link>

CSS Modules

This project is set up to support CSS Modules. By default, styles in src/style are global (not using CSS Modules) to make global declarations, imports and helpers easy to declare. Styles in src/components are loaded as CSS Modules via Webpack's css-loader. Modular CSS namespaces class names, and when imported into JavaScript returns a mapping of canonical (unmodified) CSS classes to their local (namespaced/suffixed) counterparts.

When imported, this LESS/CSS:

.redText { color:red; }
.blueText { color:blue; }

... returns the following map:

import styles from './style.css';
console.log(styles);
// {
//   redText: 'redText_local_9gt72',
//   blueText: 'blueText_local_9gt72'
// }

Note that the suffix for local classNames is generated based on an md5 hash of the file. Changing the file changes the hash.


Handling URLS

💁 This project contains a basic two-page app with URL routing.

Pages are just regular components that get mounted when you navigate to a certain URL. Any URL parameters get passed to the component as props.

Defining what component(s) to load for a given URL is easy and declarative. You can even mix-and-match URL parameters and normal props.

<Router>
  <A path="/" />
  <B path="/b" id="42" />
  <C path="/c/:id" />
</Router>

React Compatibility

This project includes preact-compat alias in as react and react-dom right out-of-the-box. This means you can install and use third-party React components, and they will use Preact automatically! It also means that if you don't install third-party React components, preact-compat doesn't get included in your JavaScript bundle - it's free if you don't use it 👍


License

MIT

preact-boilerplate's People

Contributors

adamjo avatar antonk52 avatar bang88 avatar bdougie avatar billneff79 avatar brendan-myers avatar chiragmongia avatar cjpatoilo avatar crashuniverse avatar developit avatar diogomoretti avatar download avatar gokulkrishh avatar greenkeeper[bot] avatar greenkeeperio-bot avatar kaste avatar katopz avatar krofdrakula avatar kuldeepkeshwar avatar lependu avatar philwade avatar robdodson avatar snyk-bot avatar triallax avatar zouhir avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

preact-boilerplate's Issues

starting Development Workflow error on windows

Hi there,

I'm trying too run $npm run dev. but i end up with a unexpected token import error in the webpack.config.babel.js

webpack.config.babel.js

import webpack from 'webpack';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import autoprefixer from 'autoprefixer';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import ReplacePlugin from 'replace-bundle-webpack-plugin';
import OfflinePlugin from 'offline-plugin';
import path from 'path';
import V8LazyParseWebpackPlugin from 'v8-lazy-parse-webpack-plugin';
const ENV = process.env.NODE_ENV || 'development';

const CSS_MAPS = ENV!=='production';

module.exports = {
	context: path.resolve(__dirname, "src"),
	entry: './index.js',

	output: {
		path: path.resolve(__dirname, "build"),
		publicPath: '/',
		filename: 'bundle.js'
	},

	resolve: {
		extensions: ['', '.jsx', '.js', '.json', '.less'],
		modulesDirectories: [
			path.resolve(__dirname, "src/lib"),
			path.resolve(__dirname, "node_modules"),
			'node_modules'
		],
		alias: {
			components: path.resolve(__dirname, "src/components"),    // used for tests
			style: path.resolve(__dirname, "src/style"),
			'react': 'preact-compat',
			'react-dom': 'preact-compat'
		}
	},

	module: {
		preLoaders: [
			{
				test: /\.jsx?$/,
				exclude: path.resolve(__dirname, 'src'),
				loader: 'source-map-loader'
			}
		],
		loaders: [
			{
				test: /\.jsx?$/,
				exclude: /node_modules/,
				loader: 'babel-loader'
			},
			{
				// Transform our own .(less|css) files with PostCSS and CSS-modules
				test: /\.(less|css)$/,
				include: [path.resolve(__dirname, 'src/components')],
				loader: ExtractTextPlugin.extract('style?singleton', [
					`css-loader?modules&importLoaders=1&sourceMap=${CSS_MAPS}`,
					`postcss-loader`,
					`less-loader?sourceMap=${CSS_MAPS}`
				].join('!'))
			},
			{
				test: /\.(less|css)$/,
				exclude: [path.resolve(__dirname, 'src/components')],
				loader: ExtractTextPlugin.extract('style?singleton', [
					`css-loader?sourceMap=${CSS_MAPS}`,
					`postcss-loader`,
					`less-loader?sourceMap=${CSS_MAPS}`
				].join('!'))
			},
			{
				test: /\.json$/,
				loader: 'json-loader'
			},
			{
				test: /\.(xml|html|txt|md)$/,
				loader: 'raw-loader'
			},
			{
				test: /\.(svg|woff2?|ttf|eot|jpe?g|png|gif)(\?.*)?$/i,
				loader: ENV==='production' ? 'file-loader' : 'url-loader'
			}
		]
	},

	postcss: () => [
		autoprefixer({ browsers: 'last 2 versions' })
	],

	plugins: ([
		new webpack.NoErrorsPlugin(),
		new ExtractTextPlugin('style.css', {
			allChunks: true,
			disable: ENV!=='production'
		}),
		new webpack.DefinePlugin({
			'process.env.NODE_ENV': JSON.stringify(ENV)
		}),
		new HtmlWebpackPlugin({
			template: './index.ejs',
			minify: { collapseWhitespace: true }
		}),
		new CopyWebpackPlugin([
			{ from: './manifest.json', to: './' },
			{ from: './favicon.ico', to: './' }
		])
	]).concat(ENV==='production' ? [
		new V8LazyParseWebpackPlugin(),
		new webpack.optimize.UglifyJsPlugin({
			output: {
				comments: false
			},
			compress: {
				warnings: false,
				conditionals: true,
				unused: true,
				comparisons: true,
				sequences: true,
				dead_code: true,
				evaluate: true,
				if_return: true,
				join_vars: true,
				negate_iife: false
			}
		}),

		// strip out babel-helper invariant checks
		new ReplacePlugin([{
			// this is actually the property name https://github.com/kimhou/replace-bundle-webpack-plugin/issues/1
			partten: /throw\s+(new\s+)?[a-zA-Z]+Error\s*\(/g,
			replacement: () => 'return;('
		}]),
		new OfflinePlugin({
			relativePaths: false,
			AppCache: false,
			excludes: ['_redirects'],
			ServiceWorker: {
				events: true
			},
			cacheMaps: [
				{
					match: /.*/,
					to: '/',
					requestTypes: ['navigate']
				}
			],
			publicPath: '/'
		})
	] : []),

	stats: { colors: true },

	node: {
		global: true,
		process: false,
		Buffer: false,
		__filename: false,
		__dirname: false,
		setImmediate: false
	},

	devtool: ENV==='production' ? 'source-map' : 'cheap-module-eval-source-map',

	devServer: {
		port: process.env.PORT || 8080,
		host: 'localhost',
		colors: true,
		publicPath: '/',
		contentBase: './src',
		historyApiFallback: true,
		open: true,
		proxy: {
			// OPTIONAL: proxy configuration:
			// '/optional-prefix/**': { // path pattern to rewrite
			//   target: 'http://target-host.com',
			//   pathRewrite: path => path.replace(/^\/[^\/]+\//, '')   // strip first path segment
			// }
		}
	}
};

npm log

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\Ggzingeest\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle [email protected]~predev: [email protected]
6 silly lifecycle [email protected]~predev: no script for predev, continuing
7 info lifecycle [email protected]~dev: [email protected]
8 verbose lifecycle [email protected]~dev: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~dev: PATH: C:\Users\Ggzingeest\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin;C:\Users\Ggzingeest\Documents\Git\Preact\tablet-registratie\node_modules\.bin;C:\Perl64\site\bin;C:\Perl64\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Android\platform-tools;C:\Windows\System32;C:\Program Files\Git\cmd;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit\;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Program Files\nodejs\;C:\Perl64\site\bin;C:\Perl64\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Android\platform-tools;C:\Windows\System32;C:\Program Files\Git\cmd;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit\;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Program Files\nodejs\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Android\platform-tools;C:\Windows\System32;C:\Python27\;C:\Python27\Scripts\;C:\Users\Ggzingeest\AppData\Local\Microsoft\WindowsApps;C:\Users\Ggzingeest\AppData\Local\atom\bin;C:\Users\Ggzingeest\AppData\Roaming\npm;c:\Users\Me\AppData\Roaming\npm\
10 verbose lifecycle [email protected]~dev: CWD: C:\Users\Ggzingeest\Documents\Git\Preact\tablet-registratie
11 silly lifecycle [email protected]~dev: Args: [ '/d /s /c',
11 silly lifecycle   'cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress' ]
12 silly lifecycle [email protected]~dev: Returned: code: 1  signal: null
13 info lifecycle [email protected]~dev: Failed to exec dev script
14 verbose stack Error: [email protected] dev: `cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Users\Ggzingeest\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:279:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:194:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Users\Ggzingeest\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:194:7)
14 verbose stack     at maybeClose (internal/child_process.js:899:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd C:\Users\Ggzingeest\Documents\Git\Preact\tablet-registratie
17 verbose Windows_NT 10.0.14393
18 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Ggzingeest\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
19 verbose node v7.9.0
20 verbose npm  v4.5.0
21 error code ELIFECYCLE
22 error errno 1
23 error [email protected] dev: `cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress`
23 error Exit status 1
24 error Failed at the [email protected] dev script 'cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress'.
24 error Make sure you have the latest version of node.js and npm installed.
24 error If you do, this is most likely a problem with the tablet-registratie package,
24 error not with npm itself.
24 error Tell the author that this fails on your system:
24 error     cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress
24 error You can get information on how to open an issue for this project with:
24 error     npm bugs tablet-registratie
24 error Or if that isn't available, you can get their info via:
24 error     npm owner ls tablet-registratie
24 error There is likely additional logging output above.
25 verbose exit [ 1, true ]

An in-range update of eslint is breaking the build 🚨

Version 4.2.0 of eslint just got published.

Branch Build failing 🚨
Dependency eslint
Current Version 4.1.1
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As eslint is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details
  • continuous-integration/travis-ci/push The Travis CI build failed Details

Release Notes v4.2.0
  • e0f0101 Update: fix indentation of nested function parameters (fixes #8892) (#8900) (Teddy Katz)
  • 9f95a3e Chore: remove unused helper method from indent (#8901) (Teddy Katz)
  • 11ffe6b Fix: no-regex-spaces rule incorrectly fixes quantified spaces (#8773) (Keri Warr)
  • 975dacf Update: fix indentation of EmptyStatements (fixes #8882) (#8885) (Teddy Katz)
  • 88ed041 Build: Turnoff CI branch build (fixes #8804) (#8873) (Gyandeep Singh)
  • 72f22eb Chore: replace is-my-json-valid with Ajv (#8852) (Gajus Kuizinas)
  • 7c8de92 Docs: Clarified PR guidelines in maintainer guide (#8876) (Kevin Partington)
  • d1fc408 Docs: Update CLA link in Contributing docs (#8883) (Calvin Freitas)
  • 931a9f1 Fix: indent false positive with multi-line await expression (#8837) (薛定谔的猫)
  • 3767cda Update: add no-sync option to allow at root level (fixes #7985) (#8859) (Victor Hom)
  • 1ce553d Docs: Fix wording of minProperties in object-curly-newline (fixes #8874) (#8878) (solmsted)
  • f00854e Fix: --quiet no longer fixes warnings (fixes #8675) (#8858) (Kevin Partington)
  • b678535 Chore: Add collapsible block for config in ISSUE_TEMPLATE (#8872) (Gyandeep Singh)
  • 1f5bfc2 Update: Add always-multiline option to multiline-ternary (fixes #8770) (#8841) (Nathan Woltman)
  • 22116f2 Fix: correct comma-dangle JSON schema (#8864) (Evgeny Poberezkin)
  • 676af9e Update: fix indentation of JSXExpressionContainer contents (fixes #8832) (#8850) (Teddy Katz)
  • 330dd58 Chore: fix title of linter test suite (#8861) (Teddy Katz)
  • 60099ed Chore: enable for-direction rule on ESLint codebase (#8853) (薛定谔的猫)
  • e0d1a84 Chore: upgrade eslint-plugin-eslint-plugin & eslint-plugin-node (#8856) (薛定谔的猫)
  • 0780d86 Chore: remove identical tests (#8851) (Teddy Katz)
  • 5c3ac8e Fix: arrow-parens fixer gets tripped up with trailing comma in args (#8838) (薛定谔的猫)
  • c4f2e29 Build: fix race condition in demo (#8827) (Teddy Katz)
  • c693be5 New: Allow passing a function as fix option (fixes #8039) (#8730) (Ian VanSchooten)
  • 8796d55 Docs: add missing item to 4.0 migration guide table of contents (#8835) (薛定谔的猫)
  • 742998c doc md update: false -> false (#8825) (Erik Vold)
  • ce969f9 Docs: add guidelines for patch release communication (fixes #7277) (#8823) (Teddy Katz)
  • 5c83c99 Docs: Clarify arrow function parens in no-extra-parens (fixes #8741) (#8822) (Kevin Partington)
  • 84d921d Docs: Added note about Node/CJS scoping to no-redeclare (fixes #8814) (#8820) (Kevin Partington)
  • 85c9327 Update: fix parenthesized CallExpression indentation (fixes #8790) (#8802) (Teddy Katz)
  • be8d354 Update: simplify variable declarator indent handling (fixes #8785) (#8801) (Teddy Katz)
  • 9417818 Fix: no-debugger autofixer produced invalid syntax (#8806) (Teddy Katz)
  • 8698a92 New: getter-return rule (fixes #8449) (#8460) (薛定谔的猫)
  • eac06f2 Fix: no-extra-parens false positives for variables called "let" (#8808) (Teddy Katz)
  • 616587f Fix: dot-notation autofix produces syntax errors for object called "let" (#8807) (Teddy Katz)
  • a53ef7e Fix: don't require a third argument in linter.verifyAndFix (fixes #8805) (#8809) (Teddy Katz)
  • 5ad8b70 Docs: add minor formatting improvement to paragraph about parsers (#8816) (Teddy Katz)
Commits

The new version differs by 38 commits.

  • 5ea79dc 4.2.0
  • b19ee3f Build: changelog update for 4.2.0
  • e0f0101 Update: fix indentation of nested function parameters (fixes #8892) (#8900)
  • 9f95a3e Chore: remove unused helper method from indent (#8901)
  • 11ffe6b Fix: no-regex-spaces rule incorrectly fixes quantified spaces (#8773)
  • 975dacf Update: fix indentation of EmptyStatements (fixes #8882) (#8885)
  • 88ed041 Build: Turnoff CI branch build (fixes #8804) (#8873)
  • 72f22eb Chore: replace is-my-json-valid with Ajv (#8852)
  • 7c8de92 Docs: Clarified PR guidelines in maintainer guide (#8876)
  • d1fc408 Docs: Update CLA link in Contributing docs (#8883)
  • 931a9f1 Fix: indent false positive with multi-line await expression (#8837)
  • 3767cda Update: add no-sync option to allow at root level (fixes #7985) (#8859)
  • 1ce553d Docs: Fix wording of minProperties in object-curly-newline (fixes #8874) (#8878)
  • f00854e Fix: --quiet no longer fixes warnings (fixes #8675) (#8858)
  • b678535 Chore: Add collapsible block for config in ISSUE_TEMPLATE (#8872)

There are 38 commits in total.

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Issue when importing styles

Nice boilerplate - everything worked for me except...

The 3rd import in components\header\index.js import style from './style'; returns an empty object - everything else builds fine with no errors in console I tried logging the import like so:

import style from './style';

function printStyle() {
    for (var i in style) {
        console.log(style[i]);
    }
    console.log(style);
}

printStyle();

and it is indeed empty... any ideas?

"no-unused-vars" rule shuld not be disabled

I’ve noticed this rule in the ESLint config:

"no-unused-vars": [0, { "varsIgnorePattern": "^h$" }]

The zero means that this rule is turned off, meaning unused variables will not be reported (at all).

I have just started writing a Preact web app, and I have found the following ESLint config to work well. It uses the eslint-plugin-react with its recommended rules. Unused variables are correctly reported, while components used in JSX as well the h pragma are recognized (so they’re not reported as unused variables).

{
    "parser": "babel-eslint",
    "plugins": ["react"],
    "extends": ["eslint:recommended", "plugin:react/recommended"],
    "env": {
        "browser": true
    },
    "settings": {
        "react": {
            "pragma": "h"
        }
    }
}

It might be worth checking if eslint-plugin-react is compatible with Preact apps. I have just started writing my own app, so I can’t tell yet, but I can report back in a few weeks.

Build issue

[email protected] / node/7.5.0

I cloned the repo and ran npm install. When running 'npm run build' or 'npm run dev' I get the following error:

npm run build

> [email protected] prebuild /Users/main12/Projects/fun/preact/aphorism2
> mkdirp build && ncp src/assets build/assets


> [email protected] build /Users/main12/Projects/fun/preact/aphorism2
> cross-env NODE_ENV=production webpack -p --progress

module.js:472
    throw err;
    ^

Error: Cannot find module './lib/plugin.js'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/main12/Projects/fun/preact/aphorism2/node_modules/script-ext-html-webpack-plugin/index.js:3:36)
    at Module._compile (module.js:571:32)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/main12/Projects/fun/preact/aphorism2/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/main12/Projects/fun/preact/aphorism2/webpack.config.babel.js:10:1)
    at Module._compile (module.js:571:32)
    at loader (/Users/main12/Projects/fun/preact/aphorism2/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/main12/Projects/fun/preact/aphorism2/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)

npm ERR! Darwin 15.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v7.5.0
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `cross-env NODE_ENV=production webpack -p --progress`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'cross-env NODE_ENV=production webpack -p --progress'.

Switch to yarn?

People who are using hot new tech like Preact will most likely be familiar with yarn by now.

Profile counter does not increment

the profile mount counter does not increment beyond 1

Expected behavior - every time you navigate away from a profile it should retain its state.count

current behavior - navigating to a profile resets state.count to 0 then increments it to 1

404 \ Page not found when deploying to Netlify

I'm not sure if other static site servers / platforms are all like that, but if we deploy this to Netlify we can only navigate from index.html to other pages using Links, once your refresh or type a URL directly in the address bar we'll get 404

In order to get History push state to work we need to add this re-write rule:

/*    /index.html   200

which can be in a file for Netlify in the repo root.

Can we add this directly? as I can see Netlify support is welcome in the Preact repo.

HMR failed when using setState

For minimal working code that reproduce issue:

import { h, Component } from 'preact';

export default class Home extends Component {
  state = { tick: 0 };

  componentDidMount() {
    setInterval(() => this.setState({ tick: this.state.tick + 1 }), 1000);
  }

  render({}, { tick }) {
    return (
	<div>hello {tick}</div>
    );
  }
}

Steps to reproduce:

  • Try to change layout in render()

Actual result:
Screen flickers twice, first time with old data (like previous state), than with new state

Expected:
Correct HMR replace of DOM.

preact-boilerplate-bug

package.json
{
  "name": "penguins-team-webapp",
  "version": "2.0.0",
  "description": "Progressive web application for Penguins Team",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress",
    "start": "superstatic build -p 8080 --host 0.0.0.0 --gzip -c '{\"rewrites\": [{\"source\":\"**\",\"destination\":\"index.html\"}],\"headers\":[{\"source\":\"**\",\"headers\":[{\"key\":\"Cache-Control\",\"value\":\"max-age=86400\"}]}]}'",
    "prestart": "npm run build",
    "build": "cross-env NODE_ENV=production webpack -p --progress",
    "prebuild": "mkdirp build && ncp src/assets build/assets",
    "lint": "eslint {src,test}"
  },
  "keywords": [
    "preact"
  ],
  "license": "MIT",
  "author": "Ostap Chervak <[email protected]>",
  "devDependencies": {
    "autoprefixer": "^6.5.3",
    "babel": "^6.5.2",
    "babel-core": "^6.18.2",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.8",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-react-jsx": "^6.8.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-es2015-minimal": "^2.1.0",
    "babel-preset-stage-0": "^6.16.0",
    "babel-register": "^6.18.0",
    "babel-runtime": "^6.18.0",
    "cross-env": "^3.1.3",
    "css-loader": "^0.26.0",
    "eslint": "^3.10.2",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.24.1",
    "json-loader": "^0.5.4",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "mkdirp": "^0.5.1",
    "ncp": "^2.0.0",
    "node-sass": "^3.13.0",
    "path": "^0.12.7",
    "postcss-loader": "^1.1.1",
    "raw-loader": "^0.5.1",
    "sass-loader": "^4.0.2",
    "source-map-loader": "^0.1.5",
    "style-loader": "^0.13.1",
    "superstatic": "^4.0.3",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "preact": "^6.4.0",
    "preact-compat": "^3.9.2",
    "preact-router": "^2.3.2"
  }
}
webpack.config.babel.js
import webpack from 'webpack';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import autoprefixer from 'autoprefixer';
import path from 'path';

const ENV = process.env.NODE_ENV || 'development';

const CSS_MAPS = ENV!=='production';

module.exports = {
  context: path.resolve(__dirname, "src"),
  entry: './index.js',

  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: '/',
    filename: 'bundle.js'
  },

  resolve: {
    extensions: ['', '.jsx', '.js', '.json', '.less'],
    modulesDirectories: [
      path.resolve(__dirname, "src/lib"),
      path.resolve(__dirname, "node_modules"),
      'node_modules'
    ],
    alias: {
      components: path.resolve(__dirname, "src/components"),		// used for tests
      style: path.resolve(__dirname, "src/style"),
      'react': 'preact-compat',
      'react-dom': 'preact-compat'
    }
  },

  module: {
    preLoaders: [
      {
        test: /\.jsx?$/,
        exclude: /src\//,
        loader: 'source-map'
      }
    ],
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /\.(less|css)$/,
        include: /src\/components\//,
        loader: ExtractTextPlugin.extract('style?singleton', [
          `css?sourceMap=${CSS_MAPS}&modules&importLoaders=1&localIdentName=[local]${process.env.CSS_MODULES_IDENT || '_[hash:base64:5]'}`,
          'postcss',
          `less?sourceMap=${CSS_MAPS}`
        ].join('!'))
      },
      {
        test: /\.(less|css)$/,
        exclude: /src\/components\//,
        loader: ExtractTextPlugin.extract('style?singleton', [
          `css?sourceMap=${CSS_MAPS}`,
          `postcss`,
          `less?sourceMap=${CSS_MAPS}`
        ].join('!'))
      },
      {
        test: /\.(scss|css)$/,
        include: /src\/components\//,
        loader: ExtractTextPlugin.extract('style?singleton', [
          `css?sourceMap=${CSS_MAPS}&modules&importLoaders=1&localIdentName=[local]${process.env.CSS_MODULES_IDENT || '_[hash:base64:5]'}`,
          'postcss',
          `sass?sourceMap=${CSS_MAPS}`
        ].join('!'))
      },
      {
        test: /\.(scss|css)$/,
        exclude: /src\/components\//,
        loader: ExtractTextPlugin.extract('style?singleton', [
          `css?sourceMap=${CSS_MAPS}`,
          `postcss`,
          `sass?sourceMap=${CSS_MAPS}`
        ].join('!'))
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.(xml|html|txt|md)$/,
        loader: 'raw'
      },
      {
        test: /\.(svg|woff2?|ttf|eot|jpe?g|png|gif)(\?.*)?$/i,
        loader: ENV==='production' ? 'file?name=[path][name]_[hash:base64:5].[ext]' : 'url'
      }
    ]
  },

  postcss: () => [
    autoprefixer({ browsers: 'last 2 versions' })
  ],

  plugins: ([
    new webpack.NoErrorsPlugin(),
    new ExtractTextPlugin('style.css', {
      allChunks: true,
      disable: ENV!=='production'
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.DefinePlugin({
      'process.env': JSON.stringify({ NODE_ENV: ENV })
    }),
    new HtmlWebpackPlugin({
      template: './index.html',
      minify: { collapseWhitespace: true }
    })
  ]).concat(ENV==='production' ? [
    new webpack.optimize.OccurenceOrderPlugin()
  ] : []),

  stats: { colors: true },

  node: {
    global: true,
    process: false,
    Buffer: false,
    __filename: false,
    __dirname: false,
    setImmediate: false
  },

  devtool: ENV==='production' ? 'source-map' : 'cheap-module-eval-source-map',

  devServer: {
    port: process.env.PORT || 8080,
    host: '0.0.0.0',
    colors: true,
    publicPath: '/',
    contentBase: './src',
    historyApiFallback: true
  }
};

How about a preact-cli or something like this?

It's necessary for these react-like libraries to serve a tool to generate initial develop environment,Which we can be used to preact-cli init Myproject to set up the project or preact-cli release to release the project instead of git clone - rm -surge way.

An in-range update of preact is breaking the build 🚨

Version 8.2.2 of preact just got published.

Branch Build failing 🚨
Dependency preact
Current Version 8.2.1
Type dependency

This version is covered by your current version range and after updating it in your project the build failed.

preact is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Status Details
  • continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

Commits

The new version differs by 11 commits.

  • adceb20 8.2.2
  • a42390d Update rollup and modify configs accordingly (fixes #800)
  • 99c856d preact/debug: Allow string refs when preact-compat is present (fixes #807)
  • ec80880 Fix issue where preact/debug errored if preact-compat was not present
  • 5645573 Add prepublishOnly script (#825)
  • 4ea1bc7 Move donation message to scripts (#804)
  • 0dea3b7 Add rugby board as an example (#821)
  • 68fa510 Fix preact/debug accessing attributes that don't have toString (#754)
  • 0a88752 Update import paths for #792 (#796)
  • 1b2b106 Minor capitalization correction for GitHub in README (#787)
  • 947d9d8 Weui for preact (#793)

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

npm run build is failing

I have taken a fresh checkout and was trying to build the project using npm run build ,giving below error

> [email protected] build /Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate
> cross-env NODE_ENV=production webpack -p --progress

node_modules/nan
resolve failed:  { Error: Cannot find module 'caniuse-db'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.requireRelative.resolve (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/require-relative/index.js:30:17)
    at resolve (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/modify-babel-preset/lib/serialize.js:26:26)
    at findAndRemove (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/modify-babel-preset/lib/serialize.js:83:11)
    at /Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/modify-babel-preset/lib/serialize.js:126:13
    at Array.map (native)
    at loadPreset (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/modify-babel-preset/lib/serialize.js:118:29)
    at module.exports (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/modify-babel-preset/index.js:95:19)
    at Object.<anonymous> (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/babel-preset-es2015-minimal/index.js:5:18)
    at Module._compile (module.js:570:32)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17) code: 'MODULE_NOT_FOUND' } caniuse-db
resolve failed:  { Error: Cannot find module 'babel-runtime'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.requireRelative.resolve (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/require-relative/index.js:30:17)
    at resolve (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/modify-babel-preset/lib/serialize.js:26:26)
    at findAndRemove (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/modify-babel-preset/lib/serialize.js:83:11)
    at /Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/modify-babel-preset/lib/serialize.js:126:13
    at Array.map (native)
    at loadPreset (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/modify-babel-preset/lib/serialize.js:118:29)
    at module.exports (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/modify-babel-preset/index.js:95:19)
    at Object.<anonymous> (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/babel-preset-es2015-minimal/index.js:5:18)
    at Module._compile (module.js:570:32)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17) code: 'MODULE_NOT_FOUND' } babel-runtime
resolve failed:  { Error: Cannot find module 'webpack-core'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.requireRelative.resolve (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/require-relative/index.js:30:17)
    at resolve (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/modify-babel-preset/lib/serialize.js:26:26)
    at findAndRemove (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/modify-babel-preset/lib/serialize.js:83:11)
    at /Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/modify-babel-preset/lib/serialize.js:126:13
    at Array.map (native)
    at loadPreset (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/modify-babel-preset/lib/serialize.js:118:29)
    at module.exports (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/modify-babel-preset/index.js:95:19)
    at Object.<anonymous> (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/babel-preset-es2015-minimal/index.js:5:18)
    at Module._compile (module.js:570:32)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/kuldeepkeshwar/Desktop/poc/preact-boilerplate/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17) code: 'MODULE_NOT_FOUND' } webpack-core
Hash: f6e0b6ceee5a5cfee80f  
Version: webpack 1.14.0

I have even tried npm i babel-runtime webpack-core caniuse-db --save but still same result

HMR - Home not trigger render?

Other page is fine but HMR at Home page didn't render after modified code. and I need to add componentDidMount to made it work for some reason.

import { h, Component } from 'preact';
import style from './style';

export default class Home extends Component {
    // Not sure why I need this to make HMR work?
    componentDidMount() {
        this.setState(this.state);
    }

    render() {
        return (
            <div class={style.home}>
                <h1></h1>
                <p>This is the Home component.</p>
            </div>
        );
    }
}

I'm not sure I doing it right btw. any advice is welcome. Thanks.

code coverage

what's the best way of adding some code coverage to this? finding it hard to implement, was trying to use karma-coverage but cant get webpack to play nicely with it.

Don't optimize code twice

The build script is specified as the following:

cross-env NODE_ENV=production webpack -p --progress

Which to my understanding, based on the link below, applies optimizations twice.

Which in turn produces the following error:

ERROR in bundle.js from UglifyJs
TypeError: Cannot read property 'sections' of null
    at new SourceMapConsumer (/Users/krokofant/GitHub/preact-todo/node_modules/source-map/lib/source-map-consumer.js:20:19)
    at /Users/krokofant/GitHub/preact-todo/node_modules/uglifyjs-webpack-plugin/dist/index.js:75:21

Solution
Reference webpack/webpack#1385 (comment)

when using new UglifyJsPlugin and --opimize-minimize (or -p) you are adding the UglifyJsPlugin twice. Omit the CLI option.
-sokra

Perhaps the build script should be changed then to omit the -p option?

Why use both import and require?

In the file /src/index.js the first few lines are imports but then at line 8 a require is made with the addition of .default. That additional property being called means the file was exported using a native export. This import should instead be at the top using a native import.

Why it uses preact-compat?

this project is for demonstrate the power of preact itself not react compatibility!
Is there a way create pure preact-boilerplate, without react components?

An in-range update of eslint-plugin-jest is breaking the build 🚨

Version 20.0.3 of eslint-plugin-jest just got published.

Branch Build failing 🚨
Dependency eslint-plugin-jest
Current Version 20.0.2
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-plugin-jest is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details
  • continuous-integration/travis-ci/push The Travis CI build failed Details

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Profile route mounted count stays at 1

I've been tinkering with this and its a nice setup but I don't quite understand how the router and component mount methods work. Whenever I click the 'Me' or 'John' profile links the route mounted stays at 1.

Checked it on the latest versions of firefox and safari. I added some breakpoints and found that the component mount methods are never invoked on clicking the profile links. Couldn't even to get it to stop on the App's handleRoute.

Have I misunderstood how this is meant to work? Any help appreciated, Thanks.

Example render broken when route?

When I navigate by click the link e.g. Me, John . It seem like page render not correctly it only show partial content below.

Preact Boilerplate

HomeMeJohn

Only home is fine at first render, btw with preact@beta seem to be working perfectly (except missing style), 5.x look broken to me.
FYI : I test this on Windows

jest won't run

git clone https://github.com/developit/preact-boilerplate
cd preact-boilerplate
yarn
npm run test

And it seems it does nothing 😕

Linting errors does work but the jest part does not seem to work.

env
zsh
macOS Sierra 10.12.3
node v8.1.2
npm 5.0.3
preact-boilerplate 6.0.0/master

Anyone with a similar environment where it runs okay? I'm not sure how to proceed debugging this. I want tests 😁

Build does not work on Windows

C:\ws\preact-boilerplate>npm run dev

> [email protected] dev C:\ws\preact-boilerplate
> NODE_ENV=development webpack-dev-server --inline --hot --progress

'NODE_ENV' is not recognized as an internal or external command,
operable program or batch file.

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Frank\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v5.4.0
npm ERR! npm  v3.5.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `NODE_ENV=development webpack-dev-server --inline --hot --progress`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'NODE_ENV=development webpack-dev-server --inline --hot --progress'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the preact-boilerplate package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     NODE_ENV=development webpack-dev-server --inline --hot --progress
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs preact-boilerplate
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls preact-boilerplate
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\ws\preact-boilerplate\npm-debug.log

I am busy preparing a PR for this.

SEE: Download#3

Small a11y improvement to consider.

The meta viewport currently uses maximum-scale=1.0, user-scalable=no which is considered a bit of an anti-pattern for accessibility because it limits a user's ability to zoom the page. I believe mobile browsers ignore these directives, or they can be overridden via a user setting. But I'd suggest removing them entirely from the boilerplate so as not to encourage the pattern.

Missing caniuse-db and webpack-core module issue on Windows 10

This is what I'm seeing:

C:\Users\yuv\Downloads\tmp\pbp>yarn run dev
yarn run v0.17.10
$ cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress
node_modules\nan
resolve failed:  { Error: Cannot find module 'caniuse-db'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.requireRelative.resolve (C:\Users\yuv\Downloads\tmp\pbp\node_modules\require-relative\index.js:30:17)
    at resolve (C:\Users\yuv\Downloads\tmp\pbp\node_modules\modify-babel-preset\lib\serialize.js:26:26)
    at findAndRemove (C:\Users\yuv\Downloads\tmp\pbp\node_modules\modify-babel-preset\lib\serialize.js:83:11)
    at C:\Users\yuv\Downloads\tmp\pbp\node_modules\modify-babel-preset\lib\serialize.js:126:13
    at Array.map (native)
    at loadPreset (C:\Users\yuv\Downloads\tmp\pbp\node_modules\modify-babel-preset\lib\serialize.js:118:29)
    at module.exports (C:\Users\yuv\Downloads\tmp\pbp\node_modules\modify-babel-preset\index.js:95:19)
    at Object.<anonymous> (C:\Users\yuv\Downloads\tmp\pbp\node_modules\babel-preset-es2015-minimal\index.js:5:18)
    at Module._compile (module.js:571:32)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (C:\Users\yuv\Downloads\tmp\pbp\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17) code: 'MODULE_NOT_FOUND' } caniuse-db
resolve failed:  { Error: Cannot find module 'babel-runtime'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.requireRelative.resolve (C:\Users\yuv\Downloads\tmp\pbp\node_modules\require-relative\index.js:30:17)
    at resolve (C:\Users\yuv\Downloads\tmp\pbp\node_modules\modify-babel-preset\lib\serialize.js:26:26)
    at findAndRemove (C:\Users\yuv\Downloads\tmp\pbp\node_modules\modify-babel-preset\lib\serialize.js:83:11)
    at C:\Users\yuv\Downloads\tmp\pbp\node_modules\modify-babel-preset\lib\serialize.js:126:13
    at Array.map (native)
    at loadPreset (C:\Users\yuv\Downloads\tmp\pbp\node_modules\modify-babel-preset\lib\serialize.js:118:29)
    at module.exports (C:\Users\yuv\Downloads\tmp\pbp\node_modules\modify-babel-preset\index.js:95:19)
    at Object.<anonymous> (C:\Users\yuv\Downloads\tmp\pbp\node_modules\babel-preset-es2015-minimal\index.js:5:18)
    at Module._compile (module.js:571:32)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (C:\Users\yuv\Downloads\tmp\pbp\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17) code: 'MODULE_NOT_FOUND' } babel-runtime
resolve failed:  { Error: Cannot find module 'webpack-core'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.requireRelative.resolve (C:\Users\yuv\Downloads\tmp\pbp\node_modules\require-relative\index.js:30:17)
    at resolve (C:\Users\yuv\Downloads\tmp\pbp\node_modules\modify-babel-preset\lib\serialize.js:26:26)
    at findAndRemove (C:\Users\yuv\Downloads\tmp\pbp\node_modules\modify-babel-preset\lib\serialize.js:83:11)
    at C:\Users\yuv\Downloads\tmp\pbp\node_modules\modify-babel-preset\lib\serialize.js:126:13
    at Array.map (native)
    at loadPreset (C:\Users\yuv\Downloads\tmp\pbp\node_modules\modify-babel-preset\lib\serialize.js:118:29)
    at module.exports (C:\Users\yuv\Downloads\tmp\pbp\node_modules\modify-babel-preset\index.js:95:19)
    at Object.<anonymous> (C:\Users\yuv\Downloads\tmp\pbp\node_modules\babel-preset-es2015-minimal\index.js:5:18)
    at Module._compile (module.js:571:32)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (C:\Users\yuv\Downloads\tmp\pbp\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17) code: 'MODULE_NOT_FOUND' } webpack-core
 70% 1/1 build modules http://0.0.0.0:8080/
webpack result is served from /
content is served from ./src
404s will fallback to /index.html
Hash: e4c77e621fd5ebe73204

The problem does not go away with yarn add caniuse-db, or by using npm.

Unused dependency

I think many dependency is never use but still include? e.g. decko, wildemitter and maybe something else that I'm not sure it use somewhere or not, so it should be nicer to clean it up?

npm run build failes

I cloned the boilerplate today and follwed the setup instructions.
The serve workes on localhost:8080 but when i try to build i get the following error:

sperb003@L0139230-3 ~/work/scola/classmobile $ npm run build

[email protected] build /home/sperb003/work/scola/classmobile_preact_self
preact build

./src/components/app.js
Module build failed: SyntaxError: Unexpected token (15:13)

13 | * @param {string} event.url The newly routed URL
14 | */

15 | handleRoute = e => {
| ^
16 | this.currentUrl = e.url;
17 | };
18 |

@ ./src/index.js 9:11-38
@ multi ./src/index.js
Build failed!
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: preact build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/sperb003/.npm/_logs/2017-08-22T08_16_04_205Z-debug.log

The JS error seems to me to be valid ES6 syntax, so I don't understand the error message.
The mentioned log file:

0 info it worked if it ends with ok
1 verbose cli [ '/home/sperb003/.nvm/versions/node/v8.4.0/bin/node',
1 verbose cli '/home/sperb003/.nvm/versions/node/v8.4.0/bin/npm',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]prebuild: [email protected]
6 info lifecycle [email protected]
build: [email protected]
7 verbose lifecycle [email protected]build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]
build: PATH: /home/sperb003/.nvm/versions/node/v8.4.0/lib/node_modules/npm/bin/node-gyp-bin:/home/sperb003/work/scola/classmobile_preact_self/node_modules/.bin:/home/sperb003/.nvm/versions/node/v8.4.0/bin:/home/sperb003/bin:/home/sperb003/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games
9 verbose lifecycle [email protected]build: CWD: /home/sperb003/work/scola/classmobile_preact_self
10 silly lifecycle [email protected]
build: Args: [ '-c', 'preact build' ]
11 silly lifecycle [email protected]build: Returned: code: 1 signal: null
12 info lifecycle [email protected]
build: Failed to exec build script
13 verbose stack Error: [email protected] build: preact build
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (/home/sperb003/.nvm/versions/node/v8.4.0/lib/node_modules/npm/lib/utils/lifecycle.js:289:16)
13 verbose stack at emitTwo (events.js:125:13)
13 verbose stack at EventEmitter.emit (events.js:213:7)
13 verbose stack at ChildProcess. (/home/sperb003/.nvm/versions/node/v8.4.0/lib/node_modules/npm/lib/utils/spawn.js:40:14)
13 verbose stack at emitTwo (events.js:125:13)
13 verbose stack at ChildProcess.emit (events.js:213:7)
13 verbose stack at maybeClose (internal/child_process.js:927:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/sperb003/work/scola/classmobile_preact_self
16 verbose Linux 4.10.0-32-generic
17 verbose argv "/home/sperb003/.nvm/versions/node/v8.4.0/bin/node" "/home/sperb003/.nvm/versions/node/v8.4.0/bin/npm" "run" "build"
18 verbose node v8.4.0
19 verbose npm v5.3.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: preact build
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.

I tried switching to npm 4 but that gives the same error.

An in-range update of autoprefixer is breaking the build 🚨

Version 7.1.6 of autoprefixer was just published.

Branch Build failing 🚨
Dependency autoprefixer
Current Version 7.1.5
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

autoprefixer is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • continuous-integration/travis-ci/push The Travis CI build failed Details

Release Notes 7.1.6
  • Add warning for using browserslist option instead of browsers.
  • Add warning for multiple control comments in the same scope.
  • Fix Invalid array length error during indent changes.
FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

Preact devtools: "Node was Deleted" when any component is edited.

screen shot 2017-10-12 at 12 21 30 pm

Hey there! It seems with the current state of this boilerplate repo, when running "yarn dev" and updating any of the preact components, ReactDev tools loses it's node binding (see screenshot).

Steps to replicate:
1- checkout repo
2- $ yarn install
3- $ yarn dev
4- open instance in browser and inspect any element in ReactDevTools
5- edit any of the components, eg. /components/header/index.js
6- save
7- ReactDevTools removes the node, and simply displays "Node was deleted".

FYI, i've also tried updating Webpack, Webpack-dev-server and Preact to the very latest versions. No joy.
"preact": "^8.2.5",
"webpack": "^3.7.1",
"webpack-dev-server": "^2.9.1"

Class is empty when build via Windows

Here's different
On mac (working fine <header class="header_3fP58">)
screen shot 2016-09-01 at 22 27 33

t["default"]=s},function(e,t){},function(e,t){e.exports={header:"header_3fP58"}},function(e,t){e.exports={home:"home_2xyY2"}},function(e,t){e.exports={profile:"profile_JmD9R"}}]);
//# sourceMappingURL=bundle.js.map

On Windows (appear <header class>)
screen shot 2016-09-01 at 22 27 42

t["default"]=s},function(e,t){},7,7,7]));
//# sourceMappingURL=bundle.js.map

As you can see some export is missing on Windows build, Any idea? Maybe some build script is working only on Mac?

An in-range update of webpack is breaking the build 🚨

Version 3.7.1 of webpack was just published.

Branch Build failing 🚨
Dependency webpack
Current Version 3.7.0
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • continuous-integration/travis-ci/push The Travis CI build failed Details

Release Notes v3.7.1

Bugfixes

  • fix crash for undefined optional in ExternalModule (@STRML)
Commits

The new version differs by 3 commits.

  • ce24e98 3.7.1
  • 15fe297 Merge pull request #5807 from STRML/fix/externalModule
  • c9bad17 Fix #5806, TypeError on ExternalModule hash.update

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

ERROR in bundle.js from UglifyJs

I got this error when I try to run the build of my preact-boilerplate

`SyntaxError:`` Unexpected token: operator (>) [bundle.js:6613,70]

PostCSS not working

Hello :)

The project I'm working on is using Flexbox, but it has to work on IE 10 and IE 11. Display: flex; should output display: flex; display: -ms-flexbox, but seems like PostCSS is not working because the outputed CSS has no autoprefixed value.

It's an out-of-the-box implementation. Git clone && npm install. Just changed the browsers lists to ['last 2 versions', 'Explorer > 8']

Thank you!

port number problem

Whenever I call npm start, I have error "port" argument must be >= 0 and < 65536". I have installed serve as global.

Module not found errors on windows

Windows user here! 😐
While starting the webpack server by command- webpack-dev-server --inline --hot --progress, I'm getting Module not found errors.

ERROR in ./src/style/index.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../node_modules/css-loader/index.js in D:\learning\preact\my-app/src\style
 @ ./src/style/index.less 4:14-197 13:2-17:4 14:20-203

ERROR in ./src/style/index.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../node_modules/style-loader/addStyles.js in D:\learning\preact\my-app/src\style
 @ ./src/style/index.less 7:13-71

ERROR in ./src/components/home/style.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../node_modules/css-loader/index.js in D:\learning\preact\my-app/src\components\home
 @ ./src/components/home/style.less 4:14-206 13:2-17:4 14:20-212

ERROR in ./src/components/home/style.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../node_modules/style-loader/addStyles.js in D:\learning\preact\my-app/src\components\home
 @ ./src/components/home/style.less 7:13-74

ERROR in ./src/components/profile/style.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../node_modules/css-loader/index.js in D:\learning\preact\my-app/src\components\profile
 @ ./src/components/profile/style.less 4:14-206 13:2-17:4 14:20-212

ERROR in ./src/components/profile/style.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../node_modules/style-loader/addStyles.js in D:\learning\preact\my-app/src\components\profile
 @ ./src/components/profile/style.less 7:13-74

ERROR in ./src/components/header/style.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../node_modules/css-loader/index.js in D:\learning\preact\my-app/src\components\header
 @ ./src/components/header/style.less 4:14-206 13:2-17:4 14:20-212

ERROR in ./src/components/header/style.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../node_modules/style-loader/addStyles.js in D:\learning\preact\my-app/src\components\header
 @ ./src/components/header/style.less 7:13-74
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 502 bytes [rendered]
        [0] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 502 bytes {0} [built]
webpack: bundle is now VALID.

Tried cleaning npm cache and running npm install again but no luck.
Any suggestions/ideas would be helpful.

superstatic route rewrite needs to be updated

In the "start" npm command, it is starting superstatic with a rewrite of all paths to index.html, but the configuration of that route is not working with [email protected]. Current setup:

"start": "superstatic build -p ${PORT:-8080} --host 0.0.0.0 --gzip -c '{\"routes\":{\"**\":\"index.html\"},\"cache_control\":{\"**\":86400}}'",

I fixed it in my local instance by setting the setting to:

  "start": "superstatic build -p ${PORT:-8080} --host 0.0.0.0 --gzip -c '{\"rewrites\": [{\"source\":\"**\",\"destination\":\"index.html\"}],\"cache_control\":{\"**\":86400}}'",

An in-range update of webpack is breaking the build 🚨

Version 2.6.1 of webpack just got published.

Branch Build failing 🚨
Dependency webpack
Current Version 2.6.0
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As webpack is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details
  • continuous-integration/travis-ci/push The Travis CI build failed Details

Release Notes v2.6.1

Bugfixes:

  • Promise is now only needed when loading chunk, not in initialization
  • variable injection in require.ensure is now working again
  • better comment message when no export found (output.pathinfo)
Commits

The new version differs by 7 commits.

  • 7cfd2c4 2.6.1
  • 5ec15f8 Merge pull request #4927 from webpack/bugfix/require-ensure-var-inject
  • da08b89 fix variable injection in require.ensure
  • 0dd0830 Merge pull request #4923 from webpack/bugfix/promise-later
  • 09d9533 Use Promise only when chunk load is triggered
  • ae389b0 Merge pull request #4918 from marzelin/master
  • 08615a2 change description when no static exports found

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

error webpack

Hi

thank you for making this starter kit.
I have a problem: whenever I try to pack the project or run the project I get the following error. It seems like it does not understand the import statements

import webpack from 'webpack';
^^^^^^

SyntaxError: Unexpected token import
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at loader (/usr/local/lib/node_modules/babel-register/lib/node.js:130:5)
at Object.require.extensions.(anonymous function) as .js
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at module.exports (/usr/local/lib/node_modules/webpack/bin/convert-argv.js:93:13)
at Object. (/usr/local/lib/node_modules/webpack/bin/webpack.js:114:40)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.