Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Build fails after adding `preact-material-components/Select`

See original GitHub issue

Hello,

Thanks for making this available for preact!

Keep getting the following build error / failure when adding import Select from 'preact-material-components/Select'; into my project:

92% chunk asset optimization/Users/zdeveloper/Projects/awesomeui/node_modules/webpack-sources/node_modules/source-map/lib/source-node.js:121
        node.add(nextLine.substr(0, mapping.generatedColumn));
                         ^

TypeError: Cannot read property 'substr' of undefined
    at Function.<anonymous> (/Users/zdeveloper/Projects/awesomeui/node_modules/webpack-sources/node_modules/source-map/lib/source-node.js:121:26)
    at Array.forEach (native)
    at SourceMapConsumer_eachMapping [as eachMapping] (/Users/zdeveloper/Projects/awesomeui/node_modules/webpack-sources/node_modules/source-map/lib/source-map-consumer.js:155:14)
    at Function.SourceNode_fromStringWithSourceMap [as fromStringWithSourceMap] (/Users/zdeveloper/Projects/awesomeui/node_modules/webpack-sources/node_modules/source-map/lib/source-node.js:86:24)
    at SourceMapSource.node (/Users/zdeveloper/Projects/awesomeui/node_modules/webpack-sources/lib/SourceMapSource.js:39:21)
    at ReplaceSource.node (/Users/zdeveloper/Projects/awesomeui/node_modules/webpack-sources/lib/ReplaceSource.js:70:30)
    at CachedSource.node (/Users/zdeveloper/Projects/awesomeui/node_modules/webpack-sources/lib/CachedSource.js:18:24)
    at /Users/zdeveloper/Projects/awesomeui/node_modules/webpack-sources/lib/ConcatSource.js:37:50
    at Array.map (native)
    at ConcatSource.node (/Users/zdeveloper/Projects/awesomeui/node_modules/webpack-sources/lib/ConcatSource.js:36:63)
    at /Users/zdeveloper/Projects/awesomeui/node_modules/webpack-sources/lib/ConcatSource.js:37:50
    at Array.map (native)
    at ConcatSource.node (/Users/zdeveloper/Projects/awesomeui/node_modules/webpack-sources/lib/ConcatSource.js:36:63)
    at /Users/zdeveloper/Projects/awesomeui/node_modules/webpack-sources/lib/ConcatSource.js:37:50
    at Array.map (native)
    at ConcatSource.node (/Users/zdeveloper/Projects/awesomeui/node_modules/webpack-sources/lib/ConcatSource.js:36:63)
    at /Users/zdeveloper/Projects/awesomeui/node_modules/webpack-sources/lib/ConcatSource.js:37:50
    at Array.map (native)
    at ConcatSource.node (/Users/zdeveloper/Projects/awesomeui/node_modules/webpack-sources/lib/ConcatSource.js:36:63)
    at ConcatSource.proto.map (/Users/zdeveloper/Projects/awesomeui/node_modules/webpack-sources/lib/SourceAndMapMixin.js:16:15)
    at CachedSource.sourceAndMap (/Users/zdeveloper/Projects/awesomeui/node_modules/webpack-sources/lib/CachedSource.js:48:47)
    at getTaskForFile (/Users/zdeveloper/Projects/awesomeui/node_modules/webpack/lib/SourceMapDevToolPlugin.js:33:30)
    at chunk.files.forEach.file (/Users/zdeveloper/Projects/awesomeui/node_modules/webpack/lib/SourceMapDevToolPlugin.js:91:21)
    at Array.forEach (native)
    at /Users/zdeveloper/Projects/awesomeui/node_modules/webpack/lib/SourceMapDevToolPlugin.js:89:18
    at Array.forEach (native)
    at Compilation.<anonymous> (/Users/zdeveloper/Projects/awesomeui/node_modules/webpack/lib/SourceMapDevToolPlugin.js:88:12)
    at Compilation.applyPlugins1 (/Users/zdeveloper/Projects/awesomeui/node_modules/tapable/lib/Tapable.js:75:14)
    at self.applyPluginsAsync.err (/Users/zdeveloper/Projects/awesomeui/node_modules/webpack/lib/Compilation.js:661:11)
    at next (/Users/zdeveloper/Projects/awesomeui/node_modules/tapable/lib/Tapable.js:202:11)

npm ERR! Darwin 16.7.0
npm ERR! argv "/Users/zdeveloper/.nvm/versions/node/v6.9.5/bin/node" "/Users/zdeveloper/.nvm/versions/node/v6.9.5/bin/npm" "run" "build"
npm ERR! node v6.9.5
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! awesomeui@0.0.1 build: `cross-env NODE_ENV=production webpack --config ./webpack.config.babel.js --progress --profile --colors`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the awesomeui@0.0.1 build script 'cross-env NODE_ENV=production webpack --config ./webpack.config.babel.js --progress --profile --colors'.
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 awesomeui package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=production webpack --config ./webpack.config.babel.js --progress --profile --colors
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs awesomeui
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls awesomeui
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/zdeveloper/Projects/awesomeui/npm-debug.log

