Parsing error import and export may only appear at the top level

I’m using webpack with vuejs. Webpack does its thing, but when I look at the outputted app.js file, it gives me this error.

‘import’ and ‘export’ may only appear at the top level

I’m assuming it’s a problem with babel not converting the code? Because I’m getting this in the browser when viewing the application.

Unexpected token import

Here’s my entry.js for my vuejs application:

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

Here’s my 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']
        }
    }]
  }
};

Here’s my packages.json file:

{
  "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"
  }
}

I’m using webpack with vuejs. Webpack does its thing, but when I look at the outputted app.js file, it gives me this error.

‘import’ and ‘export’ may only appear at the top level

I’m assuming it’s a problem with babel not converting the code? Because I’m getting this in the browser when viewing the application.

Unexpected token import

Here’s my entry.js for my vuejs application:

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

Here’s my 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']
        }
    }]
  }
};

Here’s my packages.json file:

{
  "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"
  }
}

Parse error import and export may only appear at the top level

Reading time В· 2 min

‘import’ and ‘export’ may only appear at the top level #

The error «import and export may only appear at the top level» occurs when we forget a closing brace when declaring a function or class, or mix up default and named exports and imports.

To solve the error, make sure you haven’t forgotten a closing brace in a function’s definition.

Here is an example of how the error occurs.

We have a missing curly brace in the definition of the App function which caused the error.

Once we add the closing curly brace, the error is resolved.

Don’t mix up default and named exports and imports #

You can use default imports/exports with ES6 modules in the following way:

And import the function in the other file.

Notice that we do not use curly braces when working with default imports.

Here’s how you use named imports/exports.

And now we use a named import in the other file.

Notice the curly braces, this is how we import a named export.

You can also mix and match, here’s an example.

And here are the imports.

We used a default import to import the sum function and a named import to import the num variable.

Conclusion #

The error «import and export may only appear at the top level» occurs when we forget a closing brace when declaring a function or class, or mix up default and named exports and imports.

To solve the error, make sure you haven’t forgotten a closing brace in a function’s definition.

Источник

Module parse failed: ‘import’ and ‘export’ may only appear at the top level #13

I can run your example, but with my current project it doesn’t work.

I tried to do exactly the same config as you have in your webpack example, but it seems I’m missing something.

When adding the ng-hot-reload-loader like this:

Webpack fail with following error:

