'import'和'export'可能只出现在顶层

时间：2016-06-19 00:30:07

标签： webpack vue.js babeljs

我正在使用带有vuejs的webpack。 Webpack做了它的事情，但是当我查看输出的app.js文件时，它给了我这个错误。

  

'import'和'export'可能只出现在顶层

我认为babel没有转换代码是个问题？因为我在查看应用程序时会在浏览器中显示此内容。

  

意外的令牌导入

这是我的vuejs应用程序的entry.js： 

/*jshint esversion: 6 */
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
require('./css/style.scss');

// Export the vue router
export var router = new VueRouter({
  hashbang: false,
  root: '/'
  // history: true
});

// Set up routing and match routes to components
router.map({
  '/': {
    component: require('./components/home/Home.vue')
  }
});

// Redirect to the home route if any routes are unmatched
router.redirect({
  '*': '/'
});

// Start the app on the #app div
router.start(App, '#app');

这是我的webpack.config.js： 

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');

module.exports = {
  entry: './src/entry.js',
  output: {
      filename: './public/js/app.js'
  },
  devtool: 'source-map',
  plugins: [
    new ExtractTextPlugin('./public/css/style.css')
  ],
  module: {
    preLoaders: [{
        test: /\.js$/, 
        exclude: /node_modules/,
        loader: 'jshint-loader'
    }],
    loaders: [{
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
            'style',
            'css!sass'
        ),
    },
    {
        test: /\.vue$/,
        loader: 'vue'
    },
    {
        test: /\.js$/,
        exclude: /node_modules/,
        include: [
          path.resolve(__dirname, "src/services"),
        ],
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
    }]
  }
};

这是我的packages.json文件：

{
  "name": "test-webpack",
  "version": "1.0.0",
  "description": "Myapp",
  "main": "entry.js",
  "scripts": {
    "watch": "webpack-dev-server  --host $IP --port $PORT  --hot --inline --config webpack.config.js",
    "dev": "webpack",
    "build": ""
  },
  "author": "Dev",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-class-properties": "^6.10.2",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-runtime": "^6.9.2",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "jshint": "^2.9.2",
    "jshint-loader": "^0.8.3",
    "node-sass": "^3.8.0",
    "path": "^0.12.7",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "vue-hot-reload-api": "^1.3.2",
    "vue-html-loader": "^1.2.2",
    "vue-loader": "^8.5.2",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "vue": "^1.0.25",
    "vue-router": "^0.7.13"
  }
}

15 个答案:

答案 0 :(得分：77)

当我错过结束时，我收到了这个错误。

简化娱乐：

CREATE VIEW surigao_del_norte_2yr_affected AS
SELECT 
    province,
    municipality,
    barangay,
    SUM(total_bldg) as tot_bldg,
    SUM(total_not_affected) as tot_not_affect,
    SUM(total_affected) as tot_affect,
    SUM(low) as lo,
    SUM(medium) as med,
    SUM(high)as hi