Webpack config:

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 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'],
		modules: [
			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: {
		rules: [
			{
				test: /\.jsx?$/,
				exclude: path.resolve(__dirname, 'src'),
				enforce: 'pre',
				use: 'source-map-loader'
			},
			{
				test: /\.jsx?$/,
				exclude: /node_modules/,
				use: 'babel-loader'
			},
			{
				// Transform our own .(less|css) files with PostCSS and CSS-modules
				test: /\.(less|css)$/,
				include: [path.resolve(__dirname, 'src/components')],
				use: ExtractTextPlugin.extract({
					fallback: 'style-loader',
					use: [
						{
							loader: 'css-loader',
							options: { modules: true, sourceMap: CSS_MAPS, importLoaders: 1 }
						},
						{
							loader: `postcss-loader`,
							options: {
								sourceMap: CSS_MAPS,
								plugins: () => {
									autoprefixer({ browsers: [ 'last 2 versions' ] });
								}
							}
						},
						{
							loader: 'less-loader',
							options: { strictMath: true, sourceMap: CSS_MAPS }
						}
					]
				})
			},
			{
				test: /\.(less|css)$/,
				exclude: [path.resolve(__dirname, 'src/components')],
				use: ExtractTextPlugin.extract({
					fallback: 'style-loader',
					use: [
						{
							loader: 'css-loader',
							options: { sourceMap: CSS_MAPS, importLoaders: 1 }
						},
						{
							loader: `postcss-loader`,
							options: {
								sourceMap: CSS_MAPS,
								plugins: () => {
									autoprefixer({ browsers: [ 'last 2 versions' ] });
								}
							}
						},
						{
							loader: 'less-loader',
							options: { strictMath: true, sourceMap: CSS_MAPS }
						}
					]
				})
			},
			{
				test: /\.json$/,
				use: 'json-loader'
			},
			{
				test: /\.(xml|html|txt|md)$/,
				use: 'raw-loader'
			},
			{
				test: /\.(svg|woff2?|ttf|eot|jpe?g|png|gif)(\?.*)?$/i,
				use: ENV==='production' ? 'file-loader' : 'url-loader'
			}
		]
	},
	plugins: ([
		new webpack.optimize.UglifyJsPlugin({
			compress: { warnings: false },
			comments: false,
			minimize: false
		}),
		new webpack.NoEmitOnErrorsPlugin(),
		new ExtractTextPlugin({
			filename: '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 webpack.optimize.UglifyJsPlugin({
			output: {
				comments: false
			},
			compress: {
				unsafe_comps: true,
				properties: true,
				keep_fargs: false,
				pure_getters: true,
				collapse_vars: true,
				unsafe: true,
				warnings: false,
				screw_ie8: true,
				sequences: true,
				dead_code: true,
				drop_debugger: true,
				comparisons: true,
				conditionals: true,
				evaluate: true,
				booleans: true,
				loops: true,
				unused: true,
				hoist_funs: true,
				if_return: true,
				join_vars: true,
				cascade: true,
				drop_console: true
			}
		})
	] : []),

	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',
		publicPath: '/',
		contentBase: './src',
		historyApiFallback: true,
		open: false,
		openPage: '',
		proxy: {
			// OPTIONAL: proxy configuration:
			// '/optional-prefix/**': { // path pattern to rewrite
			//   target: 'http://target-host.com',
			//   pathRewrite: path => path.replace(/^\/[^\/]+\//, '')   // strip first path segment
			// }
		}
	}
};

Note- only build fails! npm run dev works fine.

Let me know if additional information needed. Not sure if missing anything from webpack config or this is a bug. Please advise.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
zeligoncommented, Oct 18, 2017

Sorry for the confusion, was under the impression your question is in general respect for my project, where less is used across.

Didn’t make any changes to include / or use scss when tried to import preact-material-components. Only change beside include and use the component was to add ‘strictMath: true’ in config under less (as mentioned in readme file). Hope this clarifies …

0reactions
zeligoncommented, Oct 19, 2017

Sure. Thanks for looking into it!

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to use Select in preact-material-components
Im using preact-material-components on PWA. I want to add a Select Menu so I can do like this: import { h, Component }...
Read more >
How To Use Select In Preact-Material-Components - ADocLib
Check Preact-material-components 1.6.1 package - Last release 1.6.1 with MIT licence at our NPM packages aggregator and search engine. Build fails after adding...
Read more >
React Select component - Material UI - MUI
Select components are used for collecting user provided information from a list of options.
Read more >
preact-material-components
preact -material-components is a thin opinionless wrapper around material-components-web. Use these components to add material components to your web app, ...
Read more >
Strict Mode - React
You can instead make this explicit by passing a ref to your custom component and pass that along to the DOM using ref...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Select width

Next page

Textfield layout breaks when no value