Hi, I’m just starting out with programming and trying to implement CodeMirror into a Javascript React project I’m working on. I’ve just about exhausted all my Google-fu / StackOverflow options, and hoping someone here can help!
My project is using React, so I am using the codemirror and react-codemirror2 npm packages.
Below is one of the error messages I get when I try to run my code
ERROR in ./node_modules/codemirror/lib/codemirror.css 3:0 Module parse failed: Unexpected token (3:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | /* BASICS */ | > .CodeMirror { | /* Set height, width, borders, and global font properties here */ | font-family: monospace; @ ./src/client/components/OutputDisplay.jsx 19:0-40 @ ./src/client/containers/MiddleContainer.jsx @ ./src/client/containers/MainContainer.jsx @ ./src/client/App.jsx @ ./src/client/index.jsx ℹ ｢wdm｣: Failed to compile. ℹ ｢wdm｣: Compiling... ✖ ｢wdm｣: Hash: d9b7f911bb612cc9f2fc Version: webpack 4.46.0
the issue:
When I try to require in multiple themes and modes, I get an error message similar to the above for every css file I try to require in from my node_modules, while none of my mode files do. When running my script, some sort of textbox does seem to get created, but there’s no styling, everything other than the textbox text is invisible (including any sort of cursor indicator), random values seem to arbitrarily get put in there (like literally a string of x’s: xxxxxxxxxxxx), and when I do type in the box, i think a bunch of similarly invisible boxes get created on top of each other as the one I’m currently typing in gets moved downward. Below are snippets of my project, I’ve pasted in what I think are the relevant files, but more than happy to show anything important I may have not listed:
the component file I’m trying to render a CodeMirror instance
(note: I’ve tried all sorts of stuff, including import { Controlled as CodeMirror } and { UnControlled }, various combinations of requiring mode files, css files, @import vs. require… of course I also tried building my CodeMirror component in all sorts of ways with options, id, type, value, wrapper divs… and more)
import React, { useContext } from 'react'; import { GraphContext } from '../contexts/GraphContext'; import CodeMirror from 'react-codemirror2'; // require(codemirror/mode/javascript/javascript')) // require('codemirror/lib/codemirror.css'); // @import (inline) "./node_modules/codemirror/lib/codemirror.css"; const QueryField = () => { const [info] = useContext(GraphContext); return ( <div> <CodeMirror option={{ mode: 'javascript', }} /> </div> ); }; export default QueryField;
package.json
(note: I version downed react and react-dom to v16 as I was getting errors from CodeMirror when I had them at v17. I also tried to version down my @types/react and @types/react-dom dev-dependencies, but then got CodeMirror errors so I updated them back to v17.)
"dependencies": { "@apollo/client": "^3.3.11", "@fortawesome/fontawesome-svg-core": "^1.2.34", "@fortawesome/free-brands-svg-icons": "^5.15.2", "@fortawesome/free-regular-svg-icons": "^5.15.2", "@fortawesome/free-solid-svg-icons": "^5.15.2", "@fortawesome/react-fontawesome": "^0.1.14", "@tsconfig/recommended": "^1.0.1", "axios": "^0.21.1", "body-parser": "^1.19.0", "codemirror": "^5.59.4", "cors": "^2.8.5", "cross-env": "^7.0.3", "devtron": "^1.4.0", "dotenv": "^8.2.0", "electron": "^11.3.0", "express": "^4.17.1", "graphql": "^15.5.0", "pg": "^8.5.1", "react": "^16.14.0", "react-codemirror2": "^7.2.1", "react-dom": "^16.14.0", "react-router": "^5.2.0", "react-router-dom": "^5.2.0" }, "devDependencies": { "@babel/cli": "^7.1.0", "@babel/core": "^7.1.0", "@babel/plugin-proposal-class-properties": "^7.13.0", "@babel/plugin-transform-runtime": "^7.12.15", "@babel/preset-env": "^7.1.0", "@babel/preset-react": "^7.0.0", "@types/react": "^17.0.3", "@types/react-dom": "^17.0.2", "babel-loader": "^8.0.2", "concurrently": "^5.3.0", "css-loader": "^4.3.0", "nodemon": "^2.0.7", "style-loader": "^0.23.0", "ts-loader": "^8.0.17", "typescript": "^4.2.2", "webpack": "^4.46.0", "webpack-cli": "^4.5.0", "webpack-dev-server": "^3.11.2" } }
webpack.config.json
(planning on Typescripting my Javascript files at a later point, but unused currently)
(note: I also have a .babelrc file with the presets for @babel/preset-env and @babel/preset-react)
module: { rules: [ { test: /\.tsx?$/, include: [path.resolve(__dirname, 'src')], use: 'ts-loader', }, { test: /\.(jsx?)$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'], // plugins: ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"] } }, { test: /\.css$/, exclude: /node_modules/, use: ['style-loader', 'css-loader'], }, ], },