No syntax checksum and coloring

[wangzongming]

Hi! I used this plugin and put it in rollup and it was packaged successfully, but without syntax check and coloring, just like a text editor.

I hope you can help me point out the problem. Thank you very much

component

rollup@2.18.1
rollup-plugin-monaco-editor@0.2.1
monaco-editor@0.30.1

rollup.config.js

import babel from "@rollup/plugin-babel";
import svgr from "@svgr/rollup";
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import url from "@rollup/plugin-url";
import postcss from "rollup-plugin-postcss";
import postcssUrl from 'postcss-url';
import external from "rollup-plugin-peer-deps-external";
import monaco from 'rollup-plugin-monaco-editor';

const fs = require("fs");
const path = require("path");

const production = !process.env.ROLLUP_WATCH;

export default {
    input: "src/index.tsx", 
    output: {
        dir: "dist",
        format: "esm",
        sourcemap: !production, 
    },
    external: [
        "react", "react-router-dom", 
    ], 
    plugins: [ 
                //  Consistent with the case
        resolve({ 
            mainFields: [
                'exports',
                'browser:module',
                'browser',
                'module',
                'main',
            ].filter(Boolean),
            extensions: ['.mjs', '.cjs', '.js', '.json'], // Default: [ '.mjs', '.js', '.json', '.node' ]
            // whether to prefer built-in modules (e.g. `fs`, `path`) or local ones with the same names
            preferBuiltins: true, // Default: true
            dedupe: [], // userDefinedRollup.dedupe,
        }),
        external(),
        url(),
        svgr(),
        postcss({
            modules: true,
            plugins: [
                require("postcss-preset-env")({
                    autoprefixer: {
                        flexbox: "no-2009",
                    },
                    browsers: [
                        ">0.15%",
                        "last 4 versions",
                        "Firefox ESR",
                        "not ie < 9", // React doesn't support IE8 anyway
                        "last 3 iOS versions",
                        "iOS 7",
                        "iOS >= 7",
                    ],
                    stage: 3,
                }),
                postcssUrl({
                    url: (asset) => {
                        if (!/\.ttf$/.test(asset.url)) return asset.url;
                        const distPath = path.join(process.cwd(), 'dist');
                        const distFontsPath = path.join(distPath, 'fonts');
                        fs.ensureDirSync(distFontsPath);
                        const targetFontPath = path.join(distFontsPath, asset.pathname);
                        fs.copySync(asset.absolutePath, targetFontPath);
                        const relativePath = path.relative(process.cwd(), targetFontPath);
                        const publicPath = '/';
                        // console.log(`${publicPath}${relativePath}`)
                        return `${publicPath}${relativePath}`;
                    },
                }),
            ],
        }),
                //  Consistent with the case 
        monaco({
            pathPrefix: path.join(__dirname, '/dist'),
            languages: ['js', "css", "json"],
        }),
        babel({
            babelrc: false,
            babelHelpers: production ? "bundled" : "inline",
            exclude: [/core-js/],
            extensions: [".js", ".jsx", ".ts", ".tsx"],
            presets: [
                [
                    "@babel/typescript",
                    {
                        allowDeclareFields: true,
                        compilerOptions: {
                            typeRoots: ["node_modules/@types"],
                        },
                    },
                ],
                [
                    "@babel/env",
                    {
                        modules: false,
                        corejs: 3,
                        useBuiltIns: "usage",
                        targets: {
                            browsers: ["last 2 versions", "iOS >= 7", "Android >= 5"],
                        },
                    },
                ],
                [
                    "@babel/react",
                    {
                        runtime: "automatic",
                    },
                ],
            ],
            plugins: [
                [
                    "babel-plugin-named-asset-import",
                    {
                        loaderMap: {
                            svg: {
                                ReactComponent: "@svgr/webpack?-svgo![path]",
                            },
                        },
                    },
                ],
                "@babel/plugin-proposal-object-rest-spread",
                "@babel/plugin-syntax-dynamic-import",
                [
                    "@babel/plugin-proposal-class-properties",
                    {
                        loose: true,
                    },
                ],
                "react-loadable/babel",
                "babel-plugin-transform-object-assign",
                ["@babel/plugin-proposal-decorators", { legacy: true }],
                "@babel/plugin-proposal-optional-chaining",
            ],
        }),
        commonjs({
            extensions: [".js", ".ts", ".tsx"],
        }),
    ],
};

In the following, should check error. The language I set up is json

[chengcyber]

Is it possible to provide a reproducible git repository? With it, I can clone, reproduce this issue and figure out what is going on.

[wangzongming]

const production = !process.env.ROLLUP_WATCH; thanks for your reply I deleted the code. I can't get it back.