Webpack import from %appdata%

I have an electron app that needs to read a file stored in %appdata% (or the equivalent for macOS and linux). I am importing the file like this

const appPath = app.getPath("appData");
const data = await import(appPath + "/app/file.json");

If I run the code from the source file it works, but when I am trying to bundle it with webpack, I get a Module not found error. I know this is caused by webpack trying to perform an analysis on my imports.

So is there a way to import a file dynamically in webpack?

Thanks in advance!

Edit: my webpack config (no babel since I am using typescript)

  var path = require("path");
const CopyPlugin = require('copy-webpack-plugin');
var nodeExternals = require('webpack-node-externals');

module.exports = {
    mode: 'production',
    entry: "./src/index.ts",
    externals: [nodeExternals()],
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, 'build')
    },
    node:{
        __dirname:false
    },
    target: "electron-main",
    resolve: {
        alias: {
            ['firebase/app']: path.resolve(__dirname, 'node_modules/firebase/app/dist/index.cjs.js'),
            ['firebase']: path.resolve(__dirname, 'node_modules/firebase/dist/index.node.cjs.js')
        }, extensions: ['.ts', '.js']
    },
    module: {
        noParse: "/public/**/*",
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            // {
            //     test: /\.json$/,
            //     loader: 'json-loader'
            // }
        ],
    },
    plugins: [
        new CopyPlugin([
            { from: './src/public', to: './public' }
        ]),
    ]
 }

By looking into documentation it seems the answer is in Module Methods section:

Dynamic expressions in import()

It is not possible to use a fully dynamic import statement, such as import(foo). Because foo could potentially be any path to any file in your system or project.

The import() must contain at least some information about where the module is located. [...]

It is not clear if you need to read it at build time or at runtime, if its the former then make sure to copy the file to working directory (so that file is bundled in the build), if its the latter then you could use fs module to get the file at runtime.

Module Resolution, import foo from 'path/to/module'; // or require('path/to/module');. The dependency module can be from the application code or a third-party library. The resolver� With your 2 new app-data files, in your app you can change the import statement in your application: import {data} from './../api/app-data-APP_TARGET'; Now when Webpack builds your dev or prod environment it will replace that string and import the appropriate file.

Maybe you can try dynamic import and use promises like this

import(appPath + "/app/file.json").then(data => {
   console.log(data)
});

Having to use full path when importing from node_modules. � Issue , I have a codebase using es6 imports and was previously built with <script src=" node_modules/steal/steal.js" data-main="app" data-config=". Browse other questions tagged reactjs import ecmascript-6 webpack-dev-server webpack-2 or ask your own question. The Overflow Blog Stack Overflow for Teams has a new kind of content – Articles

I guess you can't, but the NormalModuleRpelacementPlugin might be a solution for your problem. You can use it in build time, however it could depends the environment for example.

The file path is same in the code, but after the build it will be changed whatever you want.

https://webpack.js.org/plugins/normal-module-replacement-plugin/

Support importing files from outside of the root folder � Issue #5563 , CRA also doesn't support monorepo so I have to setup webpack, parcel, or something similar to bundle my JSX, but also to run the babel macros� In particular, import() is a lot more finalized (i.e. accepted by browsers) than System.import(), which I am told webpack currently uses. So whatever policy allows webpack to include System.import() support should definitely allow it to include import(). 👍

30 Answers from Stack Overflow to the most popular webpack , Have you seen in webpack site (https://webpack.js.org/vote/) there is a page where you can influence and rank the priority of the new Can't we do the same with node/ES6 imports? c:\Users\Me\AppData\Roaming\npm\. - ensure Webpack picks up the `jsx` extension, there seems to be a bug preventing `jsx` files to be resolved: webpack/webpack#9865 vividviolet mentioned this issue Jun 16, 2020 fix: allow React to be chosen as a framework Shopify/argo-admin-template#39

Why webpack not build? - angular - html, <anonymous> (C:\Users\Nikita\AppData\Roaming\npm\node_modules\webpack- at require (internal/module.js:11:18) part of package.json "webpack": "4.20.2",� import stylesheetUrl from "file-loader!extract-loader!css-loader!main.css"; // stylesheetUrl will now be the hashed url to the final stylesheet The extract-loader works similar to the extract-text-webpack-plugin and the mini-css-extract-plugin and is meant as a lean alternative to it.

json5-loader, index.js var appConfig = require('./appData.json5'); // or, in ES6 // import appConfig from './appData.json5' console.log(appConfig.env); // 'production'� webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Comments
  • Share your webpack and babel configurations.
  • Updated the post
  • When does your app need to read this file? When application is running or at the build time?
  • At run time. I will try once again using fs,since quite a few people told me,but I am pretty sure fs yielded the same error
  • I read that, but I hope there was some workaround since copying the file to the bundle is obviously not an option
  • Is there a reason you are not using fs?
  • Alright, so for some reason, it didn't work the first time I used fs. But I guess the problem was somewhere else back then and I hadn't notice. Thanks!
  • I forgot to add the await in the post, but using dynamic import is what I tried doing
  • I looked into it, and it still requires me to know the path that I want to import from. Since %appdata% is in the user folder which can have any name, this won't work