FROM(
    WITH surigao AS(
        SELECT
            province,
            municipali AS municipality,
            brgy_locat AS barangay,
            total_bldg,
            (total_bldg - count(id)) as total_not_affected,
            count(id) AS total_affected,
            count(id) FILTER (WHERE gridcode = 1) AS low,
            count(id) FILTER (WHERE gridcode = 2) AS medium,
            count(id) FILTER (WHERE gridcode = 3) AS high
        FROM    (
            SELECT
            pss.province,ps.id, ps.brgy_locat, ps.municipali,
            gridcode, count(pss.id) as total_bldg
            FROM  surigao_stats_2yr ps
        INNER JOIN
            evidensapp_surigaobldg pss
            ON ps.brgy_locat = pss.brgy_locat
            AND ps.municipali = pss.municipali
        GROUP BY 1, 2,3, 4, 5
            )
        AS ps_fh GROUP BY 1,2,3, 4
        ORDER BY 1 ASC, 2 ASC

    ), magallanes AS(
        SELECT
            province,
            municipali AS municipality,
            brgy_locat AS barangay,
            total_bldg,
            (total_bldg - count(id)) as total_not_affected,
            count(id) AS total_affected,
            count(id) FILTER (WHERE gridcode = 1) AS low,
            count(id) FILTER (WHERE gridcode = 2) AS medium,
            count(id) FILTER (WHERE gridcode = 3) AS high
        FROM    (
            SELECT
            pss.province,ps.id, ps.brgy_locat, ps.municipali,
            gridcode, count(pss.id) as total_bldg
            FROM  magallanes_stats_2yr ps
        INNER JOIN
            evidensapp_magallanesbldg pss
            ON ps.brgy_locat = pss.brgy_locat
            AND ps.municipali = pss.municipali
        GROUP BY 1, 2,3, 4, 5
            )
        AS ps_fh GROUP BY 1,2,3, 4
        ORDER BY 1 ASC, 2 ASC
    ), mainit AS(
        SELECT
            province,
            municipali AS municipality,
            brgy_locat AS barangay,
            total_bldg,
            (total_bldg - count(id)) as total_not_affected,
            count(id) AS total_affected,
            count(id) FILTER (WHERE gridcode = 1) AS low,
            count(id) FILTER (WHERE gridcode = 2) AS medium,
            count(id) FILTER (WHERE gridcode = 3) AS high
        FROM    (
            SELECT
            pss.province,ps.id, ps.brgy_locat, ps.municipali,
            gridcode, count(pss.id) as total_bldg
            FROM  mainit_tubay_stats_2yr ps
        INNER JOIN
            evidensapp_mainittubaybldg pss
            ON ps.brgy_locat = pss.brgy_locat
            AND ps.municipali = pss.municipali
            WHERE province='Surigao del Norte'
        GROUP BY 1, 2,3, 4, 5
            )
        AS ps_fh GROUP BY 1,2,3, 4
        ORDER BY 1 ASC, 2 ASC
    )
    TABLE surigao 
    UNION ALL
    TABLE magallanes
    UNION ALL
    TABLE mainit
) surigao_2yr
--WHERE municipality ='Placer' 
--AND barangay = 'Santa Cruz'
GROUP BY 1,2,3
ORDER BY 2



SELECT *FROM surigao_del_norte_2yr_affected WHERE municipality ='Placer' AND barangay = 'Santa Cruz'

答案 1 :(得分：10)

  

'import'和'export'可能只出现在顶层

这意味着webpack正在捆绑未转换的ES6代码，这就是找到这些import / export语句的原因。因此，babel-loader必须不能解释您的期望。

如果您只是从其加载程序配置中删除include和exclude规则，那么除node_modules中的内容之外的所有内容的默认行为都会启动。出于某种原因，当前规则导致部分/全部文件被跳过。

module.exports = {
  entry: './src/entry.js',
  output: {
    filename: './public/js/app.js'
  },
  devtool: 'source-map',
  plugins: [
    new ExtractTextPlugin('./public/css/style.css')
  ],
  module: {
    preLoaders: [{
      test: /\.js$/, 
      exclude: /node_modules/,
      loader: 'jshint-loader'
    }],
    loaders: [{
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract(
        'style',
        'css!sass'
      ),
    },
    {
      test: /\.vue$/,
      loader: 'vue'
    },
    {
      test: /\.js$/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015']
      }
    }]
  }
};

答案 2 :(得分：10)

确保你有一个.babelrc文件，声明Babel应该转换的内容。我花了30分钟试图找出这个确切的错误。我将一堆文件复制到一个新文件夹后发现我没有复制.babelrc文件，因为它被隐藏了。

{
  "presets": "es2015"
}
你正在寻找.babelrc文件中的

或类似内容的东西

答案 3 :(得分：4)

使用webpack 4.14.0和babel-cli 6.26，我必须安装此Babel插件来解决SyntaxError: 'import' and 'export' may only appear at the top level错误：babel-plugin-syntax-dynamic-import

