webpack.config.js losing all syntax highlighting
I am losing syntax highlighting for my webpack.config.
If I delete my webpack.config.js then re-create it, it works again. But if I restart WebStorm, I lose it again. So weird.
Also tried invalidate cache and restart...no luck.
I can't even do an option + command + / on it to comment out some lines of code in it, that command just won't work on it once it loses syntax support.
I'm in the process of converting my codebase to typescript but that shouldn't cause this issue so what is it?
webpack.config.js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
const html = () => {
return new HtmlWebPackPlugin({
template: path.resolve(__dirname, 'src/client', 'index.html'),
filename: 'index.html',
hash: true,
});
};
const copyAllOtherDistFiles = () => {
return new CopyPlugin({
patterns: [
{ from: 'src/client/assets', to: 'lib/assets' },
{ from: 'src/server.ts', to: './' },
{ from: 'src/api.ts', to: './' },
{ from: 'package.json', to: './' },
{ from: 'ext/ink-3.1.10/js/ink-all.min.js', to: 'lib/js' },
{ from: 'ext/ink-3.1.10/js/autoload.min.js', to: 'lib/js' },
{ from: 'ext/js/jquery-2.2.3.min.js', to: 'lib/js' },
{ from: 'ext/ink-3.1.10/css/ink.min.css', to: 'lib/css/ink.min.css' },
{ from: 'feed.xml', to: './' },
{
from: 'src/shared',
to: './shared',
globOptions: {
ignore: ['**/*supressed.json'],
},
},
],
});
};
module.exports = {
entry: './src/client/index.tsx',
output: {
filename: 'scripts/app.[hash].bundle.js',
publicPath: '/',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
extensions: ['.ts', '.tsx', '.js'],
},
devtool: 'inline-source-map',
devServer: {
writeToDisk: true,
port: 8080,
},
target: 'web',
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true,
},
},
},
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.(tsx|ts)?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
},
],
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: 'file-loader',
options: {
outputPath: 'lib/assets/fonts',
},
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader'],
},
],
},
plugins: isProduction
? [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: isProduction ? 'lib/css/main.[hash].css' : 'main.css',
}),
html(),
copyAllOtherDistFiles(),
]
: [new CleanWebpackPlugin(), html(), copyAllOtherDistFiles()],
};
I even took out most the code, and you can see that it shows a green checkmark to say it's valid syntax but there is still no syntax highlighting
Please sign in to leave a comment.
please check the registered patterns in Preferences | Editor | File types -> Text file type - can you see
webpack.config.js
there? Removing this pattern from the list should solve the highlighting issue.No it's not listed in there however *.config was and I removed that but no luck, still the same issue, even after restarting (and invalidating caches) WebStorm.
Please share your
~/Library/Application Support/JetBrains/WebStorm2020.2/options/filetypes.xml
file and idea.log (Help > Show Log in Finder)<application>
<component name="FileTypeManager" version="17">
<extensionMap>
<mapping pattern="up" type="PLAIN_TEXT" />
<mapping pattern=".nycrc" type="PLAIN_TEXT" />
<mapping pattern=".prettierignore" type="PLAIN_TEXT" />
<mapping pattern=".nyc_output" type="PLAIN_TEXT" />
<mapping ext="js " type="PLAIN_TEXT" />
<mapping ext="lcov" type="PLAIN_TEXT" />
<removed_mapping ext="config" approved="true" type="PLAIN_TEXT" />
</extensionMap>
</component>
</application>
removing js here didn't make any difference either.
Here is my log, it's huge so you can download it from my google Drive https://drive.google.com/file/d/1HYn1t-pCrkAyO0RSUpUvpq7YNqYYhqIN/view?usp=sharing
I find this super frustrating that a great IDE like WebStorm is having this kind of problem TBH. If there was a syntax error it should tell me which there is not. And if it's some config like this, I'd expect webstorm to work out of the box and not have these sort of bugs.
I also don't understand how any of this makes sense looking at the file types when I said that syntax highlighting works if I create a brand new webpack.config.js file and then fizzles out and stops working if I restart WebStorm. How would that have anything to do with file types, it seems more like a strange bizarre bug to me
can't see any errors in your log that look related
Please try the following:
- select your
webpack.config.js
file in the Project tree on the left- hit
F1
(or whatever shortcut is assigned to View | Quick Documentation action)- attach a screenshot of the popup that opens
Also, can you see Mark as plain text action in your
webpack.config.js
file right-click menu?hmm yes it says plain text is enforced
Ok I right-clicked it and chose "Mark as Javascript" which seems to have fixed it. Why would I ever have to do this?
Thanks for details. You have marked the file as plain text, thus the issue. The IDE never does this automatically
Strange. Ok thanks for the help. I don't know how I did that but...