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