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

I’ve updated webpack and other packages so my package.json is now: { "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.6.0", "@babel/preset-env": "^7.6.0", "babel-loader": "^8.0.0", "copy-webpack-plugin": "^4.5.0", "css-loader": "^3.2.0", "mini-css-extract-plugin": "^0.4.0", "optimize-css-assets-webpack-plugin": "^5.0.3", "uglifyjs-webpack-plugin": "^1.2.4", "webpack": "^4.39.3", "webpack-cli": "^3.3.8" } } and now I noticed that it only loads app.js correctly when I already have mix phx.server running and I updated chat.js, after that the issue remains Tried to load files into a in the template instead of depending on webpack (app.js) but I don’t know how to get the phoenix module that socket.js needs if anyone knows that would help

[image] csisnett: SyntaxError: import declarations may only appear at top level of a module app.js:2 This error means You might have an import statement in the middle of a file, and not a the top.

Problem with webpack import

Questions & Help Questions

kokolegorille September 9, 2019, 1:11am 3

This error means You might have an import statement in the middle of a file, and not a the top.