它是通过Webpack Code Splitting Docs链接的。

答案 4 :(得分：4)

升级到webpack 4.29.x后出现此错误。事实证明，Webpack 4.29.x触发了npm的peerDependency bug。根据他们的说法，该错误不会很快得到修复。这是workaround的sokra

  • 将"acorn": "^6.0.5"添加到您的应用程序package.json中。
  • 切换到yarn。它没有此错误。
  • npm update acorn --depth 20 npm dedupe（仅在某些情况下有效）
  • rm package-lock.json npm i（仅在某些情况下有效）
  • 更新所有其他依赖较旧版本的橡子包（仅在某些情况下有效）
  • 将webpack锁定在package.json中的4.28.4上

答案 5 :(得分：3)

请注意双开括号语法错误{{，这可能会导致出现此错误消息

答案 6 :(得分：3)

我在使用webpack4时遇到了同样的问题，我在根文件夹中缺少.babelrc文件：

{
    "presets":["env", "react"],
    "plugins": [
        "syntax-dynamic-import"
    ]
}

来自package.json：

"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",

答案 7 :(得分：1)

我的错误是由save_btn = tk.Button( button_frame, text='Save', command=lambda: save_file(entry_objects) ).pack(side='left') 陈述引起的。将其替换为System.import('xxx.js')后，错误就解决了。

我认为这是因为import xxx from 'xxx.js'也引起了动态导入。

在我看来，对于问题描述中的情况而言，动态导入是不必要的，因此应通过仅用require('xxx.scss')替换所有require来解决问题。

对于某些需要动态导入的情况，您可能需要@babel/plugin-syntax-dynamic-import作为此问题的其他答案。

答案 8 :(得分：0)

我正在使用Webpack 2.2.0捆绑我的React JS模块。

在我的主app.js文件中导入模块时遇到类似的问题。

30分钟后，我更新了RegEx以测试我的webpack.config.js中的文件类型。

  

仔细注意？测试RegEx查询中的符号。

{
    test: /\.js?$/,
    exclude: /(node_modules)/,
    loader: 'react-hot-loader'
}

它对我有用!!

答案 9 :(得分：0)

我不知道如何以不同的方式解决这个问题，但这只是简单地解决了。加载程序babel应放在数组的开头，一切正常。

答案 10 :(得分：0)

Vue支持async components：

来源：https://vueschool.io/articles/vuejs-tutorials/async-vuejs-components/ 

<script>
export default {
  data: () => ({ show: false }),
  components: {
    Tooltip: () => import("./Tooltip")
  }
};
</script>

祝你好运...

答案 11 :(得分：0)

也许您缺少一些插件，请尝试：

npm i --save-dev babel-plugin-transform-vue-jsx

npm i --save-dev babel-plugin-transform-runtime

npm i --save-dev babel-plugin-syntax-dynamic-import
  • 如果使用“ Webpack.config.js”：

Missing Plugins

  • 如果使用“ .babelrc”，请参见此link中的答案。

答案 12 :(得分：0)

这不是原始问题的直接答案，但我希望该建议能帮助出现类似错误的人：

在Webpack + Babel上使用更新的Web-api进行编译时，您会得到

Module parse failed: 'import' and 'export' may only appear at the top level

那么您可能忘记了导入polyfill。

例如：
在使用fetch() API和es2015定位时，您应该

  1. 将whatwg-fetch polyfill添加到package.json
  2. 添加import {fetch} from 'whatwg-fetch'

答案 13 :(得分：0)

在组件方法中缺少右括号时，出现此错误：

const Whoops = props => {
  const wonk = () => {props.wonk(); // <- note missing } brace!
  return (
    <View onPress={wonk} />
  )
}

答案 14 :(得分：0)

对我来说，这是由于在hot module replacement实现中对module的引用引起的：

constructor() {
  if (module && module.hot) {
    module.hot.status(status => {
      if (status === 'dispose') {
        this.webSocket.close();
      }
    });
  }
}
相关问题
最新问题