We Keep Coding

Getting error "You may need an appropriate loader to handle this file type." when using Webpack to compile ES6 assets

I using Webpack with Babel to compile ES6 assets in my Nodejs application, but I am getting the following error message:
You may need an appropriate loader to handle this file type.
|
| const addMrnObj = {
| ...jsonObj,
| optionalMrn: optionalMrn
| };
# ./config/eventSource/eventSourceCall.js 5:18-40
# ./src/app.js
# multi ./src/app.js
I am using Webpack of version 2.2.1 and babel-preset-es2015 of version 6.22.0
Below is my babel.rc configuration
{
"presets": [
"es2015"
],
"plugins": [
"transform-flow-strip-types",
"transform-object-rest-spread",
"transform-class-properties",
"syntax-class-properties"
]
}
And this is my Webpack configuration
var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var BabiliPlugin = require('babili-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var BUILD_DIR = path.resolve(__dirname, 'dist');
var APP_DIR = path.resolve(__dirname, 'src');
var config = {
entry: [
APP_DIR + '/app.js',
],
target: 'node',
output: {
path: BUILD_DIR,
filename: 'backend.js'
},
plugins: [
new BabiliPlugin(),
new CopyWebpackPlugin([{
from: './config',
to: 'config'
}])
],
module: {
loaders: [
{
test: /\.js?/,
exclude: /node_modules/,
include: [ APP_DIR ],
loader: 'babel-loader'
}
]
}
};
module.exports = config;
Can someone point out what additional changes I need to make to resolve this error.

Try adding "#babel/preset-env" in babel.rc file under presets(also install presets).
and also your syntax is wrong this should be
{
"presets": ["#babel/preset-es2015"]
}
and file name should be .babelrc not babel.rc

How do I get the docker environment variables available to me in the docker file? (using React/JS/webpack)

dockerfile:
ARG MY_VAR
ENV NODE_ENV production
ENV MY_VAR $MY_VAR
COPY . .
RUN NODE_ENV=development npm install && \
touch ./.env && \
eval env > ./.env && \
npm run build && \
npm prune --production
Docker newb here
In my container I run a env command and see the variables I've set, also when running a node console I can see they are set in process.env
But when my project builds, all my env variables are undefined (they are not available during that RUN command)
The eval env > ./.env && line DOES put the vars I set with ENV command into the .env, but I can't have those variables hardcoded in the dockerfile
I wish I could do something like:
ENV MY_VAR $process.env.MY_VAR
Anything like that to grab my environment variables?
edit:
webpack.config.js:
require('dotenv').config()
const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const BUILD_PATH = path.resolve(__dirname, "./client/build") + '/';
const SOURCE_PATH = path.resolve(__dirname, "./client/src") + '/';
const PUBLIC_PATH = path.resolve(__dirname, "./client/build") + '/';
const env = require('./env')(PUBLIC_PATH)
module.exports = () => {
return {
entry: ["idempotent-babel-polyfill", SOURCE_PATH + "/index.jsx"],
context: SOURCE_PATH,
output: {
path: BUILD_PATH,
filename: "bundle.js",
publicPath: PUBLIC_PATH
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{ loader: "babel-loader" },
]
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
},
{
test: /\.(png|jpg|gif)$/,
exclude: /node_modules/,
use: [
{ loader: "file-loader" }
]
}
]
},
devServer: {
compress: true,
port: 3002,
historyApiFallback: true,
contentBase: BUILD_PATH,
publicPath: PUBLIC_PATH
},
devtool: "eval-source-map",
plugins: [
new webpack.DefinePlugin(env),
new HtmlWebpackPlugin({
filename: "index.html",
template: path.resolve(SOURCE_PATH + "/index.html"),
inject: true
}),
new webpack.optimize.UglifyJsPlugin(),
],
watch: false,
}
};
env.js:
require('dotenv').config()
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in Webpack configuration.
var REACT_APP = /^REACT_APP_/i;
function getClientEnvironment(publicUrl) {
var processEnv = Object
.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce((env, key) => {
env[key] = process.env[key];
return env;
}, {
'NODE_ENV': process.env.NODE_ENV || 'development',
'MY_VAR': process.env.MY_VAR // for example
});
processEnv['process.env'] = Object
.keys(processEnv)
.reduce((env, key) => {
env[key] = JSON.stringify(processEnv[key]);
return env;
}, {})
return processEnv;
}
module.exports = getClientEnvironment;

Doing a build command inside docker's CMD statement solves this issue

Error in React: unknown word when using webpack

I have set up a React environment with webpack and babel. However, when I run webpack-dev-server --progress --colors, I get error like this:
ERROR in multi (webpack)-dev-server/client?http://localhost:8080 E:/src/index.js
Module not found: Error: can't resolve 'E:\src/index.js' in 'E:\personal_projects\web-site-name'
...
(2:1) Unknown word
1: var url = require("url");
^
My webpack.config.js file is this:
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, '/public');
var APP_DIR = path.resolve(__dirname, '/src');
var config = {
entry: APP_DIR + '/index.js',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /(\.css$)/,
loaders: ['style-loader', 'css-loader', 'postcss-loader']
},
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')]
}
}
]
}
};
module.exports = config;
I think there is some problem with babel and it compiling my index.js to my bundle.js file. Any advice on this?

You either need to use path.join or remove your slashes, e.g.
path.resolve(__dirname, '/src');
and other lines using resolve should be
path.resolve(__dirname, 'src');
or
path.join(__dirname, 'src');
or even
path.join(__dirname, '/src');
Your usage of .resolve passes an absolute path /src, meaning that the first argument is essentially discarded.

