Module not found: Error: Can't resolve './token.did.js' in '/home/name/ic-projects/token/src/declarations/token'

Question

enter image description hereI am new to Web 3.0 programming. I was making an app for crypto token creation. while I was running the application, it was giving an error can't resolve:

./token.did.js' in '/home/name/ic-projects/token/src/declarations/token

I have imported the token as import { token } from "../../../declarations/token".

I read some blogs on StackOverflow and tried doing changes in webpack.config.js and tsconfig.json, but nothing really worked. I am getting the same error. here, I am attaching a screenshot of my code. Code of token.did service : { balanceOf: (principal) -> (nat) query; }

code of Webpack.config.js

 const path = require("path");
    const webpack = require("webpack");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const TerserPlugin = require("terser-webpack-plugin");
    const CopyPlugin = require("copy-webpack-plugin");
    
    function initCanisterEnv() {
      let localCanisters, prodCanisters;
      try {
        localCanisters = require(path.resolve(
          ".dfx",
          "local",
          "canister_ids.json"
        ));
      } catch (error) {
        console.log("No local canister_ids.json found. Continuing production");
      }
      try {
        prodCanisters = require(path.resolve("canister_ids.json"));
      } catch (error) {
        console.log("No production canister_ids.json found. Continuing with local");
      }
    
      const network =
        process.env.DFX_NETWORK ||
        (process.env.NODE_ENV === "production" ? "ic" : "local");
    
      const canisterConfig = network === "local" ? localCanisters : prodCanisters;
    
      return Object.entries(canisterConfig).reduce((prev, current) => {
        const [canisterName, canisterDetails] = current;
        prev[canisterName.toUpperCase() + "_CANISTER_ID"] =
          canisterDetails[network];
        return prev;
      }, {});
    }
    const canisterEnvVariables = initCanisterEnv();
    
    const isDevelopment = process.env.NODE_ENV !== "production";
    
    const frontendDirectory = "token_assets";
    
    const asset_entry = path.join("src", frontendDirectory, "src", "index.html");
    
    module.exports = {
      target: "web",
      mode: isDevelopment ? "development" : "production",
      entry: {
        // The frontend.entrypoint points to the HTML file for this build, so we need
        // to replace the extension to `.js`.
        index: path.join(__dirname, asset_entry).replace(/\.html$/, ".jsx"),
      },
      devtool: isDevelopment ? "source-map" : false,
      optimization: {
        minimize: !isDevelopment,
        minimizer: [new TerserPlugin()],
      },
      resolve: {
        extensions: [".js", ".ts", ".jsx", ".tsx"],
        fallback: {
          assert: require.resolve("assert/"),
          buffer: require.resolve("buffer/"),
          events: require.resolve("events/"),
          stream: require.resolve("stream-browserify/"),
          util: require.resolve("util/"),
        },
      },
      output: {
        filename: "index.js",
        path: path.join(__dirname, "dist", frontendDirectory),
      },
    
      // Depending in the language or framework you are using for
      // front-end development, add module loaders to the default
      // webpack configuration. For example, if you are using React
      // modules and CSS as described in the "Adding a stylesheet"
      // tutorial, uncomment the following lines:
      module: {
       rules: [
         { test: /\.(ts|tsx|jsx)$/, loader: "ts-loader" },
         { test: /\.css$/, use: ['style-loader','css-loader'] }
       ]
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: path.join(__dirname, asset_entry),
          cache: false,
        }),
        new CopyPlugin({
          patterns: [
            {
              from: path.join(__dirname, "src", frontendDirectory, "assets"),
              to: path.join(__dirname, "dist", frontendDirectory),
            },
          ],
        }),
        new webpack.EnvironmentPlugin({
          NODE_ENV: "development",
          ...canisterEnvVariables,
        }),
        new webpack.ProvidePlugin({
          Buffer: [require.resolve("buffer/"), "Buffer"],
          process: require.resolve("process/browser"),
        }),
      ],
      // proxy /api to port 8000 during development
      devServer: {
        proxy: {
          "/api": {
            target: "http://localhost:8000",
            changeOrigin: true,
            pathRewrite: {
              "^/api": "/api",
            },
          },
        },
        hot: true,
        watchFiles: [path.resolve(__dirname, "src", frontendDirectory)],
        liveReload: true,
      },
    };
code of tsconfig.json


   {
      "compilerOptions": {
        "target": "es2018",        /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
        "lib": ["ES2018", "DOM"],  /* Specify library files to be included in the compilation. */
        "allowJs": true,           /* Allow javascript files to be compiled. */
        "jsx": "react",            /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
      },
      "

include": ["src/**/*"],
}

Answer 1

You should import the file like this:

import { token } from '[addressToReach]/token.did';

I think your file name is peculiar. Also, I'm not sure about your way of exporting. if you export by using export default, you should then not use restructuring import.