Module parse failed: ‘import’ and ‘export’ may only appear at the top level (15:6)
You may need an appropriate loader to handle this file type.
| (function() |

| import $ngAnimate from ‘angular-animate’;

The text was updated successfully, but these errors were encountered:

What’s your babelrc like? Looks like it’s not transforming the import statements to commonjs require s. You might be missing this modules: commonjs line.

I «copy/paste» the same .babelrc has you have. I also have the same packages in NPM

That’s weird. Do you happen to have the code in github or somewhere I could try it out?

Many of those package.json dependencies aren’t required, btw, since you are probably using just webpack and not gulp. The loader works with both so that’s why the demo project has both webpack and gulp stuff in it. But I guess it makes sense to just have them all for now and trim those down when you get things working.

When I’m running (without ng-hot-reload-loader )

It works good and my babel is transpiling my code I wanted.

Source code isn’t on github and I can’t publish it (private).
Project needs all that dependencies.

Do you think it can come from one of them?

I made a small test repo for this issue here: noppa/ng-hot-reload-issue-13-test, but can’t really reproduce the problem. Everything seems to work fine there.

I get pretty much the same error as you if I remove the babelrc file or the «modules» option, which makes me think that the webpack loader probably isn’t using the correct babelrc file for some reason.

Ok, thank you for answering 👍 .
I fixed that issue by adding the following:

webpack loader probably isn’t using the correct babelrc file

I needed to add that option to babel-loader in order to tell him where is the .babelrc file (don’t know why because both my webpack.config and .babelrc in same directory).

Anyway, I don’t have the issue but is not refreshing the app.
I get warnings:

log.js:26 Ignored an update to unaccepted module ../../../../../../WebApplication/Client/application/components/dashboard/location-status/location-status.html -> ../../../../../../Dashboard/WebApplication/Client/application/components/dashboard/location-status/location-status.component.js -> ../../../../../../WebApplication/Client/application/components/dashboard/dashboard.module.js -> ../../../../../../WebApplication/Client/application/app.js -> ../../../../../../WebApplication/Client/src/index.js -> 1
push. /../../../../../WebApplication/Client/application/node_modules/webpack/hot/log.js.module.exports @ log.js:26
onUnaccepted @ only-dev-server.js:31
hotApply @ bootstrap:522
(anonymous) @ only-dev-server.js:26
Promise.then (async)
check @ only-dev-server.js:15
(anonymous) @ only-dev-server.js:91
push. /../../../../../WebApplication/Client/application/node_modules/events/events.js.EventEmitter.emit @ events.js:81
reloadApp @ client?7afc:227
ok @ client?7afc:140
onmessage @ socket.js:41
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:887
SockJS._transportMessage @ sockjs.js:885
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2961

I see somewhere to add in the entry point:

Warning disappear but still doesn’t refresh the page

Источник

The Ultimate React Errors Guide

In this guide we try to explain every React error you might run into. There’s a mix of JavaScript, React and Babel in here to cover everything from syntax, JSX, to React Hooks.

Error: Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

The bug: You returned undefined, which is an invalid type for React’s render method to return.

The fix: Return a valid type: DOM node, primitive type, array or null to return nothing.

Error: Objects are not valid as a React child

The bug: You tried to render a JavaScript object inside your JSX

The fix: Render a valid React child like a string, an array, null, or DOM node.

Warning: Functions are not valid as a React child

The fix: Instead of rendering the function itself, invoke the function or render the React component correctly:

Error: Each child in a list should have a unique key prop

The bug: You rendered a list but didn’t include a unique key as a prop for these components.

The Fix: Add a unique key to your list components. This is important for performance. From the react docs

React supports a key attribute. When children have keys, React uses the key to match children in the original tree with children in the subsequent tree. For example, adding a key to our inefficient example above can make the tree conversion efficient

So, where do you get a unique key from? Well, typically you would have IDs on the items from the database. If not, you could write a function to generate IDs prior to rendering in React (such as in your Redux reducer). At worst case, you could just use the index of the array, but this just hides the error, you’d still hit performance issues if you tried to modify the contents of the array.

Error: Encountered two children with the same key

The solution is to just not use the same key. Your keys must be unique.

Error: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

The bug: Starting a React component’s name with a lowercase letter.

The fix: Start the component’s name with an uppercase letter:

Error: The style prop expects a mapping from style properties to values, not a string.

The bug: You used a string for the style prop. While this is correct syntax for standard HTML, in React world, we need to use an object for the style prop.

The fix: Use a style object mapping CSS properties in camelCase.

Hooks Errors

React Hooks errors typically occur due to violations of the Rules of Hooks. Be sure to review these rules. Another source of confusion may be how to use custom hooks.

Error: Hooks can only be called inside the body of a function component

The fix: only call React hooks within React function components or custom hooks. From the rules of hooks:

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

Which looks like:

Error: React Hook «useState» is called conditionally. React Hooks must be called in the exact same order in every component render.

The fix: Move the react hook to the top of the function and don’t return before the hook is called.

Error: React Hook «useState» is called in function which is neither a React function component or a custom React Hook function

The bug: While attempting to use our own custom React hook, we hit this error.

The fix: While the custom hook is used properly, it is not named properly. It must start with the word «use» for React to consider it a custom hook.

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

The fix: Invoking a setter within JSX will cause an infinite loop. Instead properly define an arrow function around the setter:

Error: Expected listener to be a function, instead got type string

The bug: You are passing a string as a prop to an event handler like onClick:

The fix: Properly wrap and call the event handler callback with an arrow function:

Error: Cannot read property of undefined

The bug: You are attempting to access a property of an undefined object

The fix: Either define the object you are attempting to access or safely check against it:

Babel JSX Parsing Errors

Error: Unexpected token

This bug could literally occur for hundreds of reasons. It means Babel (what compiles our JavaScript) encountered a piece of code that was unexpected. Here are some of the examples from the Babel test cases.

• The bug: ((a)) => 42
• The fix: ((a) => 42), a => 42
• The bug: . ;
• The fix: <. >
• The bug: foo ? 42
• The fix: foo ? 42 : 24
• The bug: < a: 1, [] >;
• The fix:

The bug: You tried writing a comment but you hit this error.

The fix: Finish the JavaScript comment with a closing */

Error: Only expressions, functions or classes are allowed as the default export

The bug: You might be surprised to find that the following is invalid syntax.

The fix: Export const can only be used with named exports, not default exports. So you have to declare the const first and then export default. There can only be one default export for each file.

A default export can be a function, a class, an object or anything else. This value is to be considered as the “main” exported value since it will be the simplest to import.

Error: import and export may only appear at the top level

The bug: You are attempting to use import or export within a function, possibly due to a missing bracket:

The fix: closing the bracket on the foo function so export is called correctly outside on the top level scope

Where to get further help

If you are still having issues solving bugs, check out our debugging course we created to help you build a strategy to debug issues on your own.

Источник

‘import’ and ‘export’ may only appear at the top level #90

I’m having trouble bundling handlebars. On bundling I get the following error:

My first try to fix this, was to use the named exports feature. But although I’ve explicitly specified handlebars as a named export, it seems to be ignored and I always get the same error message as above.

Here is my setup:

The text was updated successfully, but these errors were encountered:

So, there are a few things going on here, it turns out. The error message you saw was caused by this plugin attempting to transform a module which had an import declaration added to it by rollup-plugin-node-globals. Moving that plugin to the bottom (so that the CommonJS module was converted to ES6 before the import got added) fixed that issue, but created another (which would be fixed by calvinmetcalf/rollup-plugin-node-globals#3. A workaround in the meantime is to ensure that rollup-plugin-node-globals comes before rollup-plugin-node-resolve in the plugins array).

After that, the bundle builds fine. But it doesn’t run. Because path and fs are required from somewhere, they’re treated as external dependencies, which means the IIFE expects them as arguments.

. but path and fs don’t exist as variables on the page, so it blows up. Using rollup-plugin-node-builtins we can add a browser-friendly path (obviously only some of its functions work outside of Node), but there’s no browser equivalent of fs .

We can use the globals option to replace those modules with whatever expression we like (since presumably path and fs are only there for some Node-specific functionality):

That results in this:

But then we get this error.

bundle.js:3828 Uncaught ReferenceError: require is not defined

. because of this line inside the source-map module:

In case you weren’t familiar with it, amdefine is a package that allows you to write AMD modules and have them converted into CommonJS modules at runtime by adding that snippet. It’s exactly as ridiculous an idea as it sounds, and it means your bundle has to include this dead weight (in fact, now that I investigate, that’s the only reason the bundle needs path – so that it doesn’t need to implement dirname . Literally the only reason!). So we’re attempting to transform a CommonJS module that is really an AMD module that only gets converted at runtime. Teetering atop this house of cards, it’s a wonder that anything stable was ever built.

Of course, we don’t actually need the source-map stuff, as evidenced by this block:

Rollup doesn’t have the luxury of running the code to find out what’s necessary and what isn’t, so it has to import source-map . But we can disable it by modifying our config like so:

Then we hit another ‘require is not defined’ error caused by this code:

Another runtime check, this time to see if we want to make it possible for Node users to compile templates at runtime by doing var compiled = require(‘template.hbs’) . Which isn’t even remotely a concern for browser users, but we still have to deal with it. (The ‘function’ !== ‘undefined’ ) thing is to allow UMD modules to work with this plugin.)

We can get rid of that whole block by replacing require.extensions with null :

And after that, it works. Whether it will continue to work as you use more of Handlebars remains to be seen.

So the blame is shared between Rollup (for making it too easy for plugins to be in the wrong order) and the ghosts of module systems past. I wouldn’t judge you for using Rollup to bundle your own code as a CommonJS module, then handing the result off to Browserify or Webpack to deal with the various layers of insanity that have accreted in the Node ecosystem over the past few years. There’s also Rollupify, if you wanted to take a Browserify-first approach.

I’ve put a working version of the example in this repo, so you can poke and prod it: https://github.com/Rich-Harris/rollup-plugin-commonjs-issue-90

Thanks for coming on this wild adventure with me, hope it helps!

Источник

12


0

/usr/src/app/isPrime.js: 'import' and 'export' may only appear at the top level (18:0)
    16 | // END
    17 | 
  > 18 | export default isPrime;
       | ^
    19 | 

  at isPrime (isPrime.js:4:12)
  at Object.<anonymous>.test (__tests__/isPrime.test.js:7:32)
  at Promise.resolve.then.el (../../local/share/.config/yarn/global/node_modules/p-map/index.js:42:16)

expect(received).toBe(expected)

Expected value to be (using ===):
  true
Received:
  undefined

Difference:

  Comparing two different types of values. Expected boolean but received undefined.

  at Object.<anonymous>.test (__tests__/isPrime.test.js:15:37)
  at Promise.resolve.then.el (../../local/share/.config/yarn/global/node_modules/p-map/index.js:42:16)

let test;

if (true) {
  test = 1;
}

if (x === 1) {
  return result === 1;
}

else {
  return true;
}