I am getting a syntax error in one of my css files from monaco-editor in node_modules. It is an unknown word error:

> 1 | // Imports
    | ^
  2 | import ___CSS_LOADER_API_IMPORT___ from "../../../../../../css-loader/dist/runtime/api.js";
  3 | var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 @ ./node_modules/monaco-editor/esm/vs/platform/contextview/browser/contextMenuHandler.css 2:12-317 9:17-24 13:15-29

However, I have css-loader configured in my webpack.config.js:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const PerspectivePlugin = require("@finos/perspective-webpack-plugin");
const path = require("path");
const plugins = [
  new HtmlWebPackPlugin({
    title: "Perspective React Example",
    template: "./src/frontend/index.html",
  }),
  new PerspectivePlugin(),
];
module.exports = {
  context: path.resolve(__dirname),
  entry: "./src/frontend/index.tsx",
  mode: "development",
  devtool: "source-map",
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },

  plugins: plugins,

  module: {
    rules: [
      {
        test: /\.ts(x?)$/,
        //exclude: /node_modules/,
        loader: "ts-loader",
      },
      {
        test: /\.css$/,
        //exclude: /node_modules/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
            },
          },
          'postcss-loader'
        ],
      },
    ],
  },
  devServer: {
    // superstore.arrow is served from here
    contentBase: [
      path.join(__dirname, "dist"),
      path.join(__dirname, "node_modules/superstore-arrow"),
    ],
  },
  experiments: {
    executeModule: true,
    syncWebAssembly: true,
    asyncWebAssembly: true,
  },
  output: {
    filename: "app.js",
    path: __dirname + "/dist",
  },
};

I also have a config file for postcss-loader:

module.exports = {
    plugins: [
      require('autoprefixer')
    ]
  };

I'm not sure what is wrong with what I'm doing, so I'm wondering if there is another loader I need to add to webpack.config.js or if my configuration is incorrect?

I am getting a syntax error in one of my css files from monaco-editor in node_modules. It is an unknown word error:

> 1 | // Imports
    | ^
  2 | import ___CSS_LOADER_API_IMPORT___ from "../../../../../../css-loader/dist/runtime/api.js";
  3 | var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 @ ./node_modules/monaco-editor/esm/vs/platform/contextview/browser/contextMenuHandler.css 2:12-317 9:17-24 13:15-29

However, I have css-loader configured in my webpack.config.js:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const PerspectivePlugin = require("@finos/perspective-webpack-plugin");
const path = require("path");
const plugins = [
  new HtmlWebPackPlugin({
    title: "Perspective React Example",
    template: "./src/frontend/index.html",
  }),
  new PerspectivePlugin(),
];
module.exports = {
  context: path.resolve(__dirname),
  entry: "./src/frontend/index.tsx",
  mode: "development",
  devtool: "source-map",
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },

  plugins: plugins,

  module: {
    rules: [
      {
        test: /\.ts(x?)$/,
        //exclude: /node_modules/,
        loader: "ts-loader",
      },
      {
        test: /\.css$/,
        //exclude: /node_modules/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
            },
          },
          'postcss-loader'
        ],
      },
    ],
  },
  devServer: {
    // superstore.arrow is served from here
    contentBase: [
      path.join(__dirname, "dist"),
      path.join(__dirname, "node_modules/superstore-arrow"),
    ],
  },
  experiments: {
    executeModule: true,
    syncWebAssembly: true,
    asyncWebAssembly: true,
  },
  output: {
    filename: "app.js",
    path: __dirname + "/dist",
  },
};

I also have a config file for postcss-loader:

module.exports = {
    plugins: [
      require('autoprefixer')
    ]
  };

I'm not sure what is wrong with what I'm doing, so I'm wondering if there is another loader I need to add to webpack.config.js or if my configuration is incorrect?

• javascript
• css
• webpack

• I've worked through the same issue here: github./finos/perspective/discussions/1484 – Tim P Commented Jul 18, 2021 at 14:54

2 Answers 2

// is not a valid ment in CSS. You have to use /* ... */.

I had same issue, try this:

use: [
  "style-loader",
  "css-loader",
  {
    loader: "postcss-loader",
    options: {
      postcssOptions: {
        plugins: [
          [
            "postcss-preset-env",
            {
              // Options
            },
          ],
        ],
      },
    },
  },
],