Next.js Discord

Discord Forum

cannot import .task file

Answered
Africanized honey bee posted this in #help-forum
Open in Discord
Africanized honey beeOP
Answered by Asian black bear
oh yeah, /public is a just fine way to do it then
View full answer

18 Replies

say if you could import data from "./something.task" how do you use that data variable?
the file is in a text file and you need the textual content?
Asian black bear
@Africanized honey bee It is because Next.js uses webpack v5 now, so file-loader isn't a thing. This should do the same thing (assuming you want to import the file contents as a string)

module.exports = {
  module: {
    rules: [
      {
        test: /\.task$/,
        type: 'asset/source',
      },
    ],
  },
};
And actually to add a custom webpack config you need to add a property to your next.config.js like this

webpack: (config, options) => {
    config.module.rules.push(      {
        test: /\.task$/,
        type: 'asset/source',
      })
   }
Quick question, i uploaded it on public and used

conts filename="/{filename}"

Any downside of this?
@Asian black bear
@Asian black bear the file would only be available on the client
Africanized honey beeOP
So this is google file for hand detection. It won't be a problem. And it's working as I expected
Asian black bear
right on
are you fetching it on the client?
@Asian black bear are you `fetch`ing it on the client?
Africanized honey beeOP
Yeap
Asian black bear
oh yeah, /public is a just fine way to do it then
Answer
Asian black bear
If you wanted it to get the Webpack immutable filename and cache/cache-busting benefits you could use the 'asset/inline' instead
then the import would return a path string that you could obtain the file on the client with fetch
Africanized honey beeOP
Cool, thanks for info 🙂
Asian black bear
yep! hope your project works well