javascript - Webpack: 'You may need an appropriate loader to handle this file type.' - How to resolve async erro

admin•2025-04-20 00:58:37•questions•阅读1

OS: Windows 10 Prowebpack: 1.14.0So, I'm receiving the above mentioned error with the following c

OS: Windows 10 Pro
webpack: 1.14.0

So, I'm receiving the above mentioned error with the following code, async being the problem:

  import { applyAfterware, applyMiddleware } from 'redux';

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

The full error message is:

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)
 @ ./client/app.js 17:20-45

My webpack.config file 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',
      safe: 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'
    }
    ]
  }
};

How do i resolve this issue?

My package.json is as follows:

{
  "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' --pilers js:babel-core/register",
    "clean": "rimraf public",
    "start": "node devServer.js"
  },
  "repository": {
    "type": "git",
    "url": ".git"
  },
  "author": "Theo Mer",
  "license": "MIT",
  "homepage": "",
  "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 app.js, for which the following error is generated if I used the .babelrc file:

Module build failed: SyntaxError: C:/Users/d0475/Documents/Projects/learn-redux-graphql/client/app.js: Unexpected token (47:2)

  46 | render(
> 47 |   <ApolloProvider store={store} client={client}>
     |   ^

OS: Windows 10 Pro
webpack: 1.14.0

So, I'm receiving the above mentioned error with the following code, async being the problem:

  import { applyAfterware, applyMiddleware } from 'redux';

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

The full error message is:

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)
 @ ./client/app.js 17:20-45

My webpack.config file 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',
      safe: 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'
    }
    ]
  }
};

How do i resolve this issue?

My package.json is as follows:

{
  "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' --pilers js:babel-core/register",
    "clean": "rimraf public",
    "start": "node devServer.js"
  },
  "repository": {
    "type": "git",
    "url": "https://github./TheoMer/learn-redux-graphql.git"
  },
  "author": "Theo Mer",
  "license": "MIT",
  "homepage": "https://github./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 app.js, for which the following error is generated if I used the .babelrc file:

Module build failed: SyntaxError: C:/Users/d0475/Documents/Projects/learn-redux-graphql/client/app.js: Unexpected token (47:2)

  46 | render(
> 47 |   <ApolloProvider store={store} client={client}>
     |   ^

render(
  <ApolloProvider store={store} client={client}>
    { /* Tell the Router to use our enhanced history */ }
    <Router history={history}>
      <Route path="/" ponent={App}>
        <IndexRoute ponent={PhotoGrid} />
        <Route path="/view/:postId" ponent={Single}></Route>
      </Route>
    </Router>
  </ApolloProvider>,
  document.getElementById('root')
);

Share edited May 22, 2017 at 15:53 asked May 22, 2017 at 14:09 TheoG 1,5584 gold badges32 silver badges54 bronze badges

can you post your package.json? What version of babel are you using? – Poku Commented May 22, 2017 at 14:15
@Poku See my updated question, which contains my package.json. – TheoG Commented May 22, 2017 at 15:00

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

To transform async you need a special plugin.

You need to have babel plugin transform async to generator

npm install --save-dev babel-plugin-transform-async-to-generator

Then you can add the following line to your .babelrc

{"plugins": ["transform-async-to-generator"]}

Reference: Async to generator

So, and as @anamulhasan suggested, I imported babel-plugin-transform-async-to-generator.

Adding

"plugins": ["transform-async-to-generator"]

to a .babelrc file did not resolve the issue. But adding:

[
  "transform-async-to-generator"
]

to the "babel" --> "env" --> "plugins" section, of both production and development, did resolve the issue.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745059392a4608871.html

admin

questions
javascript - angularjs can't communicate with php using POST - Stack Overflow
I am trying to send and then get data from PHP on my server, but I don't think it sends the data.M
admin
24分钟前
10
questions
python - How to correctly use Fetch in JavaScript and Django? - Stack Overflow
I am trying to make a METAR decoder as shown:I am using fetch in Vanilla js and I plan to send the ent
admin
23分钟前
10
questions
javascript - Uncaught SyntaxError: Unexpected token export - popper.js error - Stack Overflow
Angular is giving the error: popper.js in bootstrap 4 gives SyntaxError Unexpected token export I'
admin
22分钟前
10
questions
jquery - Close javascript-popup-window from anywhere - Stack Overflow
I'm trying to build a popup that can be closed from anywhere.On the Mainpage you have the option t
admin
21分钟前
10
questions
javascript - MutationObserver and querySelectorAll - Stack Overflow
I am currently learning Javascript and one of my chapters is "Mutation Observer". I am trying
admin
18分钟前
20
questions
javascript - How to prevent browser from storing Blobs? - Stack Overflow
I have a low memory device (some cheapo Windows tablet) that is running Firefox in order to display a i
admin
18分钟前
10
questions
c# - how to give prompt message & after that redirecting page to another in button click event in asp.net - Stack Overfl
Hi I have one submit button to submit the page. When i click on submit button then it should give prom
admin
15分钟前
20
questions
reactjs - AG Grid React not auto-sizing - Stack Overflow
I have the following code in my project.<AgGridReactcolumnDefs={columnDefs}rowData={sortedData}
admin
14分钟前
10
questions
javascript - Randomly space characters throughout string? - Stack Overflow
To shuffle a string, I could use something like thisString.prototype.shuffle = function () {var arr = t
admin
11分钟前
10
questions
posts - Wordpress get tags in “publish_post” hook
I want to get the selected tags using publish_post hook, while publishing the post.With below code, I can get only those
admin
11分钟前
20
questions
javascript - Random num Generator odd and even - Stack Overflow
I need to figure out how to make a random number generator from 1-100 using HTML javascript. After find
admin
9分钟前
10
questions
javascript - Holding document.Ready() sometime with jquery holdReady function - Stack Overflow
Here I am facing an issue with jquery holdReady .$.holdReady(true);$.getScript("someXJqueryPlugin.
admin
8分钟前
10
questions
javascript - How to add a "hole" to a Circle Polygon (Google Maps API V3) - Stack Overflow
This Pentagon example shows holes can be added inside a Polygon: .html?r=40I would like to add a hole i
admin
6分钟前
20
questions
jquery - Hide IFRAME scrollbars with javascript - Stack Overflow
I have a jQuery project where I open an iframe with scrollbars (scrolling=auto) in an overlay (boxy plu
admin
5分钟前
10
questions
Custom Post Taxonomy Template Not Loading Properly
I have a website I inherited that is exhibiting strange behavior for a custom post type taxonomy template.The post type
admin
5分钟前
00
questions
javascript - Why isn't my Dropdown styled in React Semantic UI? - Stack Overflow
I am learning React and I'm about a week into it. I want to build a dropdown and to learn React Se
admin
4分钟前
00
questions
flutter - How to keep a widget state for PageRouteBuilder? - Stack Overflow
I have a custom PageRouteBuilder like this:class MyRouter extends PageRouteBuilder {final String? tran
admin
3分钟前
10
questions
javascript - Polymer 3 ide - template editting - Stack Overflow
What are people using for editting templates in Polymer 3? I've tried both intelliJ and vscode (al
admin
59秒前
00
questions
n8n - AI agent outputs empty [{}] - Stack Overflow
I have an AI agent, it receives an input but no matter what message I put, it outputs[{}].But the agen
admin
41秒前
00
questions
javascript - Load prototype enhancements with require.js - Stack Overflow
I am using require.js to load my modules which generally works fine. Nevertheless, I do have two addito
admin
34秒前
00

发表回复

评论列表（0条）

暂无评论

javascript - Webpack: 'You may need an appropriate loader to handle this file type.' - How to resolve async erro

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Webpack: &#39;You may need an appropriate loader to handle this file type.&#39; - How to resolve async erro

2 Answers 2

相关推荐

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Webpack: 'You may need an appropriate loader to handle this file type.' - How to resolve async erro