Babel 7 (?) and Webpack 4

Hi, all,

This is my first time reporting a possible issue, so for all I know this could be more of a support question. I am making a boilerplate from scratch using Node/Express/React, and installed the latest versions of Webpack and Babel to help with the process. However, for longer than I’m willing to admit, I’ve been banging my head against the same issue when I try to start my server:

(function (exports, require, module, __filename, __dirname) { import WebServer from './web.server'

SyntaxError: Unexpected token import
    at new Script (vm.js:51:7)
    at createScript (vm.js:138:10)
    at Object.runInThisContext (vm.js:199:10)
    at Module._compile (module.js:624:28)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Function.Module.runMain (module.js:701:10)
    at startup (bootstrap_node.js:190:16)

I take this to mean that my .babelrc file and my Webpack config file are not talking to each other, thus blocking me from transpiling ES6 syntax. To test my theory, I tried replacing the import with a require statement and it spit out the same error, except for export instead.

This is where the kicker comes in. I say I’m running the latest Babel (7) simply because, when I first started looking into this issue (which was happening when I was using Babel 6), I noticed that the individual who solved their own problem had different syntax for their babel-core and babel presets that I had originally. So, for experiment’s sake, I updated my own Babel packages to match their own. Here are my package.json dependencies and devDependencies to show this:

"dependencies": {
    "ajv": "^6.4.0",
    "express": "^4.16.3",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "rimraf": "^2.6.2",
    "webpack": "^4.8.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.46",
    "@babel/preset-env": "^7.0.0-beta.46",
    "@babel/preset-react": "^7.0.0-beta.46",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.0-beta.2",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^22.4.3",
    "react-test-renderer": "^16.3.2",
    "webpack-cli": "^2.1.2",
    "webpack-node-externals": "^1.7.2"

I’m sure this probably added an entirely new layer of issues on top of the first issue I was facing. However, the last thing you might need to see is the Webpack config file:

const path = require('path');
const nodeExternals = require('webpack-node-externals');
const HtmlWebPackPlugin = require('html-webpack-plugin')

const moduleObj = {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
};

const client = {
    entry: {
        'client': './src/client/index.js'
    },
    target: 'web',
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist/public')
    },
    module: moduleObj,
    plugins: [
      new HtmlWebPackPlugin({
        template: 'src/client/index.html'
      })
  ]
};

const server = {
    entry: {
        'server': './src/server/server.js'
    },
    target: 'node',
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    externals: [nodeExternals()]
};

module.exports = [client, server];

I was working with a tutorial to start and then began to update it when I first ran into the import issue, thinking there was some disconnect between Babel and Webpack. Some of the reading I was doing pointed to the .babelrc file not being “read” by the Webpack config file, but maybe this has been fixed? Just in case here is the .babelrc file, which is kept in the “topmost” directory for this project:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
}

Anyway, if these files are not sufficient enough to point to the issue of why my code isn’t being transpiled properly, please let me know. Again, for all this is worth, it might just be a 🤦‍♀️ on my part.

Many thanks~

[mkvlrn]

Might be related to #7788. Try moving your configuration to babel.config.js instead of using .babelrc, like below:

module.exports = {
  presets: [["@babel/preset-env", { modules: false }], "@babel/preset-react"]
};

That worked for me when I was having exactly the same problem.

[loganfsmyth]

The main question, when you get an error like that, is what specifically is running when the error occurs. Since that stack trace mentions Module._compile and such, the error is happening when Node itself is running your code. Given that you’ve said the error happens when you start the server, I would guess that whatever command you are running when that error occurs is running your original sourcecode. Given your Webpack setup, it seems like it should probably be running dist/server.js, the output file from Webpack?