1

I've inherited some javaScript/typeScript code I cant much change.

using:

  • fuse v0.4.0
  • fusebox v4.0.0,
  • typescript 4.1.3
  • I'm generating a bundle & sourceMap (bundle.js, bundle.js.map)

this sourceMap works, BUT ONLY if I do a text replace on the "sources" in bundle.js.map

  • finding occurrences of : src/

    • {"version":3,"sources":["/src/lib/development.ts","/src/lib/server.ts"
  • replacing with: ../../

    • {"version":3,"sources":["../../lib/development.ts","../../lib/server.ts"

Based on the docs, I should be able to set the sourceRoot property in fuse.js. but no matter what value i set, the output into bundle.js.map remains unaffected.

my folder tree looks like this:

 ...where 'build' is my sourceRoot

my fuse.js looks like this:

task('default', async () => {
    const fuse = FuseBox.init({
        allowSyntheticDefaultImports: true,
        homeDir: '.',
        output: 'build/$name.js',
        target: 'universal',
        sourceMaps: { inline: false, sourceRoot: "" },
//        sourceMaps: { sourceRoot: "/src" }, 
//        sourceMaps: { sourceRoot: "/../.." },
//        sourceMaps: { sourceRoot: "test" }, 
        plugins: [
            EnvPlugin({
                DB_HOST: '127.0.0.1',
                DB_USER: 'appadmin',
                DB_PASSWORD: 'password',
                NODE_ENV: 'development',
                REDIS_HOST: '192.168.100.17',
                REDIS_PORT: '6379'
            }),
            [
                CSSResourcePlugin({
                    inline: true
                }),
                CSSPlugin()
            ],
            ImageBase64Plugin(),
            JSONPlugin(),
            RawPlugin(['.dot']),
            SVGPlugin(),
            WebIndexPlugin({
                bundles: ['client/vendors', 'client/app'],
                template: 'public/index.html'
            })
        ]
    })

    fuse.register('fbjs', {
        main: 'index.js',
        homeDir: 'node_modules/fbjs',
        instructions: ' '
    })

    fuse.bundle('client/vendors')
        .target('browser@es5')
        .watch("client/vendors/**")
        .hmr({ reload: true })
        .instructions('~ client/index.tsx')

    fuse.bundle('client/app')
        .target('browser@es5')
        .watch("client/**")
        .hmr({ reload: true })
        .instructions('> [client/index.tsx]')

    fuse.bundle('server/bundle')
        .target('server@esnext')
        .watch('server/**')
        .instructions('> [lib/development.ts]')
        .completed(process => process.start())

    fuse.dev()

    await fuse.run()
})

task('production', async () => {
    const client = FuseBox.init({
        allowSyntheticDefaultImports: true,
        homeDir: '.',
        output: 'build/$name.js',
        target: 'browser@es5',
        plugins: [
            EnvPlugin({
                NODE_ENV: 'production'
            }),
            [
                CSSResourcePlugin({
                    inline: true
                }),
                CSSPlugin()
            ],
            ImageBase64Plugin(),
            JSONPlugin(),
            SVGPlugin(),
            WebIndexPlugin({
                template: 'public/index.html'
            }),
            QuantumPlugin({
                bakeApiIntoBundle: true
            })
        ]
    })

    const server = FuseBox.init({
        homeDir: '.',
        output: 'build/$name.js',
        target: 'server@esnext',
        plugins: [
            EnvPlugin({
                NODE_ENV: 'production'
            }),
            RawPlugin(['.dot']),
            QuantumPlugin({
                bakeApiIntoBundle: true,
                containedAPI: true,
                replaceProcessEnv: false
            })
        ]
    })

    client.bundle('client/vendors').instructions('~ client/index.tsx')
    client.bundle('client/app').instructions('!> [client/index.tsx]')
    server.bundle('server/bundle').instructions('!> [lib/production.ts]')

    await client.run()
    await server.run()
})

task('generate-schema', async () => {
    const fuse = FuseBox.init({
        homeDir: '.',
        output: 'build/$name.js',
        target: 'server@esnext',
        plugins: [
            EnvPlugin({
                NODE_ENV: 'development'
            })
        ]
    })

    fuse.bundle('generate-schema')
        .target('server@esnext')
        .instructions('> [lib/generateSchema.ts]')
        .completed(process => process.start())

    await fuse.run()
})

task('generate-data', async () => {
    const commandOptions = process.argv
    commandOptions.shift()
    commandOptions.shift()

    const fuse = FuseBox.init({
        homeDir: '.',
        output: 'build/$name.js',
        target: 'server@esnext',
        plugins: [
            EnvPlugin({
                NODE_ENV: 'development'
            })
        ]
    })

    fuse.bundle('generate-data')
        .target('server@esnext')
        .instructions('> [lib/generateData.ts]')
        .completed(process => process.start(commandOptions))

    await fuse.run()
})
'''


  • please use 4.0 that has been recently released, your issue should be resolved there. – user3677173 Jan 08 '21 at 08:52
  • Thank You Mr 3677173 (that was my mothers family name). I mistakenly view(ed) 'fusebox' version (shoulda view(ed) 'fuse-box' version. so yes, I'm on fuse-box v4! (sorry for the confusion!) @user3677173 – Jim Randell Jan 08 '21 at 13:17
  • anyone else want to offer a possible option?? i'd be very grateful to anyone who could offer any sort of hints... – Jim Randell Jan 11 '21 at 09:44

0 Answers0