CODEWITHSUNDEEP
javascriptreactjswebpackbabeljswebpack-dev-server
ambe5960
ambe5960

Reputation: 1990

Import JSX file into webpack config

I am trying to import a JSX file into my webpack config. It appears the file imports, but I cannot import modules into that file. I continuously get an error saying Cannot use import statement outside a module

Here is my 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 ...
    }

I feel like I have tried everything! Tinkering with babel, adding @babel/register, adding a .babelrc, changing how it is imported, etc.

Upvotes: 0

Views: 576

Answers (1)

Jay Kariesch
Jay Kariesch

Reputation: 1482

You likely need to tell Webpack to resolve that particular extension.

Here's the documentation on resolve: Resolve

The code:

module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

Also I notice you haven't specified your entry. If the solution above doesn't work, try specifying the following:

module.exports = {
  //...
  entry: './src/Render.jsx'
};

Docs: Entry Point

You likely have to do both.

Upvotes: 2

Related Questions