Webpack - 未捕獲的SyntaxError：意外的令牌導入

我在運行應用程序時收到意外的令牌導入錯誤。請看看我的網絡包的配置設置 -Webpack - 未捕獲的SyntaxError：意外的令牌導入

- Webpack.config.js -

var path = require("path"); 

module.exports = { 
    entry: ['./main.js'], 
    output: { 
     path: path.join(__dirname, 'build'), 
     filename: "bundle.js", 
     publicPath: '/build' 
    }, 
    resolve: { 
     modules: [ 
     path.resolve('./src'), 
     path.resolve('./node_modules') 
     ], 
     extensions: ['.js','.jsx'] 
    }, 
    module: { 
     loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader', 
      query: { 
      presets: ['es2015', 'react'] 
      } 
     }, 
     ] 
    }, 
    devServer: { 
     inline: true, 
     port: 3000 
    } 

    };

.babelrc

{ 
    "presets": ["es2015"], 
    "plugins": [ 
    ["transform-object-rest-spread"], 
    ["transform-runtime", { 
     "polyfill": false, 
     "regenerator": true 
    }], 
    ] 
}

- --package.json ---

{ 
    "name": "pagination", 
    "version": "1.0.0", 
    "description": "about table pagination", 
    "main": "main.js", 
    "scripts": { 
    "start": "webpack-dev-server --hot", 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "material-ui": "^0.16.7", 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "webpack": "^2.2.1", 
    "webpack-dev-server": "^2.3.0" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.22.1", 
    "babel-loader": "^6.2.10", 
    "babel-plugin-transform-object-rest-spread": "^6.22.0", 
    "babel-plugin-transform-runtime": "^6.22.0", 
    "babel-preset-es2015": "^6.22.0", 
    "babel-preset-react": "^6.22.0", 
    "babel-preset-stage-0": "^6.22.0", 
    "install": "^0.8.7", 
    "npm": "^4.2.0" 
    } 
}

正如你可以在代碼中看到，我設置了webpack.So儘管服務器啓動成功，它給出了一個錯誤

'Uncaught SyntaxError: Unexpected token import'.

來源

2017-02-12 Shubham

你是如何運行服務器/建築物喲你的bundle.js？你在'package.json'中使用npm腳本嗎？ – dargue3

@ dargue3是的，請查看y package.json文件。 – Shubham

所以我建議你刪除從.babelrc文件中刪除預設，因爲您已將它們包含在您的webpack中，並且這可能會導致問題，因爲您不包括react preset在babelrc中。

.babelrc

{ 
    "plugins": [ 
    ["transform-object-rest-spread"], 
    ["transform-runtime", { 
     "polyfill": false, 
     "regenerator": true 
    }], 
    ] 
}

其次確保您有您的所有進口如CSS適當裝載機，SVG等

module: { 
    loaders: [ 
    { test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
     presets: ['es2015', 'react'] 
     } 
    }, 
    { test: /\.css$/, loader: "style!css" }, 
    { test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=8192' }, 
    { test: /\.(otf|eot|ttf)$/, loader: "file?prefix=font/" }, 
    { test: /\.svg$/, loader: "file" } 
    ], 
}

你可能有些以上裝載機的取決於你的排除的要求，並確保您使用之前安裝loaders

來源

2017-02-12 10:03:12

Webpack - 未捕獲的SyntaxError：意外的令牌導入

回答

相關問題