Problem with webpack import

Questions & Help Questions
,
1

Hi everyone!

I’m having trouble with the app.js file, when I go to localhost:4000/chat or any url where app.js is imported I get the same message in the console:

SyntaxError: import declarations may only appear at top level of a module app.js:2

This is the file app.js:


import css from "../css/app.css"
import "phoenix_html"
import socket from "./socket"
import Chat from "./chat"
Chat.init(socket)
// We need to import the CSS so that webpack will load it.
// The MiniCssExtractPlugin is used to separate it out into
// its own CSS file.


// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
// in "webpack.config.js".
//
// Import dependencies
//


// Import local files
//
// Local files can be imported directly using relative paths, for example:

This is not likely to be a phoenix problem but I’m not sure how to navigate it and the errors I found online seemed to be about babel’s version which I think is fine this is my package.json:

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-loader": "^8.0.0",
    "copy-webpack-plugin": "^4.5.0",
    "css-loader": "^0.28.10",
    "mini-css-extract-plugin": "^0.4.0",
    "optimize-css-assets-webpack-plugin": "^4.0.0",
    "uglifyjs-webpack-plugin": "^1.2.4",
    "webpack": "4.4.0",
    "webpack-cli": "^2.0.10"
  }
}

and this is my webpack.config.js:


const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  entry: {
      './js/app.js': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js'))
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '../priv/static/js')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  
  plugins: [
    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
    new MiniCssExtractPlugin({ filename: '../css/style.css' }),
    new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
    new CopyWebpackPlugin([{ from: 'js/', to: '../js/' }])
  ]
});

What is random is that sometimes when I updated the chat.js file, with anything like console.log(‘hello’), the error would disappear and the connection in app.js would be successful