how to install reactjs npm package correctly

Hi I want to install this reactjs package called react-dropdown-input
https://github.com/RacingTadpole/react-dropdown-input/
I ran this command
$npm install react-dropdown-input --save
in my local folder in git bash. After that I checked my package.json, it says "react-dropdown-input": "^0.1.11" which means i have installed it correctly.
Then i tried to use it in my js file
import React from 'react'
import PropTypes from 'prop-types';
var DocumentTitle = require('react-document-title');
//var DropdownInput = require('react-dropdown-input');
When i added the fifth line, my page just could not load anymore (a blank page)
I dont know how to fix this.
Here's my webpack.config.js
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
const path = require('path');
const webpack = require('webpack');
const BaseFolder = 'static/'; //relative to html path
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractLess = new ExtractTextPlugin({
filename: '[name].[contenthash].css',
disable: process.env.NODE_ENV === 'development'
});
var loaders = ['babel-loader'];
var port = process.env.PORT || 3000;
var vendor = ['react', 'react-dom', 'react-router', 'whatwg-fetch', 'es6-promise'];
var outputDir = 'dist';
var entry = {
filename: path.resolve(__dirname, 'src/app.js'),
}
var plugins = [
new webpack.optimize.CommonsChunkPlugin({
name:'vendor',
minChunks: Infinity,
filename: BaseFolder + 'js/[name].js',
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, '/src/index.html'),
filename: 'index.html',
inject: 'body'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'BaseFolder': JSON.stringify(BaseFolder)
}),
//new webpack.optimize.LimitChunkCountPlugin({maxChunks: 1}),
extractLess,
new webpack.ProvidePlugin({
Promise: 'es6-promise',
fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
React: 'react',
jsSHA: 'jssha',
wx: 'weixin-js-sdk'
}),
new CopyWebpackPlugin([
{
from: 'src/images',
to: BaseFolder + 'images'
}
])
];
if (process.env.NODE_ENV === 'development') {
//devtool ='eval-source-map';
loaders = ['react-hot-loader'].concat(loaders);
plugins = plugins.concat([
new webpack.HotModuleReplacementPlugin()
]);
entry = Object.keys(entry).reduce(function (result, key) {
result[key] = [
'webpack-dev-server/client?http://0.0.0.0:' + port,
'webpack/hot/only-dev-server',
entry[key]
];
return result;
}, {});
}
entry.vendor = vendor;
module.exports = env => {
return {
entry: entry,
output: {
filename: BaseFolder+'js/bundle.js',
chunkFilename: BaseFolder+'js/[id].chunk.js',
path: path.resolve(__dirname, outputDir),
publicPath: '/'
},
externals: [
],
module: {
loaders: [
{
test: /.jsx?$/,
loader: loaders,
exclude: /node_modules/,
include: __dirname
},
{ test: /\.js$/, exclude: /node_modules/, loaders: loaders, include: __dirname},
{ test: /\.scss$/, exclude: /node_modules/, loader: 'style-loader!css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap&includePaths[]=node_modules/compass-mixins/lib'},
{ test: /\.css$/, loader: 'style-loader!css-loader', exclude: /\.useable\.css$/},
{
test: /\.useable\.css$/,
use: [
{
loader: 'style-loader/useable'
},
{ loader: 'css-loader' },
],
},
{ test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader?limit=100000&name='+BaseFolder+'images/[name].[ext]' },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?name='+BaseFolder+'fonts/[name].[ext]' },
{ test: /\.(woff|woff2)$/, loader:'url-loader?prefix=font/&limit=5000&name='+BaseFolder+'fonts/[name].[ext]' },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream&name='+BaseFolder+'fonts/[name].[ext]' },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml&name='+BaseFolder+'images/[name].[ext]' },
]
},
plugins: plugins
}
};

Yes this must be included in your node_modules, but the point is that you have include that in your compiled js file or not, i.e.
you must have used webpack or gulp to compile all your dependencies of js to give one file and you must have forget to include that dependency file in webpack file or gulpfile, Please check or provide sample of your webpack or gulpfile.

I think that DropdownInput is named export from react-dropdown-input since in index.js file in the repository its exported as
module.exports = DropdownInput;
So need to import it like
import {DropdownInput} from 'react-dropdown-input'

Uncaught ReferenceError: require is not defined react + webpack

I have been working on a project for about 2 months and used webpack-dev-middleware.
According to the WDM documentation, its just a wrapper for webpack and run the project in the memory to enable hot reloading.
But now when im trying to build and deploy with webpack and same webpack.config.js i get Uncaught ReferenceError: require is not defined error.
I have searched alot and couldn't find a right answer for my case.
I'd really appreciate any help :).
my webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var autoprefixer = require('autoprefixer');
const webpack = require('webpack');
var fs = require('fs')
module.exports = {
entry: './src/client.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
target: 'web',
// keep node_module paths out of the bundle
externals: fs.readdirSync(path.resolve(__dirname, 'node_modules')).concat([
'react-dom/server', 'react/addons',
]).reduce(function (ext, mod) {
ext[mod] = 'commonjs ' + mod
return ext
}, {}),
node: {
__filename: true,
__dirname: true
},
plugins: [
new ExtractTextPlugin('styles.css'),
],
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
}, {
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader?limit=100000&name=/[hash].[ext]',
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
},
{ test: /\.json$/, loader: "json-loader"}
],
},
devtool: 'cheap-module-source-map'
}
I'm using webpack version : 1.13.3 as local.

In my case reason was:
...
module: {
noParse: /\.min\.js$/,
...
I've commented it out