(AppDir) Webpack asset/resource broken with js files

garronej commented 1 year ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:15:09 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T6000
Binaries:
  Node: 16.15.1
  npm: 8.11.0
  Yarn: 1.22.19
  pnpm: 6.28.0
Relevant packages:
  next: 13.1.1
  eslint-config-next: 11.0.1
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://github.com/garronej/react-dsfr-next-appdir-demo

To Reproduce

git clone https://github.com/garronej/react-dsfr-next-appdir-demo
cd react-dsfr-next-appdir-demo
git checkout import_static_js
yarn dev

Describe the Bug

When importing .js file as an url:

import Script from "next/script";
import testJsUrl from "./test.min.js";

console.log({ testJsUrl });

export default function RootLayout({ children }: { children: React.ReactNode; }) {

    return (
        <html>
            <head>
                <Script src={testJsUrl} />
            </head>
            <body>
                {children}
            </body>
        </html>
    );

}

(assuming next.config.js have been configured correctly)

The console logs something that looks good:

But it gives a 404.

Expected Behavior

No 404

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

blackbing commented 1 year ago

I have the same problem. not only js file.

import backgroundSource from './assets/grid.png';

// http://localhost:4200/_next/static/media/grid.1e100b25.png => 404 Not found

It is worked on next@13.0.6. After upgrade to next@13.1.0. It is broken.

artmsv commented 1 year ago

I have the same problem but with pages folder. Devtools in browsers warns that src prop does not match Server src prop.

Warning: Prop `src` did not match. Server: "/_next/static/wp/test.9cb0ac20b5931c36.js" 
Client: "/_next/static/wp/test.e0986f563dd5877b.js"

I believe this is the root of the problem, not sure what to do from here.

vercel / next.js