Я обновил свой проект с webpack 4 до 5. Проект запускается с помощью «webpack serve», но я получаю ошибку «Синтаксическая ошибка: невозможно использовать инструкцию импорта вне модуля» в файле точки входа. Раньше это работало в webpack 4. Не знаю, почему это теперь не удается после попытки расследования.

Что я могу упустить? Я попытался установить тип: модуль в пакете json, но это вызвало больше проблем в webpack.config.js

Мой файл webpack и точка входа являются таковыми:

 const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        main: './src/index.js',
    },
    devtool: 'inline-source-map',
    devServer: {
        port: 9001,
    },
    resolve: {
        extensions: ['.js', '.vue', '.json', '.scss'],
        alias: {}
    },
    module: {
        rules: [
            {
                test: /.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    "style-loader",
                    // Translates CSS into CommonJS
                    "css-loader",
                    // Compiles Sass to CSS
                    "sass-loader",
                ],
            },
            {
                test: /.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /.(jpe?g|png|gif|svg)$/i, 
                loader: "file-loader"
            }
        ]
    },
    mode: "development",
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Output Management',
            template: 'src/index.html'
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist/'),
        publicPath: '/'
    }
};
 

точка входа:

 'use strict';
import Vue from 'vue';
import App from './App';
import Vuex from 'vuex';

Vue.use(Vuex)
const store = new Vuex.Store({
    state: {},
    mutations: {},
    getters: {},
    modules: {}
});

new Vue({
    el: '#app',
    components: { App },
    store,
    render: function(createElement) {
        return createElement(App);
    }
});

export default store;
 

и пакет JSON

 {
    "name": "web",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "dependencies": {
        "css-hot-loader": "^1.4.2",
        "extract-text-webpack-plugin": "^3.0.2",
        "vuex": "^3.1.0"
    },
    "devDependencies": {
        "clean-webpack-plugin": "^0.1.19",
        "css-loader": "^1.0.0",
        "file-loader": "^2.0.0",
        "html-webpack-harddisk-plugin": "^0.2.0",
        "html-webpack-plugin": "^5.3.2",
        "less": "^3.9.0",
        "less-loader": "^4.1.0",
        "lodash": "^4.17.11",
        "lodash-es": "^4.17.11",
        "sass": "^1.42.1",
        "sass-loader": "^10.1.1",
        "style-loader": "^0.23.0",
        "vue": "^2.5.17",
        "vue-loader": "^14.2.3",
        "vue-template-compiler": "^2.5.17",
        "webpack": "^5.56.0",
        "webpack-cli": "^4.8.0",
        "webpack-dev-server": "^4.3.0"
    },
    "scripts": {
        "test": "echo "Error: no test specified" amp;amp; exit 1",
    "start": "webpack serve",
        "watch": "webpack --watch",
        "build": "webpack --display-error-details"
    },
    "repository": {
        "type": "git",
        "url": "git https://github.com/JordanKlaers/cssChallenges.git"
    },
    "author": "",
    "license": "ISC"
}
 

Вопрос

Я проверил вашу конфигурацию и обнаружил, что проблема заключается в импорте .vue файла ( App.vue ) в ваш js файл ( index.js точка входа).

Решение

В основном вам нужно babel-loader обработать js файл преобразования в этом случае. Просто установите оба babel и babel-loader :

 npm i -D babel-loader @babel/core @babel/preset-env
 

Затем добавьте загрузчик в свой webpack.config.js :

 {
    // ...
    module: {
    rules: [
        {
            test: /.js$/,
            use: {
              loader: "babel-loader",
            },
        },
        // ...
    }
}
 

Вот и все, но имейте в виду, вы забыли включить Vue в точку входа и store еще не определены:

 // add this
import Vue from "vue";

// `store` isn't defined