Error encountered in Webpack 4 when trying to compile node modules CSS file: Unexpected .(dot) token

I am currently in the process of transitioning my React project from client-side rendering to server-side rendering.

Unfortunately, I have encountered an issue with my webpack configuration for CSS that was working perfectly fine in my original project (client-side rendering).

Although the build process runs smoothly, I encounter a syntax error when trying to execute the project.


/home/choiyeonsuk/web/ssr-tutorial/ssr-wis/node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css:1
(function (exports, require, module, __filename, __dirname) { .react-bs-table .react-bs-container-header .sort-column,.s-alert-close,td.react-bs-table-expand-cell,th.react-bs-table-expand-cell>div{cursor:pointer}.react-bs-table-container .react-bs-table-search-form{margin-bottom:0}.react-bs-table-bordered{border:1px solid #ddd;border-radius:5px}.react-bs-table table{margin-bottom:0;table-layout:fixed}.react-bs-table table td,.react-bs-table table th{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.react-bs-table-pagination{margin-top:10px}.react-bs-table-tool-bar{margin-bottom:5px}.react-bs-container-footer,.react-bs-container-header{overflow:hidden;width:100%}.react-bs-container-body{overflow:auto;width:100%}.react-bootstrap-table-page-btns-ul{float:right;margin-top:0}.react-bs-table .table-bordered{border:0;outline:0!important}.react-bs-table .table-bordered>thead>tr>td,.react-b

SyntaxError: Unexpected token .
    at new Script (vm.js:83:7)
    at createScript (vm.js:267:10)
    at Object.runInThisContext (vm.js:319:10)
    at Module._compile (internal/modules/cjs/loader.js:686:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:734:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:659:17)
    at require (internal/modules/cjs/helpers.js:22:18)

The tools I am using are webpack4 & babel7.

This is what my webpack.config.js looks like:

const path = require('path');
const nodeExternals = require('webpack-node-externals');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const serverConfig = {
  mode: 'development',
  target: 'node',
  node: {
    __dirname: false,
  },
  externals: [nodeExternals()],
  entry: {
    'index.js': path.resolve(__dirname, 'src/server.js'),
  },
  module: {
    rules: [
      // webpack rules here
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]',
  },
};

const clientConfig = {
  mode: 'development',
  target: 'web',
  entry: {
    // webpack entry points here
  },
  module: {
    rules: [
      // additional webpack rules here
    ],
  },
  output: {
    // webpack output configuration here
  },
  plugins: [
    // webpack plugins here
  ]
}

module.exports = [serverConfig, clientConfig];

Here is my babel.config.js file:

const presets = ['@babel/preset-env', '@babel/preset-react'];
const plugins = [
  // babel plugins here
];

module.exports = {
  presets,
  plugins,
};

After examining the issue, I believe it may be related to the webpack `nodeExternals` not properly excluding `node_modules`.

Any suggestions on how to resolve this?

Answer №1

When incorporating CSS for individual components, consider implementing CSS modules to prevent conflicts with class names.

For further information, refer to this informative resource.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mobile users are unable to access the form

Welcome to my website ! I encounter an issue where I can successfully submit a form on the desktop version, but it seems that the "Next" button below the form is not clickable on mobile. I would greatly appreciate any assistance in resolving this matter. ...

Implementing a delay between two div elements using jQuery

I have two Divs with the class "sliced", each containing three images with the class "tile". When I animate using jQuery, I am unable to add a delay between the "sliced" classes. However, I have successfully added a delay between the "tile" classes. index ...

The jQuery mouseout event is activated whenever my tooltip is hovered over

Recently, I encountered an issue with a menu that adds a https://i.sstatic.net/A0J2U.png Within the menu, there is jQuery code that functions to add a class on hover and remove it on mouse-out. The code snippet looks something like this... $(document).r ...

What's the best way to implement a font family in a React component?

I'm currently attempting to implement the font found at: https://fonts.google.com/specimen/Source+Code+Pro After downloading the font into my directory, it appears as shown in this image: enter image description here This is how I have it set up: &l ...

"Utilizing Typescript and React to set a property's value based on another prop: A step-by

Is there a way to create a dynamic prop type in React? I have an Alert component with various actions, such as clicking on different components like Button or Link. I am looking for a solution like this: <Alert actions={[{ component: Link, props: { /* ...

Struggling with a hook problem in a Next.js page.tsx?

In my Next.js project, I wanted to display a splash screen for 2 seconds before navigating to another screen. However, I encountered an issue with useEffect inside the page.tsx file in Next.js. When importing it, I received an error message. The component ...

Mastering responsive layout design in Nextjs using Tailwind CSS

I am attempting to design a card layout where the image is on the left and the content of the card is on the right using flex in NEXTJS and Tailwind CSS. My goal is to ensure that the image remains responsive. <div className="block"> < ...

Tips on leaving comments inside a render <div>

Hey there! I'm facing an unusual issue in my React+Webpack project. Even though I marked a line as a comment using //, it still gets rendered in the HTML output. Strangely, I have never encountered this problem before and can't figure out what tr ...

Adjusting font sizes in JavaScript causes the text to resize

Within my HTML pages, I am adjusting the font size using JavaScript code like this: "document.body.style.fontSize = 100/50/20" However, whenever the font size changes, the text content on the page moves up or down accordingly. This can be disorienting for ...

Is there a way to automatically change the full screen background on refresh?

Is there a way to have the background image of this website change to different pictures every time the page is refreshed? I'm curious about how this can be achieved. I noticed that Offliberty is able to do this. I tried looking at the source code b ...

How can the Drawer be selectively removed from specific routes while using Material-UI with react-router-dom?

My approach involves setting all routes as children of Material UI's Drawer, utilizing them as props. However, I'm facing an issue with the login page not being able to display the Drawer. How can I restructure the login route to exclude the draw ...

What methods can be used to customize the font and background color of a website for different user groups?

Trying to incorporate a template into my project. My client has requested the following: The regular user area should feature a blue background. The professional user area should have an orange background. Is there a way to set up a condition to change ...

Arranging images next to each other using CSS and HTML

I've been trying to arrange four images side by side, with two on the top row and two on the bottom. I want to ensure they stay consistent across all browser sizes except for mobile. Here is what I have attempted so far: #imageone{ position: absol ...

Incorporate images into ReactJS Components without the need to save them locally as files

<img src={BASENAME+"/src/images/cabecera_CE.jpg"} id="idImgCabecera" alt="Universidad Politécnica de Cartagena" class="img-responsive"/> and I am looking to do the following: import PHOTO from './../images/cabecera_CE.jpg' <img src= ...

Embedding a Material-UI Icon into an Input Field within a React Application

Hello, I am currently using a datepicker provided by Material-UI Datepickers. When utilizing the Inline datepicker option, I would like to include a calendar icon within the input field. Below is the code snippet representing the input element. How can I ...

Gliding over the problem with the Azure line

https://i.sstatic.net/7N3hO.jpg Is there a way to hide the opacity and font on hover? I have tried using outline: 0; in my CSS but there is still a blue line lingering. Any ideas on how to remove it? If you need to see the code and the issue I'm des ...

Adding a linear gradient with a fade effect to Highcharts sparkline chart: Step by step guide

I am working with a Highcharts sparkline chart, and the design in my Figma file resembles the image provided below. I would like to customize the chart by adding transparency and a linear-gradient effect. Can anyone provide guidance on how to achieve this? ...

Installation of React has encountered an error and has been aborted. Please try running yarnpkg add --exact react react-dom react-scripts cra-template again

I am facing difficulties while trying to create npx create-react-app . ➤ YN0009: │ core-js@npm:2.6.11 could not be built successfully (exit code 1, check logs at: /C:/Users/acer/AppData/Local/Temp/logfile-10088VPjTiMAhqTi1.log) ➤ YN0009: │ fseven ...

How can you adjust the width of the Material UI Select component?

Trying to customize the width of the Material UI Select component can be a bit tricky. To set the desired width, you need to assign a specific class to the FormControl component. This class, such as mw-120, should define the minimum width as 120px in your ...

"The power of React Redux combined with the efficiency of Fetch

My React app with Redux has the following structure: <ComponentParent> <ComponentA></ComponentA> <ComponentB></ComponentB> </ComponentParent> Within Component A's ComponentDidMount method, a fetch is made to retri ...