将JSX文件导入Webpack配置

问题描述

我正在尝试将JSX文件导入到我的webpack配置中。似乎文件已导入，但我无法将模块导入该文件。我不断收到错误消息，说Cannot use import statement outside a module

这是我的webpack.config.js：

const bodyParser = require('body-parser')
require('@babel/register')
const render = require('../src/static/render.jsx')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const path = require('path'); 
const PATHS = {
    app: path.join(__dirname,'../src/static'),build: path.join(__dirname,'../src/static_dist')
};
const basePath = path.resolve(__dirname,'../src/static/');

module.exports = {
    mode: 'development',devtool: 'cheap-module-eval-source-map',output: {
        filename: '[name].js',path: PATHS.build,publicPath: '/static/'
    },devServer: {
        before: function(app) {

            app.use(bodyParser.json({ limit: '10mb' }))

            app.post('/render',function (req,res) {
                res.sendStatus(204);
               
                const initialState = {} //buildInitialState(req.body)  

                const result = render(url,initialState)

                res.json({
                    html: result.html,finalState: result.finalState
                })
            });
        },

// Render.jsx

require('@babel/register');

import React from 'react' <-- error happens here
import { Provider } from 'react-redux'
import { match,RouterContext } from 'react-router'
import ReactDOMServer from 'react-dom/server'
import configureStore from './store/configureStore';
import { createBrowserHistory } from "history";
import { routes } from "../routes.js";

import AdminNavbar from "./components/Navbars/AdminNavbar.jsx";
import Sidebar from "./components/Sidebar/Sidebar.jsx";

export default function render (url,initialState) {
 ... a function ...
    }

我觉得我已经尝试了一切！修补babel，添加@ babel / register，添加.babelrc，更改其导入方式等。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）