0

I'm building an SSR template, and when I use @babebl/register and then execute webpack (config), the system reported an error. I tried @babel/polyfill and @babel/plugin-transform-runtime, but none of them worked.

Babel version(s): 7.4.3 Node/npm version: [e.g. Node 10.15.3/npm 6.4.1] OS: window 10

index.js:

require("ignore-styles");
require("@babel/register")({
  ignore: [/\/(build|node_modules)\//],
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: ["@babel/plugin-syntax-dynamic-import", "dynamic-import-node"]
});
require("./server");

server.js

const config = require('../config/webpack.dev.config.js')
const webpack = require('webpack')
const express = require('express')
const webpackDevMiddleware = require('webpack-dev-middleware') 
const reactRouter = require('react-router')
const StaticRouter = reactRouter.reactRouter;
const app = express()
const complier = webpack(config)
const PORT = 8090
...
app.use(webpackDevMiddleware(complier, {
  publicPath: config.output.publicPath
}))

app.listen(PORT , function() {
  console.log(`SSR running on port ${PORT }`);
})

webpack.dev.config.js

const paths = require('./paths')
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: ['webpack-hot-middleware/client?reload=true', paths.appIndexJs],
  output: {
    path: paths.clientBuild,
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
    publicPath: paths.publicPath
  },
  devtool: 'eval-source-map',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-env', { 
              useBuiltIns: 'usage', 
              corejs: "2",  
              targets: {
                  browsers: ['last 2 versions', 'ie >= 9'],
              },
            }],
            '@babel/preset-react'
          ]
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new htmlWebpackPlugin({
      template: './client/index.html',
      filename: 'index.html'
    })
  ]
}

image

Rep

https://github.com/xuchenchenBoy/ssr （Please execute npm run dev:server and release notes in server.js）

chen xu
  • 41
  • 1
  • 4
  • 1
    Possible duplicate of [Babel 6 regeneratorRuntime is not defined](https://stackoverflow.com/questions/33527653/babel-6-regeneratorruntime-is-not-defined) – Dan O Apr 15 '19 at 01:57
  • there are many, many questions on Stack Overflow which deal with this exact error. Which of them have you researched, which solutions have you attempted, and why were they not successful? – Dan O Apr 15 '19 at 01:58
  • @DanO I tried those methods, but the problem still exists. – chen xu Apr 15 '19 at 07:05
  • @chenxu, have you tried `import "babel-polyfill";`? And since you are doing SSR, you need to add that in both your server-side top level root file and your client-side equivalent. Give that a try and post the code for it on how you did it before you share that the problem still exists. – Daniel Jun 17 '19 at 20:22

0 Answers0