webpack - scratch - ''Importar'' y ''Exportar'' solo pueden aparecer en el nivel superior

vue-loader

Question

Estoy usando webpack con vuejs. Webpack hace su trabajo, pero cuando veo el archivo app.js generado, me da este error.

''Importar'' y ''Exportar'' solo pueden aparecer en el nivel superior

¿Supongo que es un problema que Babel no convierta el código? Porque estoy obteniendo esto en el navegador al ver la aplicación.

Importación de token inesperada

Aquí está mi entry.js para mi aplicación vuejs:

/*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'');

Aquí está mi 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'']
        }
    }]
  }
};

Aquí está mi archivo 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"
  }
}

Answer 1

''Importar'' y ''Exportar'' solo pueden aparecer en el nivel superior

Esto significa que el paquete web está empaquetando el código ES6 no transpilado, por lo que se encuentran estas declaraciones de import / export . babel-loader por lo tanto no debe estar transpilando lo que usted espera.

Si simplemente elimina las reglas de include y exclude de la configuración de su cargador, se activará el comportamiento predeterminado de transpilar todo lo que está incluido en los node_modules . Por alguna razón u otra, las reglas actuales hacen que se omitan algunos / todos los archivos.

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'']
      }
    }]
  }
};

Answer 2

Asegúrese de tener un archivo .babelrc que declare lo que se supone que Babel está transpilando. Pasé como 30 minutos tratando de resolver este error exacto. Después de copiar un montón de archivos a una nueva carpeta y descubrí que no copié el archivo .babelrc porque estaba oculto.

{
  "presets": "es2015"
}

o algo por el estilo es lo que está buscando dentro de su archivo .babelrc

Answer 3

Busque también un error de sintaxis del corchete de apertura {{ que puede hacer que aparezca este mensaje de error

Answer 4

Estoy usando Webpack 2.2.0 para agrupar mis módulos React JS.

Encontré un problema similar al importar módulos en mi archivo principal app.js.

Después de 30 minutos de headbanging actualicé el RegEx para probar los tipos de archivos en mi webpack.config.js.

Observa con cuidado el? símbolo en prueba de consulta regEx.

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

¡Funcionó para mí!

Answer 5

Mi error se debe a una declaración System.import(''xxx.js'') . Después de reemplazarlo con la import xxx from ''xxx.js'' , se solucionó el error.

Creo que es porque require(''xxx.scss'') también causó una importación dinámica.

Para el caso en la descripción de la pregunta, en mi opinión, las importaciones dinámicas no son necesarias, por lo que el problema debe resolverse simplemente reemplazando todos los require s con import ... from ...

Para algunos casos en que las importaciones dinámicas son necesarias, puede necesitar babel-plugin-syntax-dynamic-import como otras respuestas en esta pregunta.

Answer 6

No sé cómo resolver este problema de manera diferente, pero esto se resuelve simplemente. El cargador de babel debe colocarse al principio de la matriz y todo funciona.

Answer 7

Recibí este error cuando me faltaba un soporte de cierre.

Recreación simplificada:

const Foo = () => {
  return (
    ''bar''
  );
}; <== this bracket was missing

export default Foo;

Answer 8

Tuve el mismo problema con webpack4, me faltaba el archivo .babelrc en la carpeta raíz:

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

Desde 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",

Answer 9

Usando webpack 4.14.0 y babel-cli 6.26 tuve que instalar este complemento de Babel para corregir el SyntaxError: ''import'' and ''export'' may only appear at the top level error de SyntaxError: ''import'' and ''export'' may only appear at the top level : babel-plugin-syntax-dynamic-import

Se vinculó a través de los documentos de división de códigos de paquetes web .