TheoG TheoG - 1 year ago 275
Javascript Question

Webpack: 'You may need an appropriate loader to handle this file type' - Transformation using 'transform-async-to-generator' fails

OS: Windows 10 Pro

webpack: 1.14.0

So, when I start my server (npm start), the following code:



async applyMiddleware(req, next) {
....
}





is correctly transformed by the
development
section of
"babel": "env":["transform-async-to-generator"]
of my
package.json
. But when I build my app (npm run build) the
production
section of
"babel": "env":["transform-async-to-generator"]
fails to correctly transform the code, with the following error:



Module parse failed: C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\babel-loader\lib\index.js!C:\Users\d0475\Documents\Projects\learn-redux-graphql\client\apolloClient.js Unexpected token (77:25)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (77:25)
at Parser.pp$4.raise (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:603:10)
at Parser.pp.expect (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:597:28)
at Parser.pp$3.parseObj (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1973:16)
at Parser.pp$3.parseExprAtom (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1805:19)
at Parser.pp$3.parseExprSubscripts (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExprList (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:2165:22)
at Parser.pp$3.parseExprAtom (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1801:28)
at Parser.pp$3.parseExprSubscripts (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExprList (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:2165:22)
at Parser.pp$3.parseSubscripts (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1741:35)
at Parser.pp$3.parseExprSubscripts (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1718:17)
at Parser.pp$3.parseMaybeUnary (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExpression (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1573:21)
at Parser.pp$1.parseStatement (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:727:47)
at Parser.pp$1.parseTopLevel (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:638:25)
at Parser.parse (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:516:17)
at Object.parse (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:3098:39)
at Parser.parse (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\webpack\lib\Parser.js:902:15)
@ ./client/app.js 17:20-45





What is the issue here?

My
package.json
is:



{
"name": "learn-redux-graphql",
"version": "1.0.0",
"description": ":) ",
"scripts": {
"build:webpack": "set NODE_ENV=production && webpack --config webpack.config.prod.js",
"build": "npm run clean && npm run build:webpack",
"test": "NODE_ENV=production mocha './tests/**/*.spec.js' --compilers js:babel-core/register",
"clean": "rimraf public",
"start": "node devServer.js"
},
"repository": {
"type": "git",
"url": "https://github.com/TheoMer/learn-redux-graphql.git"
},
"author": "Theo Mer",
"license": "MIT",
"homepage": "https://github.com/TheoMer/learn-redux-graphql",
"dependencies": {
"apollo-client": "^1.0.2",
"babel-core": "^6.5.2",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.3",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-object-rest-spread": "^6.5.0",
"babel-plugin-transform-react-display-name": "^6.5.0",
"babel-polyfill": "^6.5.0",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"dotenv-webpack": "^1.4.5",
"eslint": "^3.4.0",
"eslint-plugin-babel": "^3.1.0",
"eslint-plugin-react": "^4.1.0",
"express": "^4.13.4",
"firebase": "^3.3.0",
"graphql-tag": "^1.3.2",
"graphql-tools": "^0.10.1",
"immutability-helper": "^2.1.2",
"localforage": "^1.5.0",
"lodash": "^4.17.4",
"node-env-file": "^0.1.8",
"raven-js": "^2.1.1",
"react": "^0.14.7",
"react-addons-css-transition-group": "^0.14.7",
"react-apollo": "^1.0.0-rc.3",
"react-dom": "^0.14.7",
"react-redux": "^4.4.0",
"react-router": "^2.0.0",
"react-router-redux": "^4.0.0",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.2",
"redbox-react": "^1.2.2",
"redux": "^3.3.1",
"redux-persist": "^4.8.0",
"redux-thunk": "^2.0.1",
"rimraf": "^2.5.2",
"style-loader": "^0.13.0",
"stylus": "^0.54.5",
"stylus-loader": "^2.3.1",
"subscriptions-transport-ws": "^0.5.5-alpha.0",
"webpack": "^1.12.14",
"webpack-dev-middleware": "^1.5.1",
"webpack-hot-middleware": "^2.7.1"
},
"devDependencies": {
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-react-jsx": "^6.23.0",
"copy-webpack-plugin": "^4.0.1",
"expect": "^1.14.0",
"expect-jsx": "^2.3.0",
"html-webpack-plugin": "^2.28.0",
"mocha": "^2.4.5",
"offline-plugin": "^4.7.0",
"react-addons-test-utils": "^0.14.7",
"sw-precache-webpack-plugin": "^0.9.1"
},
"babel": {
"presets": [
"react",
"es2015"
],
"env": {
"development": {
"plugins": [
[
"transform-async-to-generator"
],
[
"transform-object-rest-spread"
],
[
"transform-react-display-name"
],
[
"react-transform",
{
"transforms": [
{
"transform": "react-transform-hmr",
"imports": [
"react"
],
"locals": [
"module"
]
},
{
"transform": "react-transform-catch-errors",
"imports": [
"react",
"redbox-react"
]
}
]
}
]
]
},
"production": {
"plugins": [
[
"transform-async-to-generator"
],
[
"transform-object-rest-spread"
],
[
"transform-react-display-name"
]
]
}
}
},
"eslintConfig": {
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"env": {
"browser": true,
"node": true
},
"parser": "babel-eslint",
"rules": {
"quotes": [
2,
"single"
],
"strict": [
2,
"never"
],
"babel/generator-star-spacing": 1,
"babel/new-cap": 1,
"babel/object-shorthand": 1,
"babel/arrow-parens": 1,
"babel/no-await-in-loop": 1,
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2
},
"plugins": [
"babel",
"react"
]
}
}





My
webpack.config.dev
is:



var path = require('path');
var webpack = require('webpack');
const Dotenv = require('dotenv-webpack');

module.exports = {
devtool: 'source-map',
entry: [
'webpack-hot-middleware/client',
'./client/app'
],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new Dotenv({
path: './.env', // Path to .env file (this is the default)
safe: true // load .env.example (defaults to "false" which does not use dotenv-safe)
})
],
module: {
loaders: [
// js
{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'client')
},
// CSS
{
test: /\.styl$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!stylus-loader'
}
]
}
};





My
webpack.config.prod
is:



const path = require('path');
const webpack = require('webpack');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const OfflinePlugin = require('offline-plugin');

module.exports = {
devtool: 'source-map',
context: __dirname,
entry: {
main: path.resolve(__dirname, './client/app'),
},
output: {
path: path.join(__dirname, '/public'),
filename: '[name]-[hash].js',
publicPath: '/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new Dotenv({
path: './.env', // Path to .env file (this is the default)
safe: true // load .env.example (defaults to "false" which does not use dotenv-safe)
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': "'production'"
}
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
}),
new HtmlWebpackPlugin({
title: 'Flamingo City',
filename: 'index.html',
template: './index_template.ejs',
}),
new CopyWebpackPlugin([
{ from: '404.html' }, // Copies file from root to specified output:path:
{ from: 'manifest.json' },
{ from: 'images', to: 'images' },
]),
new OfflinePlugin({
publicPath: '/',
safeToUseOptionalCaches: true,
caches: {
main: [
'main-*.js',
'index.html',
],
additional: [
':externals:'
],
optional: [
':rest:'
]
},
externals: [
'/'
],
ServiceWorker: {
navigateFallbackURL: '/',
events: true
},
AppCache: {
FALLBACK: {
'/': '/offline-page.html'
},
events: true
}
})
],
module: {
loaders: [
// js
{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'client')
},
// CSS
{
test: /\.styl$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!stylus-loader'
}
]
}
};




Answer Source

You need to give the Webpack process access to the NODE_ENV variable.

Windows: "build:webpack": "set NODE_ENV=production&& webpack --config webpack.config.prod.js",

MacOs/Linux: "build:webpack": "export NODE_ENV=production && webpack --config webpack.config.prod.js",

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download