webpack.config.js losing all syntax highlighting

Screencast of the issue here

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

8 comments
Comment actions Permalink

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.

0
Comment actions Permalink

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.

0
Comment actions Permalink

Please share your ~/Library/Application Support/JetBrains/WebStorm2020.2/options/filetypes.xml file and idea.log (Help > Show Log in Finder)

0
Comment actions Permalink

<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

0
Comment actions Permalink

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?

0
Comment actions Permalink

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?

0
Comment actions Permalink

Thanks for details. You have marked the file as plain text, thus the issue. The IDE never does this automatically

0
Comment actions Permalink

Strange.  Ok thanks for the help.  I don't know how I did that but...

0

Please sign in to leave a comment.