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：意外的令牌导入

回答

相关问题