Symfony7项目Webpack Encore拆分JS至assets子目录报错求助

问题根源 #

你遇到的Module not found错误，核心原因有两个：

1. 导入路径错误：在app.js中导入js/log.js时使用了根路径/js/log.js，Webpack会从项目根目录而非assets目录查找文件，导致找不到。
2. 误解bootstrap.js配置作用：你修改的bootstrap.js中的require.context是用来加载Stimulus控制器的，和普通JS文件的导入无关，修改这里的正则不会解决普通JS文件的导入问题。

解决步骤 #

1. 修正导入路径 #

打开assets/app.js，将导入语句的路径改为相对路径：

// 错误写法
// import log from '/js/log.js';

// 正确写法
import log from './js/log.js';

因为app.js位于assets目录下，./js/log.js会指向assets/js/log.js，完全匹配你的目录结构。

2. 恢复bootstrap.js的原始配置 #

无需修改bootstrap.js中的正则逻辑，它仅负责自动加载controllers目录下的Stimulus控制器，和普通JS文件的加载无关。保持原始配置即可：

import { startStimulusApp } from '@symfony/stimulus-bridge';

const app = startStimulusApp(
    require.context(
        '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
        true,
        /\.[jt]sx?$/
    )
);
// register any custom, 3rd party controllers here
// app.register('some_controller_name', SomeImportedController);

3. 验证Webpack Encore配置（可选） #

检查webpack.config.js，确保没有限制assets目录下的文件加载，默认配置已支持加载所有子目录资源，典型配置示例：

const Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/app.js')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })
    .enableStimulusBridge('./assets/controllers.json')
;

module.exports = Encore.getWebpackConfig();

若你的配置无特殊限制，此步骤可直接跳过。

4. 重启Webpack监听进程 #

修改路径后，重启npm run watch或yarn watch进程，让Webpack重新识别文件路径。

内容的提问来源于stack exchange，提问作者tsukingo